学习JavaScript已经很长时间了
今天打算回忆一下作用域的知识
作用域这个知识很基础并且非常重要
下面我就总结一下JavaScript中的作用域以及作用域链的相关知识
作用域是什么?
作用域是变量能够引用、函数能够生效的区域
它限制了你对内存空间上值的获取和修改
所有的语言都存在作用域
我们可以理解作用域为js引擎根据名称查找变量的一套规则
理解了作用域,我们才能去理解闭包等等一系列问题
大家都知道,函数是特殊的可执行对象
既然是对象,就可以拥有属性
函数中存在这一个内部属性[[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引擎就通过函数执行上下文的作用域链规则来进行解析标识符(用于读写),从作用域链顶端依次向下查找
尽量缓存局部变量,减少作用域查找性能开销(照顾未优化浏览器)
以上就是JavaScript内部属性[[Scope]]与作用域链及其性能问题的内容,更多相关内容请关注PHP中文网(www.php.cn)!