图文并茂详解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，这一过程可以通过下图表示：

this

上文提到this被赋予function所属的Object，具体来说，当function是定义在global对中时，this指向global；当function作为Object的方法时，this指向该Object：

 
 
    
  
  
  1. var x = 1;
    2. 
  
  
  2. var f = function(){
    3. 
  
  
  3.   console.log(this.x);
    4. 
  
  
  4. }
    5. 
  
  
  5. f();  // -> 1
    6. 
  
  
  6. 
  
  
  7. var ff = function(){
    8. 
  
  
  8.   this.x = 2;
    9. 
  
  
  9.   console.log(this.x);
    10. 
  
  
  10. }
    11. 
  
  
  11. ff(); // -> 2
    12. 
  
  
  12. x     // -> 2
    13. 
  
  
  13. 
  
  
  14. var o = {x: "o's x", f: f};
    15. 
  
  
  15. o.f(); // "o's x"
    16.

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

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

Closure

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

 
 
    
  
  
  1. var x = 100;
    2. 
  
  
  2. var inc = function(){
    3. 
  
  
  3.   var x = 0;
    4. 
  
  
  4.   return function(){
    5. 
  
  
  5.     console.log(x++);
    6. 
  
  
  6.   };
    7. 
  
  
  7. };
    8. 
  
  
  8. 
  
  
  9. var inc1 = inc();
    10. 
  
  
  10. var inc2 = inc();
    11. 
  
  
  11. 
  
  
  12. inc1();  // -> 0
    13. 
  
  
  13. inc1();  // -> 1
    14. 
  
  
  14. inc2();  // -> 0
    15. 
  
  
  15. inc1();  // -> 2
    16. 
  
  
  16. inc2();  // -> 1
    17. 
  
  
  17. x;       // -> 100
    18.

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

this in closure

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

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

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

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

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

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

换一个更明显的例子：

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

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

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

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

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

总结

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

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

分享题目：图文并茂详解Javascript上下文与作用域
本文地址：http://www.shufengxianlan.com/qtweb/news3/11203.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

微信小程序知识

同城分类信息

成都宣传海报　　 　成都IDC机房托管　　 　名片　　 　新都四新网站建设　　 　微信小程序　　 　成都网站建设公司　　 　重庆app软件开发　　 　外贸网站建设　　 　乐山网站建设　　 　成都网站设计公司　　 　宣传册设计　　 　全网营销推广　　 　内江智速网站建设　　 　seo优化　　 　奢侈品网站建设方案　　 　成都做网站　　 　崇州搬家公司　　 　雪茄烟　　 　艾瑞格衣柜　　 　蓬安网站建设