图文详解Javascript中的上下文和作用域


Posted in Javascript onFebruary 15, 2017

执行上下文(Execution context)

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

图文详解Javascript中的上下文和作用域

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

图文详解Javascript中的上下文和作用域

this

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

var x = 1; 
var f = function(){ 
 console.log(this.x);
}
f(); // -> 1

var ff = function(){ 
 this.x = 2;
 console.log(this.x);
}
ff(); // -> 2 
x  // -> 2

var o = {x: "o's x", f: f}; 
o.f(); // "o's x"

Scope chain

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

图文详解Javascript中的上下文和作用域

var x = 'global'; 
function a(){ 
 var x = "a's x";
 function b(){
 var y = "b's y";
 console.log(x);
 };
 b();
}
function c(){ 
 var x = "c's x";
 function d(){
 console.log(y);
 };
 d();
}
a(); // -> "a's x" 
c(); // -> ReferenceError: y is not defined 
x  // -> "global" 
y  // -> ReferenceError: y is not defined

Closure

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

看下面的例子:

var x = 100; 
var inc = function(){ 
 var x = 0;
 return function(){
 console.log(x++);
 };
};

var inc1 = inc(); 
var inc2 = inc();

inc1(); // -> 0 
inc1(); // -> 1 
inc2(); // -> 0 
inc1(); // -> 2 
inc2(); // -> 1 
x;  // -> 100

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

图文详解Javascript中的上下文和作用域

this in closure

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

var name = "global"; 
var o = { 
 name: "o",
 getName: function(){
 return this.name
 }
};
o.getName(); // -> "o"

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

var name = "global"; 
var oo = { 
 name: "oo",
 getNameFunc: function(){
 return function(){
  return this.name;
 };
 }
}
oo.getNameFunc()(); // -> "global"

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

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

换一个更明显的例子:

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

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

var name = "global"; 
var oooo = { 
 name: "ox4",
 getNameFunc: function(){
 var self = this;
 return function(){
  return self.name;
 };
 }
};
oooo.getNameFunc()(); // -> "ox4"

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

var name = "global"; 
var oo = { 
 name: "oo",
 getNameFunc: function(){
 return function(){
  return this.name;
 };
 }
}
oo.getNameFunc()(); // -> "global" 
oo.getNameFunc().bind(oo)(); // -> "oo"

总结

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

Javascript 相关文章推荐
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
js实现省份下拉菜单效果
Feb 15 #Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 #Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 #Javascript
基于canvas的二维码邀请函生成插件
Feb 14 #Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 #Javascript
javascript深拷贝和浅拷贝详解
Feb 14 #Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 #Javascript
You might like
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
python图片验证码生成代码
2016/07/02 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python下载微信公众号相关文章
2019/02/26 Python
学习python分支结构
2019/05/17 Python
Python sorted排序方法如何实现
2020/03/31 Python
详解python对象之间的交互
2020/09/29 Python
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
生日主持词
2014/03/20 职场文书
部门年终奖分配方案
2014/05/07 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
车间主任岗位职责
2015/02/03 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP