详解javascript上下文与作用域

《详解javascript上下文与作用域》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、图文并茂详解Javascript上下文与作用域本文尝试阐述Javascript中的上下文与作用域背后的机制，主要涉及到执行上下文（executioncontext）、作用域链（scopechain）、闭包（closure）、this等概念。Executioncontext执行上下文（简称上下文）决定了Js执行过程中可以获取哪些变量、函数、数据，一段程序可能被分割成许多不同的上下文，每一个上下文都会绑定一个变量对象（variableobject），它就像一个容器，用来存储当前上下文中所有已定义或可获取的变量、函数等。位于最顶端或最外层的上下文称为全局上下文（globalcontext），全局上下

2、文取决于执行环境，如Node中的global和Browser中的window： 需要注意的是，上下文与作用域（scope）是不同的概念。Js本身是单进程的，每当有function被执行时，就会产生一个新的上下文，这一上下文会被压入Js的上下文堆栈（contextstack）中，function执行结束后则被弹出，因此Js解释器总是在栈顶上下文中执行。在生成新的上下文时，首先会绑定该上下文的变量对象，其中包括arguments和该函数中定义的变量；之后会创建属于该上下文的作用域链（scopechain），最后将this赋予这一function所属的Object，这一过程可以通过下图表示：this

3、上文提到this被赋予function所属的Object，具体来说，当function是定义在global对中时，this指向global；当function作为Object的方法时，this指向该Object：1.var x = 1; 2.var f = function(){ 3.  console.log(this.x); 4.} 5.f();  // -> 1 6. 7.var ff = function(){ 8.  this.x = 2; 9.  console.log(this.x); 10.} 11.ff(); // -> 2 12.x     // -> 2 13. 14.v

4、ar o = {x: "o's x", f: f}; 15.o.f(); // "o's x" 上文提到，在function被执行时生成新的上下文时会先绑定当前上下文的变量对象，再创建作用域链。我们知道function的定义是可以嵌套在其他function所创建的上下文中，也可以并列地定义在同一个上下文中（如global）。作用域链实际上就是自下而上地将所有嵌套定义的上下文所绑定的变量对象串接到一起，使嵌套的function可以“继承”上层上下文的变量，而并列的function之间互不干扰：1.var x = 'global'; 2.function a(){ 3.  var x = "a's

5、 x"; 4.  function b(){ 5.    var y = "b's y"; 6.    console.log(x); 7.  }; 8.  b(); 9.} 10.function c(){ 11.  var x = "c's x"; 12.  function d(){ 13.    console.log(y); 14.  }; 15.  d(); 16.} 17.a();  // -> "a's x" 18.c();  // -> ReferenceError: y is not defined 19.x     // -> "global" 20.y     // -

6、> ReferenceError: y is not defined Closure如果理解了上文中提到的上下文与作用域链的机制，再来看闭包的概念就很清楚了。每个function在调用时会创建新的上下文及作用域链，而作用域链就是将外层（上层）上下文所绑定的变量对象逐一串连起来，使当前function可以获取外层上下文的变量、数据等。如果我们在function中定义新的function，同时将内层function作为值返回，那么内层function所包含的作用域链将会一起返回，即使内层function在其他上下文中执行，其内部的作用域链仍然保持着原有的数据，而当前的上下文可能无法获取原先外层fu

7、nction中的数据，使得function内部的作用域链被保护起来，从而形成“闭包”。看下面的例子：1.var x = 100; 2.var inc = function(){ 3.  var x = 0; 4.  return function(){ 5.    console.log(x++); 6.  }; 7.}; 8. 9.var inc1 = inc(); 10.var inc2 =