JavaScript的作用域与作用域链

Posted 2020-08-23 chenxj

作用域

作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。可以说，变量和函数在什么时候可以用，什么时候被摧毁，这都与作用域有关。

javascript中，变量的作用域有全局作用域和局部作用域两种。

1. 全局作用域（Global Scope）

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：

　　（1）最外层函数和在最外层函数外面定义的变量拥有全局作用域

　　（2）所有末定义直接赋值的变量自动声明为拥有全局作用域

　　（3）所有window对象的属性拥有全局作用域

一般情况下，window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等等。

2. 局部作用域（Local Scope）　　

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域。

总之呢，当JS解析器执行时，首先就会在执行环境里构建一个全局对象，我们定义的全局属性就是做为该对象的属性读取，在顶层代码中我们使用this关键字和window对象都可以访问到它。而函数体中的局部变量只在函数执行时生成的调用对象中存在，函数执行完毕时局部变量即刻销毁。因此在程序设计中我们需要考虑如何合理声明变量，这样既减小了不必要的内存开销，同时能很大程度地避免变量重复定义而覆盖先前定义的变量所造成的Debug麻烦。

示例1：

(function() {
   var a = b = 5;
})();
console.log(b);

上面的代码会打印 5。

这个问题的诀窍是，这里有两个变量声明，但 a 使用关键字var声明的。代表它是一个函数的局部变量。与此相反，b 变成了全局变量。

示例2：

var wow = \'hello\'; 
var message = function(){     
  var _wow = \'world\';
}

在这个例子中全局环境中包含了两个对象（全局环境的变量对象不算），window.wow和window.message，而这个message函数中又包含了两个对象，它自己的变量对象（其中定义了arguments对象）和全局环境的变量对象。当这个函数开始执行时，message自己的变量对象中定义了_wow，而它的全局环境的变量对象有wow，假设在message中alert一下wow，实际上是message中包含的全局环境的变量对象.wow，于是可以访问。

作用域链

先引入《JavaScript高级程序设计》  --P73

执行环境(execution context,为简单起见,有时也称为“环境”)是 JavaScript 中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象(variable object),环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象,但解析器在处理数据时会在后台使用它。

全局执行环境是最外围的一个执行环境。根据 ECMAScript 实现所在的宿主环境不同,表示执行环,因境的对象也不一样。在 Web 浏览器中,全局执行环境被认为是 window 对象。因此所有全局变量和函数都是作为 window 对象的属性和方法创建的。某个执行环境中的所有代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定义也随之销毁(全局执行环境直到应用程序退出——例如关闭网页或浏览器——时才会被销毁)。

每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。ECMAScript 程序中的执行流正是由这个方便的机制控制着。

当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain)。作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数,则将其活动对象(activation object)作为变量对象。活动对象在最开始时只包含一个变量,即 arguments 对象(这个对象在全局环境中是不存在的)。作用域链中的下一个变量对象来自包含(外部)环境,而再下一个变量对象则来自下一个包含环境。这样,一直延续到全局执行环境;全局执行环境的变量对象始终都是作用域链中的最后一个对象。

标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始,然后逐级地向后回溯,直至找到标识符为止(如果找不到标识符,通常会导致错误发生)。

看了这段话也基本知道了执行环境、活动对象，变量对象的定义还有机制了。

接下来进一步理解：

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。例如定义下面这样一个函数：

function add(x,y) {
var b= x+ y;
return b;
}

在函数add创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示（注意：图片只例举了全部变量中的一部分）：

函数add的作用域将会在执行时用到。例如执行如下代码：

var total = add(5,10);

执行此函数时会创建一个称为“执行环境(execution context)”的内部对象，执行环境定义了函数执行时的环境。每个执行环境都有自己的作用域链，用于标识符解析，当执行环境被创建时，而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

这些值按照它们出现在函数中的顺序被复制到执行环境的作用域链中。它们共同组成了一个新的对象，叫“活动对象(activation object)”，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：

 

在函数执行过程中，没遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部，也就是从活动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没找到继续搜索作用域链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义。函数执行过程中，每个标识符都要经历这样的搜索过程。

作用域链和代码优化

从作用域链的结构可以看出，在执行环境的作用域链中，标识符所在的位置越深，读写速度就会越慢。如上图所示，因为全局变量总是存在于执行环境作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。例如下面的代码：

function changeColor(){

document.getElementById("btnChange").onclick=function(){

document.getElementById("targetCanvas").style.backgroundColor="red";

};

}

这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：

function changeColor(){

var doc=document;

doc.getElementById("btnChange").onclick=function(){

doc.getElementById("targetCanvas").style.backgroundColor="red";

};

}

这段代码比较简单，重写后不会显示出巨大的性能提升，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有显著改善。

在JavaScript中，还可以延长作用域链，但是JavaScript没有块级作用域。详情可以查看《JavaScript高级程序设计》 --P76

最后再看一道题：

作者：伯乐在线专栏作者 - Kuitos

//比较下面两段代码，试述两段代码的不同之处
// A--------------------------
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();
 
// B---------------------------
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

首先A、B两段代码输出返回的都是 “local scope”。

本文还有一下概念的解释，非常清晰可用。

首先是A：

　　1.进入全局环境上下文，全局环境被压入环境栈，contextStack = [globalContext]

　　2.全局上下文环境初始化,，同时checkscope函数被创建，此时 checkscope.[[Scope]] = globalContext.scopeChain

globalContext={
variable object:[scope, checkscope],
scope chain: variable object // 全局作用域链
}

　　3.执行checkscope函数，进入checkscope函数上下文，checkscope被压入环境栈，contextStack=[checkscopeContext, globalContext]。随后checkscope上下文被初始化,它会复制checkscope函数的[[Scope]]变量构建作用域，即 checkscopeContext={ scopeChain : [checkscope.[[Scope]]] }

　　4.checkscope的活动对象被创建 此时 checkscope.activationObject = [arguments], 随后活动对象被当做变量对象用于初始化，checkscope.variableObject = checkscope.activationObject = [arguments, scope, f]，随后变量对象被压入checkscope作用域链前端，(checckscope.scopeChain = [checkscope.variableObject, checkscope.[[Scope]] ]) == [[arguments, scope, f], globalContext.scopeChain]

　　5.函数f被初始化，f.[[Scope]] = checkscope.scopeChain。

　　6.checkscope执行流继续往下走到 return f()，进入函数f执行上下文。函数f执行上下文被压入环境栈，contextStack = [fContext, checkscopeContext, globalContext]。函数f重复 第4步 动作。最后 f.scopeChain = [f.variableObject,checkscope.scopeChain]

　　7.函数f执行完毕，f的上下文从环境栈中弹出，此时 contextStack = [checkscopeContext, globalContext]。同时返回 scope, 解释器根据f.scopeChain查找变量scope,在checkscope.scopeChain中找到scope(local scope)。

　　8.checkscope函数执行完毕，其上下文从环境栈中弹出，contextStack = [globalContext]

如果你理解了A的执行流程，那么B的流程在细节上一致，唯一的区别在于B的环境栈变化不一样，

　　A: contextStack = [globalContext] —> contextStack = [checkscopeContext, globalContext] —> contextStack = [fContext, checkscopeContext, globalContext] —> contextStack = [checkscopeContext, globalContext] —> contextStack = [globalContext]

　　B: contextStack = [globalContext] —> contextStack = [checkscopeContext, globalContext] —> contextStack = [fContext, globalContext] —> contextStack = [globalContext]

 

也就是说，真要说这两段代码有啥不同，那就是他们执行过程中环境栈的变化不一样，其他的两种方式都一样。

其实对于理解这两段代码而言最根本的一点在于，javascript是使用静态作用域的语言，他的作用域在函数创建的时候便已经确定(不含arguments)。

 

 

 

 

 

 

参考：

http://www.jb51.net/article/29335.htm

《JavaScript高级程序设计》

《你不知道的JavaScript》

弄懂JavaScript的作用域和闭包

http://www.cnblogs.com/dolphinX/p/3280876.html

http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html

http://mp.weixin.qq.com/s/8OcJZADyB5w3EZwkxMdAmw

-20170442补充

实例分析 JavaScript 词法作用域