图文并茂详解Javascript上下文与作用域

  1. 云栖社区>
  2. 博客>
  3. 正文

图文并茂详解Javascript上下文与作用域

行者武松 2017-08-01 13:20:00 浏览958
展开阅读全文

本文尝试阐述Javascript中的上下文与作用域背后的机制,主要涉及到执行上下文(execution context)、作用域链(scope chain)、闭包(closure)、this等概念。

Execution context

执行上下文(简称上下文)决定了Js执行过程中可以获取哪些变量、函数、数据,一段程序可能被分割成许多不同的上下文,每一个上下文都会绑定一个变 量对象(variable object),它就像一个容器,用来存储当前上下文中所有已定义或可获取的变量、函数等。位于最顶端或最外层的上下文称为全局上下文(global context),全局上下文取决于执行环境,如Node中的global和Browser中的window

需要注意的是,上下文与作用域(scope)是不同的概念。Js本身是单进程的,每当有function被执行时,就会产生一个新的上下文,这一上 下文会被压入Js的上下文堆栈(context stack)中,function执行结束后则被弹出,因此Js解释器总是在栈顶上下文中执行。在生成新的上下文时,首先会绑定该上下文的变量对象,其中 包括arguments和该函数中定义的变量;之后会创建属于该上下文的作用域链(scope chain),最后将this赋予这一function所属的Object,这一过程可以通过下图表示:

js context stack

this

上文提到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. f();  // -> 1 
  5.  
  6. var ff = function(){ 
  7.   this.x = 2
  8.   console.log(this.x); 
  9. ff(); // -> 2 
  10. x     // -> 2 
  11.  
  12. var o = {x: "o's x", f: f}; 
  13. o.f(); // "o's x" 

上文提到,在function被执行时生成新的上下文时会先绑定当前上下文的变量对象,再创建作用域链。我们知道function的定义是可以嵌套 在其他function所创建的上下文中,也可以并列地定义在同一个上下文中(如global)。作用域链实际上就是自下而上地将所有嵌套定义的上下文所 绑定的变量对象串接到一起,使嵌套的function可以“继承”上层上下文的变量,而并列的function之间互不干扰:

js scope chain


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

Closure

如果理解了上文中提到的上下文与作用域链的机制,再来看闭包的概念就很清楚了。每个function在调用时会创建新的上下文及作用域链,而作用域 链就是将外层(上层)上下文所绑定的变量对象逐一串连起来,使当前function可以获取外层上下文的变量、数据等。如果我们在function中定义 新的function,同时将内层function作为值返回,那么内层function所包含的作用域链将会一起返回,即使内层function在其他 上下文中执行,其内部的作用域链仍然保持着原有的数据,而当前的上下文可能无法获取原先外层function中的数据,使得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 = inc(); 
  11.  
  12. inc1();  // -> 0 
  13. inc1();  // -> 1 
  14. inc2();  // -> 0 
  15. inc1();  // -> 2 
  16. inc2();  // -> 1 
  17. x;       // -> 100 

执行过程如下图所示,inc内部返回的匿名function在创建时生成的作用域链包括了inc中的x,即使后来赋值给inc1inc2之后,直接在global context下调用,它们的作用域链仍然是由定义中所处的上下文环境决定,而且由于x是在function inc中定义的,无法被外层的global context所改变,从而实现了闭包的效果:

js closure

this in closure

我们已经反复提到执行上下文和作用域实际上是通过function创建、分割的,而function中的this与作用域链不同,它是由**执行该function时**当前所处的Object环境所决定的,这也是this最容易被混淆用错的一点。一般情况下的例子如下:


  1. var name = "global"
  2. var o = { 
  3.   name: "o"
  4.   getName: function(){ 
  5.     return this.name 
  6.   } 
  7. }; 
  8. o.getName();  // -> "o" 

由于执行o.getName()getName所绑定的this是调用它的o,所以此时this == o;更容易搞混的是在closure条件下:


  1. var name = "global"
  2. var oo = { 
  3.   name: "oo"
  4.   getNameFunc: function(){ 
  5.     return function(){ 
  6.       return this.name; 
  7.     }; 
  8.   } 
  9. oo.getNameFunc()();  // -> "global" 

此时闭包函数被return后调用相当于:


  1. getName = oo.getNameFunc(); 
  2. getName();  // -> "global" 

换一个更明显的例子:


  1. var ooo = { 
  2.   name: "ooo"
  3.   getName: oo.getNameFunc() // 此时闭包函数的this被绑定到新的Object 
  4. }; 
  5. ooo.getName();  // -> "ooo" 

当然,有时候为了避免闭包中的this在执行时被替换,可以采取下面的方法:


  1. var name = "global"
  2. var oooo = { 
  3.   name: "ox4"
  4.   getNameFunc: function(){ 
  5.     var self = this
  6.     return function(){ 
  7.        return self.name; 
  8.     }; 
  9.   } 
  10. }; 
  11. oooo.getNameFunc()(); // -> "ox4" 

或者是在调用时强行定义执行的Object:


  1. var name = "global"
  2. var oo = { 
  3.   name: "oo"
  4.   getNameFunc: function(){ 
  5.     return function(){ 
  6.       return this.name; 
  7.     }; 
  8.   } 
  9. oo.getNameFunc()();  // -> "global" 
  10. oo.getNameFunc().bind(oo)(); // -> "oo" 

总结

Js是一门很有趣的语言,由于它的很多特性是针对HTML中DOM的操作,因而显得随意而略失严谨,但随着前端的不断繁荣发展和Node的兴 起,Js已经不再是“toy language”或是jQuery时代的“CSS扩展”,本文提到的这些概念无论是对新手还是从传统Web开发中过度过来的Js开发人员来说,都很容易 被混淆或误解,希望本文可以有所帮助。

写这篇总结的原因是我在Github上分享的Learn javascript in one picture,刚开始有人质疑这只能算是一张语法表(syntax cheat sheet),根本不会涉及更深层的闭包、作用域等内容,但是出乎意料的是这个项目竟然获得3000多个star,所以不能虎头蛇尾,以上。


来源:51CTO

网友评论

登录后评论
0/500
评论
行者武松
+ 关注