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

简介:

本文尝试阐述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

相关文章
|
8天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
18 1
|
8天前
|
存储 JavaScript 前端开发
解释 JavaScript 中的作用域和作用域链的概念。
【4月更文挑战第4天】JavaScript作用域定义了变量和函数的可见范围,静态决定于编码时。每个函数作为对象拥有`scope`属性,关联运行期上下文集合。执行上下文在函数执行时创建,定义执行环境,每次调用函数都会生成独特上下文。作用域链是按层级组织的作用域集合,自内向外查找变量。变量查找遵循从当前执行上下文到全局上下文的顺序,若找不到则抛出异常。
22 6
|
8天前
|
JavaScript
作用域和作用域链(js的问题)
作用域和作用域链(js的问题)
|
8天前
|
自然语言处理 JavaScript 前端开发
深入理解JS的执行上下文、词法作用域和闭包(中)
深入理解JS的执行上下文、词法作用域和闭包(中)
|
8天前
|
存储 自然语言处理 JavaScript
深入理解JS的执行上下文、词法作用域和闭包(上)
深入理解JS的执行上下文、词法作用域和闭包(上)
|
7天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
7天前
|
JavaScript 前端开发
JavaScript 作用域详解:如何影响变量生命周期
JavaScript 作用域详解:如何影响变量生命周期
|
8天前
|
自然语言处理 JavaScript 前端开发
【JavaScript技术专栏】深入理解JavaScript作用域与闭包
【4月更文挑战第30天】了解JavaScript的关键在于掌握作用域和闭包。作用域决定变量和函数的可访问范围,分为全局(在`window`或`global`对象中)和局部(函数内部)。闭包则允许函数访问其创建时的作用域,即使在其他地方调用。它通过作用域链保存对外部变量的引用,常用于实现私有变量、模块化和柯里化。然而,不当使用闭包可能导致内存泄漏和性能下降。理解这些概念能提升代码质量,但也需谨慎处理潜在问题。
|
8天前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域
|
8天前
|
JavaScript 前端开发 安全