码迷,mamicode.com
首页 > 编程语言 > 详细

(好文推荐)一篇文章看懂JavaScript作用域链

时间:2014-06-02 13:14:44      阅读:386      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

闭包和作用域链是JavaScript中比较重要的概念,首先,看看几段简单的代码。

代码1:

bubuko.com,布布扣
 1 var name = "stephenchan";
 2   var age = 23;
 3   function myFunc() {
 4       alert(name);
 5       var name = "endlesscode";
 6       alert(name);
 7       alert(age);
 8       alert(weight);
 9   }
10  myFunc();
11  myFunc();
bubuko.com,布布扣

 

上述代码1中,两次调用myFunc()的输出是一致的。可能你会认为输出是:

bubuko.com,布布扣
 stephenchan
 endlesscode
 23
 [Reference Error]
bubuko.com,布布扣

 

但是结果却是:

bubuko.com,布布扣
 代码1输出:
 undefined
 endlesscode
 23
 [Reference Error]
bubuko.com,布布扣

 

代码2:

bubuko.com,布布扣
 1  var i = 10;
 2   function myFunc() {
 3       var i = 20;
 4       function innerFunc() {
 5           alert(i);
 6       }
 7       return innerFunc;
 8   }
 9   var func = myFunc();
10  func();
bubuko.com,布布扣

 

上面的代码2会输出20,但为什么不输出10或者是输出undefined?

代码3:

bubuko.com,布布扣
 1  var name = "stephenchan";
 2   function callMePlz() {
 3       alert(name);
 4   }
 5   
 6   function myFunc() {
 7       var name = "endlesscode";
 8       callMePlz();
 9   }
10  
11  myFunc();
bubuko.com,布布扣

 

上面的代码3输出的会是endlesscode、stephenchan还是undefined?

bubuko.com,布布扣
 代码3输出:
 stephenchan
bubuko.com,布布扣

代码4:

bubuko.com,布布扣
 1 function callMePlz() {
 2       var name = "stephenchan";
 3       var intro = function() {
 4           alert("I am " + name);
 5       }
 6       return intro;
 7   }
 8   
 9   function showMe(arg) {
10      var name = arg;
11      var func = callMePlz();
12      func();
13  }
14  showMe("endlesscode");
bubuko.com,布布扣

 

上面的代码4与代码3不同的是,从callMePlz返回的函数引用,然后再执行函数。

bubuko.com,布布扣
 代码4输出:
 I am stephenchan
bubuko.com,布布扣

 

代码5:

bubuko.com,布布扣
 1 var name = "stephenchan";
 2   function callMePlz() {
 3       var intro = function() {
 4           alert("I am " + name);
 5       }
 6       return intro;
 7   }
 8   
 9   function showMe(arg) {
10      var name = arg;
11      var func = callMePlz();
12      func();
13  }
14  showMe("endlesscode");
bubuko.com,布布扣

 

上面的代码5与代码4不同的是原来在callMePlz函数中的变量name在全局环境中声明了,但输出的结果是:

bubuko.com,布布扣
 代码5输出:
 I am stephenchan
bubuko.com,布布扣

  

先不对上面的代码进行说明,讲述一下闭包和作用域链的概念。

闭包(closure)是什么?闭包与函数有着紧密的关系。“在JavaScript中,一个函数只是一段静态的代码、脚本文件,因此函数是一个代码书写时,以及编译期的、静态的概念;而闭包是函数的代码在运行过程中的一个动态环境,是一个运行期的、动态的概念”。这是《JavaScript语言精髓和编程实践》中对函数和闭包的描述,实际上我们常说的闭包倒是可以表现为如上面代码2中的innerFunc一样,在myFunc的函数执行后返回的是一个在其内部定义的、外部可调用的函数引用,这个函数语言的特性在C和C++是没有的。为什么在myFunc结束之后innerFunc还能正常访问到myFunc里面的数据呢?这就涉及到函数执行环境与闭包的相关概念,闭包中所保留着函数运行的实例,环境以及作用域链等等,并在myFunc调用之后没有将函数实例直接丢弃,因此在调用innerFunc的时候能够引用到myFunc中声明的i。

作用域链(scope chain)是什么?顾名思义,就是由作用域组成的链,是一个类似链状的数据结构。作用域就是对上下文环境的数据描述。闭包和作用域链是紧密关系的,函数实例执行时的闭包是构成作用域链的基本元素。JavaScript代码在执行前会进行语法分析,在语法分析阶段,会记录全局环境中的变量声明和函数定义,构造函数的调用对象(Call Oject、Activation Object、Activate Object、活动对象,不同称呼罢了)和在全局环境下的作用域链。

 

bubuko.com,布布扣
图1

 

图1是《JavaScript语言精髓和编程实践》一书中对闭包相关元素的内部数据结构的描述。我们主要关注其中的ScriptObject,ScriptObject是对调用对象的一种描述。ScriptObject在语法分析阶段就已经构造好了,其中的varDecls是保存着函数中的变量声明,funcDecls保存着内部的函数声明。

在语法分析阶段,varDecls保存在函数中用var进行显示声明的局部变量,并且置默认值为undefined,这里就是在代码1中"alert(name)"输出为undefined的原因,由于myFunc在语法分析阶段就已经保留了标记符name在varDecls,在赋值语句"var name=‘endlesscode‘"执行之前name的值都是undefined,因此在"alert(name)"的时候就显示为undefined了。

而函数定义在语法分析阶段工作就稍微有点不同。在语法分析阶段,发现有函数定义的时候,除了记录函数的声明外,还会创建一个函数对象,并将当前的作用域链赋值给此函数对象的[[scope]]属性(这个属性是JavaScript引擎内部维护的,但是Firefox却是可以通过私有属性__parent__来访问它),这里要注意的是在语法分析阶段将作用域链赋值给[[scope]]属性,而不是在执行阶段。如果是在全局环境下,但当前的作用域链为只有一个元素,就是全局的调用对象(Windows Object, Global Object,不同称呼罢了)。这就是为什么在《JavaScript权威指南》中提到“JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里。”

 

下面以一段代码的大概处理流程来进行说明:

bubuko.com,布布扣
1 var outerVar1 = "var in global code";
2  function outerFunc(arg1, arg2) {
3      var innerVar1 = "var in function code";
4      function innerFunc() { return outerVar1 + "-" + innerVar1 + "-" + (arg1 + arg2); }
5      return innerFunc();
6  }
7  var outerVar2 = outerFunc(10, 20);
bubuko.com,布布扣

执行处理过程大致如下:(精华1)

  1. 引擎启动,初始化Global Object,即window对象,全局的调用对象,建立作用域链,假设为scope_1,作用域链中只包含全局的上下文环境,即Global Object。
  2. 语法分析阶段,扫描JavaScript代码,获取代码中变量和函数定义,其扫描过程如下:全局环境下语法分析结束,执行outerVar1赋值语句,赋值为"var in global code"。
    1. 发现变量outerVar1,在Global Object的varDecls中添加outerVar1属性,值为undefined。
    2. 发现函数outerFunc的定义,在Global Object的funcDecls中添加outerFunc,并创建函数对象(这里应该创建的是函数的原型对象),将scope_1传递给outerFunc的函数对象,即outerFunc内部的[[scope]]属性。另外注意,创建过程并不会对函数体中的JavaScript代码做特殊处理,可以理解为只是将函数JavaScript代码保存中函数对象的内部属性上,在函数执行时再做进一步处理。也就是说,这一步大概处理的就是记录函数定义,赋值[[scope]]属性记录当前定义的作用域,而没有进一步对outerFunc里面的代码进行进一步的语法分析。
    3. 发现变量outerVar2,在Global Object中的varDecls中添加属性,值为undefined。
  3. 全局环境下语法分析结束,执行outerVar1赋值语句,赋值为"var in global code"。
  4. 执行outerFunc,获取返回值。将outerFunc的返回结果赋值给outerVar2。
    1. 创建调用对象,假设为act_obj_1。同时将act_obj_1链接起outerFunc的[[scope]]属性,构成一个新的作用域链,假设为scope_2,scope_2中的第一个对象为act_obj_1,act_obj_1指向scope_1。
    2. 处理参数列表,在act_obj_1中设置属性arg1、arg2,值分别为10和20。创建arguments对象并进行设置,将arguments设置为act_obj_1的属性。
    3. 对outerFunc函数体进行语法分析,注意这里在全局语法分析的时候并没有对outerFunc函数体进行语法分析:
      1. 发现变量innerVar1,在act_obj_1中的varDecls添加innerVar1属性,值为undefined。
      2. < 发现函数innerFunc的定义,使用这个定义创建函数对象,并将scope_2传递给innerFunc,作为innerFunc的[[scope]]属性,在act_obj_1的funcDecls添加innerFunc。
    4. outerFunc函数语法分析结束,执行innerVar1赋值语句,赋值为"var in function code"。
    5. 执行innerFunc,执行函数的处理流程是一致的:
      1. 创建调用对象,假设为act_obj_2;同时将avt_obj_2链接起innerFunc[[scope]]属性,构成一个新的作用域链,假设为scope_3,scope_3中的第一个对象为act_obj_2,act_obj_2指向scope_2。
      2. 处理参数列表,因为innerFunc没有参数,所以只需要创建arguments对象并设置为act_obj_2的属性。
      3. 对innerFunc进行语法分析,识别变量和函数,但没有发现变量定义和函数声明。
      4. 执行innerFunc函数。对任何一个变量引用,从scope_3开始进行链式搜索,以scope_3->scope_2->scope_1的顺序进行搜索,结果发现outerVar1在scope_1中的Global Object发现;innerVar1、arg1、arg2在scope_2中的act_obj_1中找到。
      5. 检查scope_3和act_obj_2的引用,发现没有其他引用,则丢弃,让引擎进行垃圾回收。
      6. 返回innerFunc执行的值。
    6. 检查没有对act_obj_1和scope_2的引用,则丢弃act_obj_1和scope_2。
    7. 返回结果。
  5. 将outerFunc的返回结果赋值给outerVar2。

我们再拿前面代码4的例子对作用域链进行简单的分析:(精华2)
代码4:

bubuko.com,布布扣
 1  function callMePlz() {
 2       var name = "stephenchan";
 3       var intro = function() {
 4           alert("I am " + name);
 5       }
 6       return intro;
 7   }
 8   
 9   function showMe(arg) {
10      var name = arg;
11      var func = callMePlz();
12      func();
13  }
14  showMe("endlesscode");
bubuko.com,布布扣

 

 假如全局的语法分析已经结束,已经开始执行"showMe(‘endlesscode‘)"了。在进入执行showMe的执行上下文时,我们可以看到"showMe"函数中[[scope]]属性记录中的作用域链为:

bubuko.com,布布扣
1 [[scope]] = [
2     {//Global Object,因为在全局没有var声明的变量,因此就没有列出来
3     document : ...,
4     location : ...
5     }
6 ]
bubuko.com,布布扣

创建showMe的调用对象后,则新的作用域链为showMe的调用对象和全局调用对象组成:

bubuko.com,布布扣
 1 [scope chain] = [
 2     {//showme_activation_obj
 3         name : undefined,
 4         func : undefined,
 5         arg : "endlesscode",
 6         arguments : ...
 7      },
 8     {//Global Object,因为在全局没有var声明的变量,因此就没有列出来
 9     document : ...,
10     location : ...
11     }
12 ]
bubuko.com,布布扣

也就是"showMe调用对象->Global调用对象"这样的链式关系。接着,忽略showMe函数中语法分析等过程,到执行callMePlz()函数时,callMePlz函数的[[scope]]属性为

bubuko.com,布布扣
1 [[scope]] = [
2     {//Global Object,因为在全局没有var声明的变量,因此就没有列出来
3     document : ...,
4     location : ...
5     }
6 ]
bubuko.com,布布扣

 

callMePlz函数的[[scope]]属性指示的作用域链也只包括了全局调用对象,因为callMePlz也是在全局环境下定义的。创建callMePlz的调用对象后,则新的作用域链为callMePlz的调用对象和全局调用对象组成:

bubuko.com,布布扣
 1 [scope chain] = [
 2     {//callmeplz_activation_obj
 3         name : undefined,
 4         intro : undefined,
 5         arguments : ...
 6      },
 7     {//Global Object,因为在全局没有var声明的变量,因此就没有列出来
 8     document : ...,
 9     location : ...
10     }
11 ]
bubuko.com,布布扣

也就是"callMePlz调用对象->Global调用对象"这样的链式关系。可以看到,在callMePlz的作用域链中,并没有包括showMe的调用对象。当callMePlz进行语法分析的时候,找到intro函数时,将intro函数的[[scope]]属性赋值为(上例分析中第2条中的第2条)

bubuko.com,布布扣
 1 [scope chain] = [
 2     {//callmeplz_activation_obj
 3         name : undefined,   //这里还是undefined,当语法分析结束,执行callMePlz时,这里就赋值为"stephenchan"
 4         intro : undefined,
 5         arguments : ...
 6      },
 7     {//Global Object,因为在全局没有var声明的变量,因此就没有列出来
 8     document : ...,
 9     location : ...
10     }
11 ]
bubuko.com,布布扣

callMePlz返回的是intro函数对象的引用,当在showMe函数中执行intro函数时,创建intro函数的调用对象,此时intro函数的作用域链为:

bubuko.com,布布扣
 1 [scope chain] = [
 2     {//intro_activation_obj
 3         arguments : ...
 4      },
 5     {//callmeplz_activation_obj
 6         name : undefined,   //这里还是undefined,当语法分析结束,执行callMePlz时,这里就赋值为"stephenchan"
 7         intro : undefined,
 8         arguments : ...
 9      },
10     {//Global Object,因为在全局没有var声明的变量,因此就没有列出来
11     document : ...,
12     location : ...
13 
    }
14 ]
bubuko.com,布布扣

由于在intro函数中没有声明变量和函数,所以看到的也只是一些内置的属性成员,此时intro函数的作用域链则为:"intro调用对象->callMePlz调用对象->Global调用对象",因此,当执行intro函数时,则以"intro调用对象->callMePlz调用对象->Global调用对象"的顺序去搜索"name"变量,发现在callMePlz调用对象上找到了,因此在代码4中输出的是"I am stephenchan"而不是"I am endlesscode"。

以上面的分析方法来分析上述的其他代码,就容易理解其输出了。

 

 

另外,函数闭包内的标识符系统有优先顺序,其优先级从高到低为:this > 局部变量(varDecls) > 函数形式参数名(argsName) > arguments关键字 > 函数名(funcNames)。

bubuko.com,布布扣
 1 //输出‘hi‘,说明argsName > funcNames。
 2 function foo(foo) {
 3     alert(foo);
 4 }
 5 foo(‘hi‘);
 6 
 7 //输出100的类型"number",说明argsName > arguments。
 8 function foo2(arguments) {
 9     alert(typeof arguments);
10 }
11 foo2(100);
12 
13 //输出arguments的类型为‘object‘,说明arguments > funcNames。
14 function arguments() {
15     alert(typeof arguments);
16 }
17 arguments();
18 
19 //输出‘test‘,形式参数名与未赋值局部变量重复时,取形式参数值。
20 function foo3(str) {
21     var str;
22     alert(str);
23 }
24 foo3(‘test‘);
25 
26 //输出‘member‘,形式参数与有值的局部变量重复时,取局部变量。
27 function foo4(str) {
28     var str = ‘member‘;
29     alert(str);
30 }
31 foo4(‘test‘);
bubuko.com,布布扣

原文链接:http://blog.endlesscode.com/2010/01/20/javascript-closure-scope-chain/

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

(好文推荐)一篇文章看懂JavaScript作用域链,布布扣,bubuko.com

(好文推荐)一篇文章看懂JavaScript作用域链

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/ttcc/p/3764129.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!