JavaScript 中的闭包和作用域链(读书笔记)
要想理解闭包,应当先理解JavaScript的作用域和作用域链。
JavaScript有一个特性被称之为“声明提前(hoisting)”,即JavaScript函数里声明的所有变量(但不涉及赋值)都被“提前”至函数体的顶部,“声明提前”这步操作是在JavaScript引擎的“预编译”时进行的,是在代码开始运行之前,看一下下面的例子:
var name = "YY";
function getName(){
console.log(name); //输出undefine,而不是“YY”
var name = "Crucify";
console.log(name); //输出“Crucify”
}
首先局部变量定义了一个和全局变量相同名字的变量,则在函数体内部局部变量遮盖了同名的全局变量,然后在函数体内部变量name的声明被提前至函数体顶部但并没有赋值,所以此时name是一个只被声明但并没有初始化的变量,我们知道变量只进行声明但并不初始化则它的值为undefine,所以第一行打印时undefine,下一行开始为变量name进行赋值,所以第二行打印的输出是我们所期望的。
当某个函数被调用时,会创建一个执行环境及相应的作用域链。
执行环境(execution context)定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain)。作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。
作用域链本质上是一个指向变量对象的指针列表,它只引用但不实际包含变量对象。当JavaScript需要查找变量x的值的时候(这个过程称作“变量解析”(variable resolution)),他会从列表之中的第一个对象开始查找直到最后一个对象,如果某个对象有一个名为x的属性,则会直接食用这个属性的值。如果作用域链上没有任何一个对象含有属性x,那么就认为这段代码的作用域上不存在x,并最终抛出一个引用错误异常。
所谓的“变量对象的指针列表”很好理解。在JavaScript的最顶层代码中(也就是不包含在任何函数定义内的代码),作用域链是由一个全局对象组成。在不包含嵌套的函数体内,作用域链上有两个对象,第一个是定义函数参数和局部变量的对象,第二个是全局对象。在一个嵌套的函数体内,作用域链上则至少有三个对象,看下面的例子:
var name = "YY";
function getName(){
var name = "Crucify";
function f(){
return name;
}
return f();
}
函数f()的作用域链上有三个对象,第一个是定义函数f()参数和局部变量的对象,第二个是定义函数getName()参数和局部变量的对象,第三个是全局对象。
每个环境都可以向上搜索作用域链,以查询变量和函数名,但任何环境都不能通过向下搜索作用域链而进入另一个执行环境,即函数f()可以向上搜索函数getName()和全局对象中的属性,但是全局对象不能向下搜索getName()和f()中的值。
而创建闭包的常见方式,就是在一个函数内部创建另一个函数。闭包是指有权访问另一个函数作用域中的变量的函数。
一般来讲,当函数执行完毕后,局部活动对象就会被销毁,内存中仅保存全局作用域(全局执行环境的变量对象)。但是,闭包的情况有所不同,因为在另一个函数内部定义的函数会将包含函数(即外部函数)的活动对象添加到它的作用域链中,参考下面的代码:
function createComparisonFunction(propertyName) {
return function(object1, object2){
var value1 = object1[propertyName];
var value2 = object2[propertyName]; if (value1 < value2){
return -1;
} else if (value1 > value2){
return 1;
} else {
return 0;
}
};
}
当下列代码执行时,包含函数与内部匿名函数的作用域链如图所示:
var compare = createComparisonFunction("name");
var result = compare({ name: "Nicholas" }, { name: "Greg" });
当createComparisonFunction()函数在执行完毕后,其活动对象也不会被销毁,因为匿名函数的作用域链仍然在引用这个活动对象。直到匿名函数被销毁后, createComparisonFunction()的活动对象才会被销毁:
compare = null; //解除对匿名函数的引用(以便释放内存)
由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多,所以在绝对必要时再考虑使用闭包。
作用域链的这种配置机制引出了一个值得注意的副作用,即闭包只能取得包含函数中任何变量的最后一个值。因为闭包所保存的是整个变量对象,而不是某个特殊的变量:
function createFunctions(){
var result = new Array();
for (var i=0; i < 10; i++){
result[i] = function(){
return i;
};
}
return result;
}
这个函数会返回一个函数数组,且每个函数都返回 10。
在闭包中使用 this 对象也可能会导致一些问题。我们知道, this 对象是在运行时基于函数的执行环境绑定的,而匿名函数的执行环境具有全局性,因此其 this 对象通常指向 window(在通过 call()或 apply()改变函数执行环境的情况下, this 就会指向其他对象),看下面的例子:
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //"The Window"(在非严格模式下)
把外部作用域中的 this 对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了,如下所示:
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()()); //"My Object"
arguments 也存在同样的问题。如果想访问作用域中的 arguments 对象,必须将对该对象的引用保存到另一个闭包能够访问的变量中。
JavaScript 中的闭包和作用域链(读书笔记)的更多相关文章
- JavaScript中的闭包和作用域链
这部分几乎是JavaScript中最难的部分,也是面试官最爱问的地方. 下面的内容是我以前写的<JavaScript学习手册>中被客户删除的部分,理由听起来有点诡异:太难.
- JavaScript 中的事件类型5(读书笔记思维导图)
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...
- JavaScript 中的事件类型4(读书笔记思维导图)
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...
- JavaScript 中的事件类型3(读书笔记思维导图)
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...
- JavaScript 中的事件类型2(读书笔记思维导图)
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件: UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...
- JavaScript 中的事件类型1(读书笔记思维导图)
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...
- Javascript中闭包的作用域链
作用域定义了在当前上下文中能够被访问到的成员,在Javascript中分为全局作用域和函数作用域,通过函数嵌套可以实现嵌套作用域. 闭包一般发生在嵌套作用域中.闭包是JavaScript最强大的特性之 ...
- Javascript——闭包、作用域链
1.闭包:是指有权访问另一个函数作用域中的变量的函数.创建闭包的常见方式:在一个函数内部创建另一个函数. function f(name){ return function(object){ var ...
- 深入理解javascript中执行环境(作用域)与作用域链
深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...
随机推荐
- Netty IO线程模型学习总结
Netty框架的 主要线程是IO线程.线程模型的好坏直接决定了系统的吞吐量.并发性和安全性. Netty的线程模型遵循了Reactor的基础线程模型.以下我们先一起看下该模型 Reactor线程模型 ...
- c#引用web.config中的ConnectionString
c#引用web.config中的ConnectionString <connectionStrings> <add name="JKXTConnectionString& ...
- Python源码学习十一 一个常用的内存分配函数
void * _PyObject_DebugMallocApi(char id, size_t nbytes) { uchar *p; /* base address of malloc'ed blo ...
- Mac 实用工具
命令行常用工具: Iterm2 也是一个终端命令行工具,支持多工作区,使用清爽 http://www.iterm2.com/documentation.html 给你的命令行 代码上色 Solariz ...
- Windows Azure使用VS 2010的云应用开发过程
原文 Windows Azure使用VS 2010的云应用开发过程 作为技术人员,如果在2010还不知道云计算,那么你已经“OUT”了:作为Visual Studio平台的使用者,如果你不知道VS 2 ...
- 发现CSDN的一个小Bug,CSDN网站管理人员进来看看哈~~
CSDN发博文的时候,说转载和翻译的博文不能被推荐到CSDN首页 刚刚我转了一个好的文章,一开始确实“发布到CSDN博客首页”的选项没了,但是之后我发现这个文章我要做点修改,就点击了编辑 之后这个选项 ...
- 被忽视的TWaver功能(1)
应客户需求写个Demo,Demo中包括一些经常使用的功能.包括解析JSON数据生成TWaver中的网元和连线.网元右下角带上不同标识的小图标,连线须要是二次曲线.弹出菜单和信息板.跟大家分享下.先上图 ...
- String[255]在高版本Delphi里还是被解释成Byte,总体长度256,使用StrPCopy可以给Array String拷贝字符串(内含许多实验测试)
学了好多不了解的知识: procedure TForm1.Button1Click(Sender: TObject); var s1 : String; s2 : String[]; begin s1 ...
- Hadoop 的常用组件一览
Hadoop 集群安装及原理:hdfs命令行操作:Java操作hdfs的常用API接口:动态添加删除数据节点. HBase 集群安装及原理:Hbase命令行操作:Java操作Hbase的常用API接口 ...
- Codeforces Round #249 (Div. 2) A B
C好像就是个模拟.D 是个编码复杂度大的,可是好像也就是枚举三角形,我这会儿准备区域赛,尽量找点思维难度大的,所以昨晚A B 还是去做区域赛题吧..... B 也有点意思 贪心 题意:交换相邻两个位的 ...