JavaScript词法作用域与调用对象深入理解


Posted in Javascript onNovember 29, 2012

关于 Javascript 的函数作用域、调用对象和闭包之间的关系很微妙,关于它们的文章已经有很多,但不知道为什么很多新手都难以理解。我就尝试用比较通俗的语言来表达我自己的理解吧。
作用域 Scope
Javascript 中的函数属于词法作用域,也就是说函数在它被定义时的作用域中运行而不是在被执行时的作用域内运行。这是犀牛书上的说法。但"定义时"和"执行(被调用)时"这两个东西有些人搞不清楚。简单来说,一个函数A在"定义时"就是 function A(){} 这个语句执行的时候就是定义这个函数的时候,而A被调用的时候是 A() 这个语句执行的时候。这两个概念一定要分清楚。
那词法作用域(以下称之为"作用域",除非特别指明)到底是什么呢?它是个抽象的概念,说白了它就是一个"范围",scope 在英文里就是范围的意思。一个函数的作用域是它被定义时它所处的"范围",也就是它外层的"范围",这个"范围"包含了外层的变量属性,这个"范围"被设置成这个函数的一个内部状态。一个全局函数被定义的时候,全局(这个函数的外层)的"范围"就被设置成这个全局函数的一个内部状态。一个嵌套函数被定义的时候,被嵌套函数(外层函数)的"范围"就被设置成这个嵌套函数的一个内部状态。这个"内部状态"实际上可以理解成作用域链,见下文。
照以上说法,一个函数的作用域是它被定义的时候所处的"范围",那么 Javascript 里的函数作用域是在函数被定义的时候就确定了,所以它是静态的作用域,词法作用域又称为静态作用域。
调用对象 Call Object
一个函数的调用对象是动态的,它是在这个函数被调用时才被实例化的。我们已经知道,当一个函数被定义的时候,已经确定了它的作用域链。当 Javascript 解释器调用一个函数的时候,它会添加一个新的对象(调用对象)到这个作用域链的前面。这个调用对象的一个属性被初始化成一个名叫 arguments 的属性,它引用了这个函数的 Arguments 对象,Arguments 对象是函数的实际参数。所有用 var 语句声明的本地变量也被定义在这个调用对象里。这个时候,调用对象处在作用域链的头部,本地变量、函数形式参数和 Arguments 对象全部都在这个函数的范围里了。当然,这个时候本地变量、函数形式参数和 Arguments 对象就覆盖了作用域链里同名的属性。
作用域、作用域链和调用对象之间的关系
我的理解是,作用域是是抽象的,而调用对象是实例化的。
在函数被定义的时候,实际上也是它外层函数执行的时候,它确定的作用域链实际上是它外层函数的调用对象链;当函数被调用时,它的作用域链是根据定义的时候确定的作用域链(它外层函数的调用对象链)加上一个实例化的调用对象。所以函数的作用域链实际上是调用对象链。在一个函数被调用的时候,它的作用域链(或者称调用对象链)实际上是它在被定义的时候确定的作用域链的一个超集。
它们之间的关系可以表示成:作用域?作用域链?调用对象。
太绕口了,举例说明吧:

function f(x) { 
var g = function () { return x; } 
return g; 
} 
var g1 = f(1); 
alert(g1()); //输出 1 
假设我们把全局看成类似以下这样的一个大匿名函数: 
(function() { 
//这里是全局范围 
})(); 
那么例子就可以看成是: 
(function() { 
function f(x) { 
var g = function () { return x; } 
return g; 
} 
var g1 = f(1); 
alert(g1()); //输出 1 
})();

全局的大匿名函数被定义的时候,它没有外层,所以它的作用域链是空的。
全局的大匿名函数直接被执行,全局的作用域链里只有一个 '全局调用对象'。
函数 f 被定义,此时函数 f 的作用域链是它外层的作用域链,即 '全局调用对象'。
函数 f(1) 被执行,它的作用域链是新的 f(1) 调用对象加上函数 f 被定义的时候的作用域链,即 'f(1) 调用对象->全局调用对象'。
函数 g (它要被返回给 g1,就命名为 g1吧)在 f(1) 中被定义,它的作用域链是它外层的函数 f(1) 的作用域链,即 'f(1) 调用对象->全局调用对象'。
函数 f(1) 返回函数 g 的定义给 g1。
函数 g1 被执行,它的作用域链是新的 g(1) 调用对象加上外层 f(1) 的作用域链,即 'g1 调用对象->f(1)调用对象->全局调用对象'。
这样看就很清楚了吧。
闭包 Closuer
闭包的一个简单的说法是,当嵌套函数在被嵌套函数之外调用的时候,就形成了闭包。
之前的那个例子其实就是一个闭包。g1 是在 f(1) 内部定义的,却在 f(1) 返回后才被执行。可以看出,闭包的一个效果就是被嵌套函数 f 返回后,它内部的资源不会被释放。在外部调用 g 函数时,g 可以访问 f 的内部变量。根据这个特性,可以写出很多优雅的代码。
例如要在一个页面上作一个统一的计数器,如果用闭包的写法,可以这么写:
var counter = (function() { 
var i = 0; 
var fns = {"get": function() {return i;}, 
"inc": function() {return ++i;}}; 
return fns; 
})(); 
//do something 
counter.inc(); 
//do something else 
counter.inc(); 
var c_value = counter.get(); //now c_value is 2

这样,在内存中就维持了一个变量 i,整个程序中的其它地方都无法直接操作 i 的值,只能通过 counter 的两个操作。
在 setTimeout(fn, delay) 的时候,我们不能给 fn 这个函数句柄传参数,但可以通过闭包的方法把需要的参数绑定到 fn 内部。
for(var i=0,delay=1000; i< 5; i++, delay +=1000) { 
setTimeout(function() { 
console.log('i:' + i + " delay:" + delay); 
}, delay); 
}

这样,打印出来的值都是
i:5 delay:6000
i:5 delay:6000
i:5 delay:6000
i:5 delay:6000
i:5 delay:6000
改用闭包的方式可以很容易绑定要传进去的参数:
for(var i=0, delay=1000; i < 5; i++, delay += 1000) { 
(function(a, _delay) { 
setTimeout(function() { 
console.log('i:'+a+" delay:"+_delay); 
}, _delay); 
})(i, delay); 
}

输出:
i:0 delay:1000
i:1 delay:2000
i:2 delay:3000
i:3 delay:4000
i:4 delay:5000
闭包还有一个很常用的地方,就是在绑定事件的回调函数的时候。也是同样的道理,绑定的函数句柄不能做参数,但可以通过闭包的形式把参数绑定进去。
总结
函数的词法作用域和作用域链是不同的东西,词法作用域是抽象概念,作用域链是实例化的调用对象链。
函数在被定义的时候,同时也是它外层的函数在被执行的时候。
函数在被定义的时候它的词法作用域就已经确定了,但它仍然是抽象的概念,没有也不能被实例化。
函数在被定义的时候还确定了一个东西,就是它外层函数的作用域链,这个是实例化的东西。
函数在被多次调用的时候,它的作用域链都是不同的。
闭包很强大。犀牛书说得对,理解了这些东西,你就可以自称是高级 Javascript 程序员了。因为利用好这些概念,可以玩转 Javascript 的很多设计模式。
Javascript 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
浏览器加载、渲染和解析过程黑箱简析
Nov 29 #Javascript
javascript控制swfObject应用介绍
Nov 29 #Javascript
javascript 保存文件到本地实现方法
Nov 29 #Javascript
jquery连缀语法如何实现
Nov 29 #Javascript
javascript 使td内容不换行不撑开
Nov 29 #Javascript
json原理分析及实例介绍
Nov 29 #Javascript
javascript全局变量封装模块实现代码
Nov 28 #Javascript
You might like
php生成rss类用法实例
2015/04/14 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
php compact 通过变量创建数组
2016/11/15 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
详解Django中的过滤器
2015/07/16 Python
对numpy中shape的深入理解
2018/06/15 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
小学教师自我鉴定
2013/11/07 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
运动会解说词100字
2014/01/31 职场文书
售后服务承诺书范文
2014/03/26 职场文书
安全生产目标责任书
2014/04/14 职场文书
初中学校军训方案
2014/05/09 职场文书
同学聚会通知短信
2015/04/20 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS