Introduce the core conceptions of javascript, including prototype chain, constructor, execution context, variable object, scope chain, closure and this.

1. Javascript
核心概念
尚春@meituan

2. Knowing why things work the way they work

3. but, not everything!

4. 讲什么？
Prototype Chain
Variable Object
Constructor
Closure
Execution context
This
Scope Chain

5. {}
name
__proto__
gender

6. [].hasOwnProperty(‘length’)
[]
length 0
__proto__
Array prototype Object prototype
concat fn hasOwnProperty fn
... ... ... ...
__proto__ __proto__ null

7. 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

8. 对象因何而来
Constructor

9. 构造器制造过程
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

10. 对象制造过程
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

11. 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’);

12. 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

13. 代码类型
eval code
10%
global code
30%
function code
60%

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

15. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1
var res = eval('{ x: 1 }');
bar(); // 1

16. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

17. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

18. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

19. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
First
var bar = foo(); Function EC
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

20. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

21. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

22. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
Second
var bar = foo(); Function EC
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

23. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

24. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

25. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
Eval EC
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

26. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

27. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

28. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
Third
var bar = foo(); Function EC
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

29. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

30. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1 Global EC
var res = eval('{ x: 1 }');
bar(); // 1

31. function foo() {
var x = 1;
return function () {
alert(x);
EC Stack
};
}
var bar = foo();
bar(); // 1
var res = eval('{ x: 1 }');
bar(); // 1

32. 详解EC
Execution Context
{
vars,
Variable Object function declarations,
arguments...
}
[Variable object + all
Scope Chain
parent scopes]
thisValue Context object

33. Variable Object
// Global EC
Variable Object === this === global object
// Function EC
Variable Object === Activation Object
AO === Abstract VO +
arguments object +
formal parameters

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

35. 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

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

37. 初始化VO
1. 若为Function EC，将函数各个形参名设为VO属
性，属性值为形参传值或undefined
2. 将各个函数声明声明的函数名设为VO属性，其值为
对应的函数对象。重名则覆盖
3. 将各个变量声明声明的变量设为VO属性，其值为
undefined。仅在与其它变量重名时可覆盖

38. function foo(x, y) {
alert(x) // 1
var x = 10;
alert(x) // 10
alert(y) // function
function y() {};
}
foo(1, 2);

39. 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

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

41. Closure
函数是⼀一级对象
每个函数都是⼀一个闭包
作用域链

42. function foo() {
var x = 10;
return function () {
alert(x);
};
}
var x = 20;
var returnedFunction = foo();
returnedFunction();
10

43. var x = 10;
function foo() {
alert(x);
}
(function(funArg) {
var x = 20;
var returnedFunction = funArg;
returnedFunction();
})(foo);
10

44. 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

45. 参考
• The Core Dmitry Soshnikov
• ECMA-262-3 in detail Dmitry Soshnikov
• Annotated ECMAScript 5.1 es5.github.com

46. Thanks