深入理解JavaScript作用域链与性能优化

关键词：标识符、执行上下文、作用域、作用域链、变量对象、活动对象理论知识

JavaScript作用域链与性能关系

掌握JavaScript中的作用域管理机制及其作用域链至关重要，因为这直接关系到标识符解析的性能。在作用域链中，需要查找的变量对象数量越多，标识符的位置越深，访问和查找该标识符所耗费的时间也就越长。若作用域管理不当，将直接导致脚本执行效率下降。

执行上下文与作用域链机制

JavaScript引擎在执行代码时会创建执行上下文（Execution Context，有时也称为作用域），以此界定代码运行的环境。页面加载完成后，引擎会初始化一个全局执行上下文；每当调用一个函数时，引擎便会创建对应的执行上下文。这些上下文最终形成一个堆栈结构，当前正在执行的上下文位于堆栈顶部。

每个执行上下文都关联着一个用于解析标识符的作用域链，该链条由一个或多个变量对象组成，这些对象定义了当前作用域内的标识符。全局执行上下文的作用域链仅包含一个变量对象，其中定义了所有可用的全局变量和函数。当函数被创建（而非执行）时，JavaScript引擎会将创建时的执行上下文作用域链赋值给该函数的内部属性[[Scope]]。随后，在函数执行阶段，引擎会创建活动对象（Active Object），并在初始化阶段为this、arguments、命名参数以及该函数的所有局部变量赋值。活动对象会置于执行上下文作用域链的顶端，其后方紧跟着函数[[Scope]]属性中引用的对象。

代码执行期间，JavaScript引擎通过遍历执行上下文的作用域链来解析变量和函数名等标识符。这一解析过程从作用域链的顶层开始，遵循自上而下的顺序进行查找。

function add(num1, num2) {

return num1 + num2;

}

作用域链查找过程示例

当这段代码执行开始时，add函数拥有一个仅包含全局变量对象的[[scope]]属性。如下图：

在执行add函数时，JavaScript引擎会创建一个新的执行上下文和一个包含this、arguments、num1、num2的活动对象，并把活动对象添加到作用域链中。在add()函数内部运行时，JavaScript引擎需要解析函数里的num1和num2标识符。var total = add(5, 10);

解析过程是从作用域链中的第一个对象开始，这个对象就是包含该函数局部变量的活动对象。如果在该对象中没有找到标识符，就会继续在作用域链中下一个对象里查找标识符。一旦找到标识符，查找就结束。

基于作用域的性能优化策略

局部变量是JavaScript中读写最快的标识符。

一个好的经验：任何非局部变量在函数中的使用超过一次时，都应该将其存储为局部变量。

对于数组和对象，始终将那些需要频繁存取的值存储到局部变量中。

实际上每次存取HTMLCollection对象属性，都会对DOM文档进行动态查询。

如果需要对HTMLCollection对象的成员反复存取，高效的方式是将它们复制到数组里。