浅识闭包
作用域
作用域是一个变量和函数的作用范围,javascript中函数内声明的所有变量在函数体内始终是可见的,在javascript中有全局作用域和局部作用域,但是没有块级作用域,局部变量的优先级高于全局变量,通过几个示例来了解下javascript中作用域的那些“潜规则”(这些也是在前端面试中经常问到的问题)。
一、变量声明提前
var scope="global";
function scopeTest() {
console.log(scope);
var scope="local";
}
scopeTest(); //undefined
此处的输出是undefined,并没有报错,这是因为在前面我们提到的函数内的声明在函数体内始终可见,上面的函数等效于:
var scope="global";
function scopeTest() {
var scope;
console.log(scope);
scope="local";
}
scopeTest(); //undefined
注意,如果忘记var,那么变量就被声明为全局变量了。
二、没有块级作用域####
和其他我们常用的语言不同,在Javascript中没有块级作用域:
function scopeTest() {
var scope = {};
if (scope instanceof Object) {
var j = 1;
for (var i = 0; i < 10; i++) {
//console.log(i);
}
console.log(i); //输出10
}
console.log(j);//输出1
}
在javascript中变量的作用范围是函数级的,即在函数中所有的变量在整个函数中都有定义,这也带来了一些我们稍不注意就会碰到的“潜规则”:
var scope = "hello";
function scopeTest() {
console.log(scope);//①
var scope = "no";
console.log(scope);//②
}
在①处输出的值竟然是undefined,简直丧心病狂啊,我们已经定义了全局变量的值啊,这地方不应该为hello吗?其实,上面的代码等效于:
var scope = "hello";
function scopeTest() {
var scope;
console.log(scope);//①
scope = "no";
console.log(scope);//②
}
声明提前、全局变量优先级低于局部变量,根据这两条规则就不难理解为什么输出undefined了。
什么是闭包
闭包是允许函数访问局部作用域之外的数据。即使外部函数已经退出,外部函数的变量仍可以被内部函数访问到。
因此闭包的实现需要三个条件:
内部函数实用了外部函数的变量
外部函数已经退出
内部函数可以访问
function a(){
var x = 0;
return function(y){
x = x + y;
return x;
}
}
var b = a();
b(1);
上述代码在执行的时候,b得到的是闭包对象的引用,虽然a执行完毕后,但是a的活动对象由于闭包的存在并没有被销毁,在执行b(1)的时候,仍然访问到了x变量,并将其加1,若在此执行b(1),则x是2,因为闭包的引用b并没有消除。
一个经典的闭包的实例
//ul下面有3个li,实现点击每个li,弹出li的序号
for(var i = 0,len = lis.length;i < len; i++){
lis[i].onclick = function(i){
return function(){
alert(i);
}
}(i);
}
在这里,没有把闭包直接给onclick事件,而是先定义了一个自执行函数,该函数中包含着闭包的函数,i的值被保存在自执行的函数中,当闭包函数执行后,会从自执行函数中查找i,达到“保存”变量的目的。
注:匿名函数中的this指向的是window,故在匿名闭包函数使用父函数的this指针时,需要将其存储下来,如 var that = this;
闭包中的变量
在使用闭包时,由于作用域链机制的影响,闭包只能取得内部函数的最后一个值,这引起的一个副作用就是如果内部函数在一个循环中,那么变量的值始终为最后一个值。
//该实例不太合理,有一定延迟因素,此处主要为了说明闭包循环中存在的问题
function timeManage() {
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
},1000)
};
}
上面的程序并没有按照我们预期的输入1-5的数字,而是5次全部输出了5。再来看一个示例:
function createClosure(){
var result = [];
for (var i = 0; i < 5; i++) {
result[i] = function(){
return i;
}
}
return result;
}
调用createClosure()0返回的是5,createClosure()4返回值仍然是5。通过以上两个例子可以看出闭包在带有循环的内部函数使用时存在的问题:因为每个函数的作用域链中都保存着对外部函数(timeManage、createClosure)的活跃对象,因此,他们都引用着同一变量i,当外部函数返回时,此时的i值为5,所以内部的每个函数i的值也为5。
那么如何解决这个问题呢?我们可以通过匿名包裹器(匿名自执行函数表达式)来强制返回预期的结果:
function timeManage() {
for (var i = 0; i < 5; i++) {
(function(num) {
setTimeout(function() {
console.log(num);
}, 1000);
})(i);
}
}
或者在闭包匿名函数中再返回一个匿名函数赋值:
function timeManage() {
for (var i = 0; i < 10; i++) {
setTimeout((function(e) {
return function() {
console.log(e);
}
})(i), 1000)
}
}
//timeManager();输出1,2,3,4,5
function createClosure() {
var result = [];
for (var i = 0; i < 5; i++) {
result[i] = function(num) {
return function() {
console.log(num);
}
}(i);
}
return result;
}
//createClosure()[1]()输出1;createClosure()[2]()输出2
无论是匿名包裹器还是通过嵌套匿名函数的方式,原理上都是由于函数是按值传递,因此会将变量i的值复制给实参num,在匿名函数的内部又创建了一个用于返回num的匿名函数,这样每个函数都有了一个num的副本,互不影响了。
闭包中的this
在闭包中使用this时要特别注意,稍微不慎可能会引起问题。通常我们理解this对象是运行时基于函数绑定的,全局函数中this对象就是window对象,而当函数作为对象中的一个方法调用时,this等于这个对象(TODO 关于this做一次整理)。由于匿名函数的作用域是全局性的,因此闭包的this通常指向全局对象window:
var scope = "global";
var object = {
scope:"local",
getScope:function(){
return function(){
return this.scope;
}
}
}
调用object.getScope()()返回值为global而不是我们预期的local,前面我们说过闭包中内部匿名函数会携带外部函数的作用域,那为什么没有取得外部函数的this呢?每个函数在被调用时,都会自动创建this和arguments,内部匿名函数在查找时,搜索到活跃对象中存在我们想要的变量,因此停止向外部函数中的查找,也就永远不可能直接访问外部函数中的变量了。总之,在闭包中函数作为某个对象的方法调用时,要特别注意,该方法内部匿名函数的this指向的是全局变量。
幸运的是我们可以很简单的解决这个问题,只需要把外部函数作用域的this存放到一个闭包能访问的变量里面即可:
var scope = "global";
var object = {
scope:"local",
getScope:function(){
var that = this;
return function(){
return that.scope;
}
}
}
object.getScope()()返回值为local。