1.闭包的定义
闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。(百度百科)
2.变量作用域
[w3c的定义]W3c
3.闭包的特点
①.闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
function f() {
var count = 0;
return function() {
count++;
console.info(count);
}
}
var t1 = f();
t1();
t1();
t1();
使用闭包有一个优点,也是它的缺点:就是可以把局部变量驻留在内存中,可以避免使用全局变量。(全局变量污染导致应用程序不可预测性,每个模块都可调用必将引来灾难,所以推荐使用私有的,封装的局部变量)。
如果要实现累加功能:
//累加
var age = 100; //通过全局变量
function box(){
age++;
}
box();
box();
box();
alert(age); //103
function box(){ //使用匿名函数实现局部变量驻留内存从而进而累加
var age = 100;
return function(){
age++;
return age;
};
}
var b =box(); //不能通过box()();来调用,这样每次都初始化age=100;
b();
b();
alert(b());//103
b=null; //当不用时解除引用,等待垃圾回收
事例一:
function outerFn(){
var i = 0;
function innerFn(){
i++;
console.log(i);
}
return innerFn;
}
var inner = outerFn(); //每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同,都会重新创建一个新的地址
inner();
inner();
inner();
var inner2 = outerFn();
inner2();
inner2();
inner2();
事例二:
var i = 0;
function outerFn(){
function innnerFn(){
i++;
console.log(i);
}
return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();
inner2();
inner1();
inner2();
事例三:
function outerFn(){
var i = 0;
function innnerFn(){
i++;
console.log(i);
}
return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();
inner2();
inner1();
inner2();
②.闭包就是可以创建一个独立的环境,每个闭包里面的环境都是独立的,互不干扰。每次外部函数执行的时候,外部函数的引用地址不同,都会重新创建一个新的地址。但凡是当前活动对象中有被内部子集引用的数据,那么这个时候,这个数据不删除,保留一根指针给内部活动对象(变量的值始终保持在内存中).
作用域链的机制导致一个问题,在循环中里的匿名函数取得的任何变量都是最后一个值。
下面的例子输出的结果都是5,也就是循环后得到的最大的i值。因为b[i]调用的是匿名函数,匿名函数并没有自我执行,等到调用的时候,box()已执行完毕,i早已变成5,所以最终的结果就是5个5。
改1中,我们通过匿名函数自我执行,立即把结果赋值给a[i]。每一个i,是调用方通过按值传递的,所以最终返回的都是指定的递增的i。而不是box()函数里的i。
//循环里的匿名函数取值问题
function box(){
var arr=[ ];
for(var i=0;i<5;++i){
arr[i]=function(){
return i;
};
}
return arr;
}
//alert(box()); 返回每个都是匿名函数体的数组
var b = box();
for(var i = 0;i<5;++i){
console.log(b[i]());
}
//改进1:立即执行匿名函数
function box(){
var arr=[ ];
for(var i=0;i<5;++i){
arr[i]=(function(num){ //通过立即执行匿名函数
return num;
})(i);
}
return arr;
}
var b = box();
for(var i = 0;i<5;++i){
console.log(b[i]);
}
//改进二:利用es6的块级作用域
function box(){
let arr=[ ];
for(let i=0;i<5;++i){
arr[i]=function(){
return i;
};
}
return arr;
}
var b = box();
for(let i = 0;i<5;++i){
console.log(b[i]());
}
在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围。
练习:
练习一:
function fn(){
var a = 3;
return function(){
return ++a;
}
}
console.log(fn()());
console.log(fn()());
②.this的指向
实例一:
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());
实例二:
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());
闭包中使用this对象也可能会导致一些问题,this对象是在运行时基于函数的执行环境绑定的,如果this在全局范围就是window,如果在对象内部就指向这个对象。而闭包却在运行时指向window的,因为闭包并不属于这个对象的属性或方法。
闭包中的this将返回全局对象,浏览器中window对象,node中global对象,可以使用对象冒充或者赋值来解决闭包中this全局对象问题。
4、使用闭包的注意点
(1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。