狠狠撸

Javascript
核心概念

尚春@meituan

Knowing why things work the way they work

讲什么？

Prototype Chain
Variable Object

Constructor
Closure
Execution context
This
Scope Chain

{}
name

__proto__
gender

摆闭.丑补蝉翱飞苍笔谤辞辫别谤迟测(‘濒别苍驳迟丑’)

[]
length 0
__proto__

Array prototype Object prototype

concat fn hasOwnProperty fn

... ... ... ...

__proto__ __proto__ null

instanceof
[]

__proto__

var arr = [];
Array prototype
assert(arr instanceof Array);
concat fn
// true
... ...

__proto__
assert(arr instanceof Object);
// true
Object prototype
hasOwnProperty fn

... ...

__proto__ null

对象因何而来

Constructor

构造器制造过程
F = new NativeObject()
F.[[Class]] = "Function"
F.[[Prototype]] = Function.prototype
F.[[Call]] = <reference to function>
F.[[Construct]] = internalConstructor

// if this function is created via new Function
F.[[Scope]] = globalContext.scope
// else
F.[[Scope]] = activeContext.scope;
F.length = countParameters

__objectPrototype = new Object();
__objectPrototype.constructor = F
F.prototype = __objectPrototype

return F

对象制造过程
F.[[Construct]](initialParameters):
O = new NativeObject();

O.[[Class]] = "Object";

var __objectPrototype = F.prototype;
// if __objectPrototype is an object
O.[[Prototype]] = __objectPrototype
// else
O.[[Prototype]] = Object.prototype;

R = F.[[Call]](initialParameters); this === O;

// if R is a object
return R
// else
return O

function Engineer(name, gender) {
this.name = name;
this.gender = gender;
}

Engineer.prototype.print = function() {
alert(this.name + this.gender);
}

var shangchun = new Engineer(‘尚春’, ‘male’);
var lizhiye = new Engineer(‘李志业’, ‘male’);

Engineer
other properties

prototype

shangchun __proto__

name 尚春

gender male

__proto__ Engineer prototype Function.prototype
constructor <built-ins>
print fn __proto__
lizhiye __proto__
name 李志业

gender male

__proto__
Object.prototype
<built-ins>

__proto__ null

代码类型

eval code
10%

global code
30%

function code
60%

每种代码类型都会运行在自己的上下文中

Execution Contexts

function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}

var bar = foo();

bar(); // 1

var res = eval('{ x: 1 }');

bar(); // 1

function foo() {
var x = 1;
alert(x);
EC Stack
};
}

var bar = foo();

bar(); // 1 Global EC

bar(); // 1

function foo() {
var x = 1;
alert(x);
EC Stack
};
}
First
var bar = foo(); Function EC


bar(); // 1

function foo() {
var x = 1;
alert(x);
EC Stack
};
}
Second


bar(); // 1

function foo() {
var x = 1;
alert(x);
EC Stack
};
}
Eval EC
var bar = foo();


bar(); // 1

function foo() {
var x = 1;
alert(x);
EC Stack
};
}
Third


bar(); // 1

详解贰颁

Execution Context
{
vars,
Variable Object function declarations,
arguments...
}

[Variable object + all
Scope Chain
parent scopes]

thisValue Context object

Variable Object

// Global EC
Variable Object === this === global object

// Function EC
Variable Object === Activation Object

AO === Abstract VO +
arguments object +
formal parameters

Global VO

var bar = 10;
Global VO
function foo() {
var x = 1; bar 10
return function () { foo fn
alert(x);
}; built-ins
}

Activation Object

function foo(x, y) { AO
var z = 30;
// FD x 10
function bar() {} y 20
// FE
(function baz() {})(); arguments {0:10, 1:20}
}
z 30
foo(10, 20); bar fn

代码执行过程

1. 进入执行上下文
1.1. 初始化变量对象(Variable Object)
1.2. 初始化作用域链(Scope Chain)
1.3. 初始化this
2. 执行代码

初始化VO

1. 若为Function EC，将函数各个形参名设为VO属
性，属性值为形参传值或undefined

2. 将各个函数声明声明的函数名设为VO属性，其值为
对应的函数对象。重名则覆盖

3. 将各个变量声明声明的变量设为VO属性，其值为
undefined。仅在与其它变量重名时可覆盖

function foo(x, y) {
alert(x) // 1
var x = 10;
alert(x) // 10

alert(y) // function
function y() {};
}

foo(1, 2);

bar VO
z 30

__parent__

var x = 10;
bar.[[Scope]]
(function foo() {
var y = 20;
foo VO
y 20
(function bar() { __parent__
var z = 30;
})();
Global VO
})()
x 10
other properties
__parent__ null

bar context scope chain

对于作用域链

1. 静态作用域(lexical scope)
2. 在执行代码阶段可以被catch、with改变
3. 为闭包的实现提供了基础

Closure

函数是?一级对象
每个函数都是?一个闭包
作用域链

function foo() {
var x = 10;
alert(x);
};
}

var x = 20;

var returnedFunction = foo();

returnedFunction();
10

var x = 10;

function foo() {
alert(x);
}

(function(funArg) {
var x = 20;

var returnedFunction = funArg;

returnedFunction();
})(foo);
10

This

1. Global EC:
this === global object === global VO

2. Function EC:
2.1. 作为函数调用时，this === global object

2.2. 作为方法调用时，this === caller object

2.3. 作为构造器调用时，this === new object

2.4. 通过call/apply调用时，this === first argument

参考

? The Core Dmitry Soshnikov
? ECMA-262-3 in detail Dmitry Soshnikov
? Annotated ECMAScript 5.1 es5.github.com

狠狠撸

The core of javascript

More Related Content

The core of javascript