ES5.1下的作用域链

作用域链(ES5.1规格视角)

javascript作用域类型

javascript采用的是词法作用域(静态作用域) 与之相对的是动态作用域，以下的例子可以很好地说明

let a = 3

function foo() {

  console.log(a);

}

function foowrapper() {

  let a = 4

  foo()

}

foowrapper() // 3而不是4

静态作用域是与我们惯性思维冲突的，从上述例子可以看出，我们第一次看会习惯性往函数调用位置去找变量(动态作用域思维)，但是javascript使用的是静态作用域，也就是代码写在哪里，作用域就从那里链接，而不是运行的位置进行作用域链接，这是整个作用域的核心概念

作用域链定义

函数调用上下文作用域链

规格

伪代码

执行环境由词法环境、变量环境 this组成，今天我们主要关注点在变量环境(VO|AO),和词法环境[[scope]]

activeExecutionContext = {

    VO: {...}, // or AO

    this: thisValue,

    Scope: [ // Scope chain

      // 所有变量对象的列表

      // 用于标识符查找

    ]

};

Scope定义

// [[Scope]]表示内部使用的抽象操作,用于描述语言规范本身

Scope = AO + [[Scope]]

函数激活作用域链接过程

在函数进入上下文(函数创建时)AO/VO，Scope定义如下：

Scope = AO|VO + [[Scope]]

解析

活动对象是作用域数组的第一个对象，被添加到作用域的前端

Scope = [AO].concat([[Scope]])

函数激活链接实例

var x = 10;

function foo() {

  var y = 20;

  function bar() {

    var z = 30;

    alert(x +  y + z);

  }

  bar();

}

foo(); // 60

对此，我们有如下的变量/活动对象，函数的的[[scope]]属性以及上下文的作用域链：

全局上下文的变量对象是：

globalContext.VO === Global = {

  x: 10

  foo: <reference to function>

};

在“foo”创建时，“foo”的[[scope]]属性是：

foo.[[Scope]] = [

  globalContext.VO

];

在“foo”激活时（进入上下文），“foo”上下文的活动对象是：

fooContext.AO = {

  y: 20,

  bar: <reference to function>

};

“foo”上下文的作用域链为：

fooContext.Scope = fooContext.AO + foo.[[Scope]] 

fooContext.Scope = [

  fooContext.AO,

  globalContext.VO

];

内部函数“bar”创建时，其[[scope]]为：

bar.[[Scope]] = [

  fooContext.AO,

  globalContext.VO

];

在“bar”激活时，“bar”上下文的活动对象为：

barContext.AO = {

  z: 30

};

“bar”上下文的作用域链为：

barContext.Scope = barContext.AO + bar.[[Scope]] // i.e.:

barContext.Scope = [

  barContext.AO,

  fooContext.AO,

  globalContext.VO

];

对“x”、“y”、“z”的标识符解析如下：

- "x"

-- barContext.AO // not found

-- fooContext.AO // not found

-- globalContext.VO // found - 10

- "y"

-- barContext.AO // not found

-- fooContext.AO // found - 20

- "z"

-- barContext.AO // found - 30

一个例外-使用函数构造函数生成函数

var x = 10;

function foo() {

  var y = 20;

  function barFD() { // 函数声明

    alert(x);

    alert(y);

  }

  var barFE = function () { // 函数表达式

    alert(x);

    alert(y);

  };

  var barFn = Function('alert(x); alert(y);');

  barFD(); // 10, 20

  barFE(); // 10, 20

  barFn(); // 10, "y" is not defined

}

foo();

正常来说，在函数创建时获取函数的[[scope]]属性，通过该属性访问到所有父上下文的变量，但是由函数构造函数创建的的函数，其[[scope]]总是唯一的全局对象属性。

动态改变作用域链

eval

eval能够动态生成函数，且eval上下文与当前调用上下文的作用域链一致

示例

function foo(str, a) {

eval( str ); // 4

var c = 4;

console.log( a, b );

}

var b = 2;

var c = 3;

foo( "var b = 3; console.log(c)", 1 ); // 1, 3

这里我们使用eval打印了c,可以看到结果是foo作用中的c，这里判断出eval不是像函数构造函数的[[Scope]]总是唯一的全局变量，而b变量能够在foo中访问，也说明了eval与foo是享受了同一个作用域，当然严格模式下，eval会创建自己的作用域，不会影响到当前调用上下文的作用域，如下例：

function foo(str, a) {

  'use strict'

  eval(str) // 4

  var c = 4

  console.log(`foo-a ${a} foo-b ${b}`) // 1, 2 而不是 1 3

}

var b = 2

var c = 3

foo('var b = 3; console.log("eval-b",b,"eval-c",c)', 1)

这里访问b时，输出了2而不是eval中的3，说明严格模式下，eval创建了自己的作用域，不会影响到当前调用的上下文作用域

with、catch

它们将作用变量添加到作用域链最前端，作用域链修改如下：

Scope = withObject | catchObject + AO | VO +[[Scope]]

with实例

var x = 10, y = 10;

with ({x: 20}) {

  var x = 30, y = 30;

  console.log(x) // 30

  console.log(y) // 30

}

console.log(x) // 10

console.log(y) // 30

过程解析：

x = 10, y = 10
{x: 20} 添加到作用域顶端
var x 、var y 在执行代码前以及被提升到with外面
修改{x: 20} 中的20 为 30
没在{x: 30}中找到y，在全局作用域中找到了y，将其修改为30
with结束，将{x: 30} 从作用域链中移出。
此时x为全局作用域x，没有变化，而y在with声明时，变为30

catch实例

try {

  ...

} catch (ex) {

  console.log(ex)

}

作用域链修改为：

var catchObject = {

  ex: <exception object>

};

Scope = catchObject + AO|VO + [[Scope]]

知识关联---二维作用域链(作用域链、原型链)查找

为什么会有二维作用域链呢，因为一个属性在对象中没有直接找到，查询会在原型链中继续。也就是搜索属性

过程

作用域链环节
深入到原型链环节

可能的情况

二维作用域链是指在作用域查找之后，再去原型链上查找，分为一下两种情况

基本属性查找，查找到了作用域链末端，全局变量节点，此时会在全局变量的原型链上展开搜索。
对象属性查找，先要在作用域链上找到对象本身，然后再去对象原型链上找到指定属性。

情况1示例

function foo() {

  console.log(x)

}

Object.prototype.x = 10;

foo(); // 10

过程解析：

在foo的VO对象没有找到x
向作用域链下一个节点查找，此时为window
无法在window上查找到属性x
此时已经是作用域顶端，便向着window其原型链找到x，辛酸过程如下图

可以看到window原型链的末端节点为Object，终于在这里找了x，输出了10

情况2示例

function foo() {

  console.log(o.x)

}

let o = {

}

Object.prototype.x = 200

foo();

过程解析：

在foo的VO对象没有找到o
在window对象找到了o
在o自身查找x属性，没有找到
在o的原型上Object.prototype上找到了x = 200
输出200

感谢

参考了颜海镜大大翻译的ES5.1规格，感谢他和汤姆大叔的无私奉献，然后我才能发现一些东西别人几年前就看透了，自己好菜呀(划掉)，这里是汤姆大叔的原文,我推荐大看一下他的深入js系列，虽然在2012写的，但是放在现在仍然是教科书级别的干货，例子出于他的文章和《你不知道的javascript》

巴特西

ES5.1下的作用域链

作用域链(ES5.1规格视角)

javascript作用域类型

作用域链定义

函数调用上下文作用域链

Scope定义

函数激活作用域链接过程

一个例外-使用函数构造函数生成函数

动态改变作用域链

eval

with、catch

知识关联---二维作用域链(作用域链、原型链)查找

过程

可能的情况

感谢

最新文章

热门文章