高性能JavaScript之管理作用域

客官°小女子只卖身不卖艺 2021-12-21 04:09 266阅读 0赞

作用域涉及到数据的存储，先来看以下几个知识点：

1.  字面量：字面量只代表本身，不存储在特定位置。JavaScript 中的字面量有：字符串、数字、布尔值、对象、数组、函数、正则表达式、null 和 undefined。
2.  本地变量：使用 var 关键字定义的数据存储单元。
3.  数组元素：存储在数据内部，以数字作为索引，从 0 开始。
4.  对象成员：存储在对象内部，以字符串作为索引。

--------------------

对于以上四种基本的存储位置都有不同的读写消耗。总的来说，字面量和局部变量的访问速度快于数组元素和对象成员的访问速度。

--------------------

对于每一个函数来说，内部属性 \[\[Scope\]\] 包含了一个函数被创建的作用域中对象的集合，它决定哪些数据能够被访问（在编译阶段确定）。

--------------------

执行函数的时候回创建一个称为执行环境的内部对象，函数每次执行时对应的执行环境都是独一无二的，并且对于同一个函数，每次调用都会创建一个新的执行环境，当函数执行完毕，执行环境就被销毁。在执行环境的作用域链中，一个变量所在的位置靠后（越深），它的读写速度就会越慢（因为需要一层层去查找 RHS 查找）。因此，函数中读写局部变量总是快于全局变量（全局变量在作用域的最末端）。综上所述，如果某个跨作用域的值在函数中被引用的次数超过一次，那么就把它存储到局部变量中。

// 例如 获取 HTML 中的两个 button
    function test() {
    	let btn = document.getElementById('btn');
    	let bnt2 = document.getElementById('btn2');
    	...
    }
     // document 是全局对象，每次需要查找到作用域链的最末端
     // 改写成
    function test2() {
    	let doc = document;
    	let btn = doc.getElementById('btn');
    	let btn2 = doc.getElementById('btn2');
    	...
    }

*  闭包、作用域和内存  
    闭包是 JavaScript 最强大的特性之一，它允许函数访问局部变量作用域之外的数据，然而，根据上面的描述，闭包可能会导致性能问题，因为闭包会保留它所在的作用域链（[闭包的深刻认识][Link 1]），如果网站大且闭包多，那么将对内存造成一定的影响，如内存泄漏。不过我们可以根据上面提过的，将常用的跨作用域变量存储在局部变量中，然后直接访问局部变量来提高访问速度。

[Link 1]: https://blog.csdn.net/weixin_42989576/article/details/93899582