浅析JavaScript作用域链、执行上下文与闭包
闭包和作用域链是JavaScript中比较重要的概念,这两天翻阅了一些资料,把相关知识点给大家总结了以下。
JavaScript采用词法作用域(lexicalscoping),函数执行依赖的变量作用域是由函数定义的时候决定,而不是函数执行的时候决定。以下面的代码片段举例说明,通常来说(基于栈的实现,如C语言)foo被调用之后函数内的本地变量scope会被释放,但是从词法上看foo的内嵌匿名函数中scope应该指的是foo的本地变量scope,并且实际上代码的运行结果跟词法上的表达式一致的,f被调用之后返回的是localscope。函数对象f在其主体函数foo调用结束之后,依然保持着foo函数体作用域变量的引用,这就是所谓的闭包。
varscope='globalscope'; functionfoo(){ varscope='localscope'; returnfunction(){ returnscope; } } varf=foo(); f();//返回"localscope"
那么闭包到底是如何工作的呢?了解闭包首先需要了解变量作用域和作用域链,另外一个重要的概念是执行上下文环境。
变量作用域
JavaScript中全局变量拥有全局的作用域,函数体内申明的变量的作用域是整个函数体内,是局部的,当然也包括函数体内定义的嵌套函数。函数体内局部变量的优先级高于全局变量,如果局部变量与全局变量重名,全局变量会被局部变量掩盖;同样嵌套函数内定义的局部变量的优先级高于嵌套函数所在函数的局部变量。这简直是显而易见的,几乎所有人都了解。
接下来谈谈可能大家比较陌生的。
函数声明提升
用一句话来说明函数申明提升,指的是函数体内部申明的变量再整个函数内有效。也就是说,就是在函数体最底部申明的变量,也会被提升到最顶部。举个例子:
varscope='globalscope'; functionfoo(){ console.log(scope);//这里不会打印出"globalscope",而是"undefined" varscope='localscope'; console.log(scope);//很显然,打印出"localscope" } foo();
第一个console.log(scope)会打印出undefined而不是globalscope,是因为局部变量的申明被提升了,只是还未赋值。
作为属性的变量
在JavaScript中,有三种定义全局变量的方式,如下示例代码中的globalVal1、globalVal2和globalValue3。一个有趣的现象是,实际上全局变量仅仅只是全局对象window/global(在浏览器中是window,在node.js中是global)的属性而已。为了更加符合通常意义的变量定义,JavaScript把用var定义的全局变量,设计成了不可删除的全局对象属性。通过Object.getOwnPropertyDescriptor(this,'globalVal1')可以得到,其configurable属性为false。
varglobalVal1=1;//不可删除的全局变量 globalVal2=2;//可删除的全局变量 this.globalValue3=3;//同globalValue2 deleteglobalVal1;//=>false变量没有被删除 deleteglobalVal2;//=>true变量被删除 deletethis.globalValue3;//=>true变量被删除
那么问题来了,函数体内定义的局部变量是不是也作为某个对象的属性呢?答案是肯定的。这个对象是跟函数调用相关的,在ECMAScript3中称为“callobject”、ECMAScript5中称为“declaraviteenvironmentrecord”的对象。这个特殊的对象对我们来说是一种不可见的内部实现。
作用域链
从上一节我们知道,函数局部变量可与看做是某个不可见的对象的属性。那么JavaScript的词法作用域的实现可以这样描述:每一段JavaScript代码(全局或函数)都有一个跟它关联的作用域链,它可以是数组或链表结构;作用域链中的每一个元素定义了一组作用域内的变量;当我们要查找变量x的值,那么从作用域链的第一个元素中找这个变量,如果没有找到者找链表中的下一个元素中查找,直到找到或抵达链尾。了解作用域链的概念对理解闭包至关重要。
执行上下文
每段JavaScript代码的执行都与执行上下文绑定,运行的代码通过执行上下文获可用的变量、函数、数据等信息。全局的执行上下文是唯一的,与全局代码绑定,每执行一个函数都会创建一个执行上下文与其绑定。JavaScript通过栈的数据结构维护执行上下文,全局执行上下文位于栈底,当执行一个函数的时候,新创建的函数执行上下文将会压入栈中,执行上下文指针指向栈顶,运行的代码即可获得当前执行的函数绑定的执行上下文。如果函数体执行嵌套的函数,也会创建执行上下文并压入栈,指针指向栈顶,当嵌套函数运行结束后,与它绑定的执行上下文被推出栈,指针重新指向函数绑定的执行上下文。同样,函数执行结束,指针会指向全局执行上下文。
执行上下文可以描述成式一个包含变量对象(对应全局)/活动对象(对应函数)、作用域链和this的数据结构。当一个函数执行时,活动对象被创建并绑定到执行上下文。活动对象包括函数体内申明的变量、函数、arguments等。作用域链在上一节以及提到,是按词法作用域构建的。需要注意的是this不属于活动对象,在函数执行的那一刻就以及确定。
执行上下文的创建是有特定的次序和阶段的,不同阶段有不同的状态,具体的细节可以看一下参考资料,在结尾部分会列出。
闭包
了解了作用域链和执行上下文,回过头看篇首的那段代码,基本上就可以解释闭包式如何工作了。函数调用的时候创建的执行上下文以及词法作用域链保持函数调用所需要的信息,f函数调用之后才可以返回localscope。
需要注意的是,函数内定义的多个函数使用的是同一个作用域链,在使用for循环赋值匿名函数对象的场景比较容易引起错误,举例如下:
vararr=[]; for(vari=0;i<10;i++){ arr[i]={ func:function(){ returni; } }; } arr[0].func();//返回10,而不是0
arr[0].func()返回的是10而不是0,跟感官上的语义有偏差。在ECMAScript6引入let之前,变量作用域范围是在整个函数体内而不是在代码区块之内,所以上面的例子中所有定义的func函数引用了同一个作用域链在for循环之后,i的值已经变为10。
正确的做法是这样:
vararr=[]; for(vari=0;i<10;i++){ arr[i]={ func:getFunc(i) }; } functiongetFunc(i){ returnfunction(){ returni; } } arr[0].func();//返回0
以上内容给大家介绍了JavaScript作用域链、执行上下文与闭包的相关知识,希望对大家有所帮助。