JavaScript内部属性[[Scope]]与作用域链及其性能问题

来源：懂视网责编：小采时间：2020-11-27 20:24:39

JavaScript内部属性[[Scope]]与作用域链及其性能问题

JavaScript内部属性[[Scope]]与作用域链及其性能问题:学习JavaScript已经很长时间了今天打算回忆一下作用域的知识作用域这个知识很基础并且非常重要下面我就总结一下JavaScript中的作用域以及作用域链的相关知识作用域作用域是什么？作用域是变量能够引用、函数能够生效的区域它限制了你对内存空间上值的获

推荐度：

点击下载本文 文档为doc格式

导读JavaScript内部属性[[Scope]]与作用域链及其性能问题:学习JavaScript已经很长时间了今天打算回忆一下作用域的知识作用域这个知识很基础并且非常重要下面我就总结一下JavaScript中的作用域以及作用域链的相关知识作用域作用域是什么？作用域是变量能够引用、函数能够生效的区域它限制了你对内存空间上值的获

学习JavaScript已经很长时间了

今天打算回忆一下作用域的知识
作用域这个知识很基础并且非常重要
下面我就总结一下JavaScript中的作用域以及作用域链的相关知识

作用域

作用域是什么？
作用域是变量能够引用、函数能够生效的区域
它限制了你对内存空间上值的获取和修改
所有的语言都存在作用域
我们可以理解作用域为js引擎根据名称查找变量的一套规则
理解了作用域，我们才能去理解闭包等等一系列问题

[[Scope]]

大家都知道，函数是特殊的可执行对象
既然是对象，就可以拥有属性
函数中存在这一个内部属性[[Scope]]（我们不能使用，供js引擎使用）
函数被创建时，这个内部属性就会包含函数被创建的作用域中对象的集合
这个集合呈链式链接，被称为函数的作用域链
作用域链上的每一个对象被称为可变对象（Variable Obejct），
每一个可变对象都以键值对形式存在
举一个例子，看下面的全局函数

var a = 1;function foo(){ ...}

foo函数创建时，它的作用域链中插入了一个全局对象GO（Global Object），包含全局所有定义的变量

// 伪代码
foo.[[Scope]] = {
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 ......
 a: undefined, // 预编译阶段还不知道a值是多少
 foo: function(){...},
 }
}

执行环境

在函数执行时，会创建一个叫做执行环境/执行上下文（execution context）的内部对象
它定义了一个函数执行时的环境
函数每次执行时的执行环境独一无二
多次调用函数就多次创建执行环境
并且函数执行完毕后，执行环境就会被销毁
执行环境有自己的作用域链，用于解析标识符

看到这里可能大家有点蒙，我再给大家说明一下我的理解
[[Scope]]和执行期上下文虽然保存的都是作用域链，但不是同一个东西
现在先明确一点区别
[[Scope]]属性是函数创建时产生的，会一直存在
而执行上下文在函数执行时产生，函数执行结束便会销毁

实例

我把上面的例子扩展一下再进行详细说明

var a = 1;function foo(x, y){
 var b = 2; function bar(){
 var c = 3;
 }
 bar();
}
foo(100, 200);

下面我就通过这几行代码把作用域链以及执行环境详细说明一下
还是建议各位同学先看看我写的这个预编译

首先，在执行流的流动中，全局环境中创建了函数foo()（预编译阶段就创建了），于是foo函数有了属性[[Scope]]

// 伪代码：foo函数创建产生[[Scope]]对象
foo.[[Scope]] = {
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 a: undefined, //预编译阶段还不知道a的值是多少，执行过程中会修改
 foo: function(){...},
 ......
 }
}

foo函数执行前，创建了执行期上下文（我暂且把执行期上下文写作EC，内部叫什么名我也不知道），执行期上下文取得foo内部[[Scope]]属性保存的作用域链（复制），然后foo函数执行前预编译产生了一个活动对象AO（Active Object），这个对象被推入EC作用域链的最前端

// 伪代码：foo函数执行前产生执行期上下文EC复制foo中[[Scope]]属性保存的作用域链
foo.EC = {
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 a: 1,
 foo: function(){...},
 ......
 }
}

// 伪代码：foo函数预编译产生AO活动对象，挂载到foo中EC作用域链的最前端
foo.EC = {
 AO: {
 this: window,
 arguments: [100,200],
 x: 100,
 y: 200,
 b: undefined,
 bar: function(){...}
 },
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 a: 1,
 foo: function(){...},
 ......
 }
}

foo函数在预编译阶段创建了bar函数，于是bar函数创建了属性[[Scope]]，包含bar被创建的作用域中对象的集合，也就是复制了foo.EC

// 伪代码：bar函数创建产生[[Scope]]对象
bar.[[Scope]] = {
 AO: {
 this: window,
 arguments: [100,200],
 x: 100,
 y: 200,
 b: undefined,
 bar: function(){...}
 },
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 a: 1,
 foo: function(){...},
 ......
 }
}

bar函数执行，过程同foo函数执行相近，我就直接写最后结果了

// 伪代码：bar函数执行产生执行上下文
bar.EC = {
 AO: {
 this: window,
 arguments: [],
 c: undefined,
 },
 AO: {
 this: window,
 arguments: [100,200],
 x: 100,
 y: 200,
 b: 2,
 bar: function(){...}
 },
 GO: {
 this: window ,
 window: ... ,
 document: ... ,
 a: 1,
 foo: function(){...},
 ......
 }
}

bar函数执行完毕，执行环境被销毁，相当于delete bar.EC

foo函数执行完毕，执行环境被销毁，相当于delete foo.EC

程序结束

变量解析过程

不知道我写这么多大家理解没有
js引擎就是通过作用域链的规则来进行变量查找（准确的说应该是执行上下文的作用域链）
查找过程就拿上面的代码来说，比如说我在bar函数内加一行console.log(a);
那么bar函数执行时，js引擎想要打印a，于是就去作用域链上查找
第一层AO没有
第二层AO没有
第三层GO找到了变量a
于是返回了变量a的值
相信大家在了解了作用域之后，就会理解为什么全局环境为什么不能访问局部环境

性能问题

今天写high了，像吃了炫迈一样，那就顺便把性能问题也说清楚了吧
js引擎查找作用域链是为了解析标识符
占用了时间理所当然的产生了性能开销
所以解析标识符有代价，你的变量在执行环境作用域链的位置越深，读写速度就越慢
这很容易理解
在函数中读写局部变量总是最快的，读写全局变量通常最慢
当然了，这些额外的性能开销对于优化js引擎（比如chrome的V8 (⊙▽⊙)）来说可能微不足道，甚至可以毫不夸张的说没有性能损失
但是还是要照顾大多浏览器
所以推荐大家养成这样的编码习惯：尽量使用局部变量（缓存）
我举一个小例子

function demo(){
 var a = document.getElementById('a');
 var b = document.getElementById('b');
 var c = document.getElementById('c');
 a.onclick = function(){ ...
 }
 a.style.left = ...;
 a.style.top = ...;
 b.style.backgroundColor = ...;
 c.className = ...;
 document.body.appendChild(...);
 document.body.appendChild(...);
 document.body.appendChild(...);
}

这段代码看起来缓存了，优化了代码
但其实这段代码执行过程中，js引擎解析标识符，要查找6次document
而且document存在于window对象
也就是作用域链的最末尾
所以我们再进行缓存，包括document.body、a.style
再加上单一var原则
重构函数

function demo(){
 var doc = document,
 bd = doc.body,
 a = doc.getElementById('a'),
 b = doc.getElementById('b'),
 styleA = a.style;
 a.onclick = function(){ ...
 }
 styleA.left = ...;
 styleA.top = ...;
 styleA.backgroundColor = ...;
 b.className = ...;
 bd.appendChild(...);
 bd.appendChild(...);
 bd.appendChild(...);
}