Javascript

尚春@meituan

核心概念

Knowing why things work the way they work

but, not everything!

讲什么？

Prototype Chain

ConstructorExecution context

Variable Object

Closure

This

Scope Chain

{}

__proto__

name

gender

[][]

length 0

__proto__

[].hasOwnProperty(‘length’)

Array prototypeArray prototype

concat fn

... ...

__proto__

Object prototypeObject prototype

hasOwnProperty fn

... ...

__proto__ null

instanceof

[][]

__proto__

Array prototypeArray prototype

concat fn

... ...

__proto__

Object prototypeObject prototype

hasOwnProperty fn

... ...

__proto__ null

var arr = [];

assert(arr instanceof Array);// true

assert(arr instanceof Object);// true

Constructor

对象因何而来

F = new NativeObject()F.[[Class]] = "Function"F.[[Prototype]] = Function.prototypeF.[[Call]] = <reference to function>F.[[Construct]] = internalConstructor

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

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

return F

构造器制造过程

F.[[Construct]](initialParameters):O = new NativeObject();

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

var __objectPrototype = F.prototype;// if __objectPrototype is an objectO.[[Prototype]] = __objectPrototype// elseO.[[Prototype]] = Object.prototype;

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

// if R is a objectreturn R// elsereturn 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’);

shangchunshangchun

name 尚春

gender male

__proto__

lizhiyelizhiye

name 李志业

gender male

__proto__

EngineerEngineer

other propertiesother properties

prototype

__proto__

Engineer prototypeEngineer prototype

constructor

print fn

__proto__

Function.prototypeFunction.prototype

<built-ins><built-ins>

__proto__

Object.prototypeObject.prototype

<built-ins><built-ins>

__proto__ null

global code30%

function code60%

eval code10%

代码类型

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

Execution Contexts

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

First Function EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

Second Function EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

Eval EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

Third Function EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

Global EC

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

var bar = foo();

bar(); // 1

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

bar(); // 1

EC Stack

详解EC

Execution ContextExecution Context

Variable Object

{ vars, function declarations, arguments... }

Scope Chain [Variable object + all parent scopes]

thisValue Context object

Variable Object

// Global ECVariable Object === this === global object

// Function ECVariable Object === Activation Object

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

Global VO

var bar = 10;

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

Global VOGlobal VO

bar 10

foo fn

built-insbuilt-ins

Activation Object

function foo(x, y) { var z = 30; // FD function bar() {} // FE (function baz() {})();}

foo(10, 20);

AOAO

x 10

y 20

arguments {0:10, 1:20}

z 30

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);

var x = 10;

(function foo() { var y = 20; (function bar() { var z = 30; })();})() Global VOGlobal VO

x 10

other propertiesother properties

__parent__ null

foo VOfoo VOy 20

__parent__

bar VObar VOz 30

__parent__

bar.[[Scope]]

bar context scope chain

关于作用域链

1. 静态作用域(lexical scope)

2. 在执行代码阶段可以被catch、with改变

3. 为闭包的实现提供了基础

Closure

函数是⼀一级对象每个函数都是⼀一个闭包

作用域链

function foo() { var x = 10; return function () { 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

Thanks