图文详解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 相关文章推荐
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
详解VueJS应用中管理用户权限
Feb 02 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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常用正则表达式集锦
2014/08/17 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
python使用socket进行简单网络连接的方法
2015/04/29 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
python如何求100以内的素数
2020/05/27 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
理工大学毕业生自荐信范文
2014/02/22 职场文书
软件项目实施计划书
2014/05/02 职场文书
英语求职信范文
2014/05/23 职场文书
幼儿发展评估方案
2014/06/11 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
观看建国大业观后感
2015/06/01 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
python 实现体质指数BMI计算
2021/05/26 Python
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Python re.sub 反向引用的实现
2021/07/07 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫