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

Posted 2022-06-23 刻刻帝丶

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

学习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(...);

#总结#
其实写了这么多，还有一个问题我没写到，就是作用域链在某些特殊情况下是可以动态改变的
比如with()、eval()等等，当然这些都不建议使用，我总结了一篇文章
有兴趣的同学可以看看 ->传送门<-
还是总结一下今天写的作用域链相关知识

• 作用域是变量能够引用、函数能够生效的区域
• 函数创建时，产生内部属性[[Scope]]包含函数被创建的作用域中对象的集合（作用域链）
  作用域链上每个对象称为可变对象（Variable Obejct），
  每一个可变对象都以键值对形式存在（VO要细分的话，全局对象GO和活动对象AO）
• 函数执行时，创建内部对象叫做执行环境/执行上下文（execution context）
  它定义了一个函数执行时的环境，函数每次执行时的执行环境独一无二
  函数执行结束便会销毁
• js引擎就通过函数执行上下文的作用域链规则来进行解析标识符（用于读写），从作用域链顶端依次向下查找
• 尽量缓存局部变量，减少作用域查找性能开销（照顾未优化浏览器）

主页传送门