javascript 闭包
定义
当一个函数即便在离开了它的词法作用域(Lexical Scope)的情况下,仍然存储并可以存取它的词法作用域(Lexical Scope),这个函数就构成了闭包。
function Student(){
var age=22;
function addAge(){
age++;
alert(age);
}
}
return addAge;
var fn=Student();
fn();//弹出23
特性
函数嵌套函数。
函数内部可以引用外部的参数和变量。
参数和变量不会被垃圾回收机制回收
function outer() {
var local_var = "I'm local"; //不会被立刻回收
return function inner() { //闭包函数
console.log("local: " + local_var);
};
}
JS 闭包的实例讲解
for (var i = 1; i <= 5; i++) {
setTimeout( function timer(){
console.log( i );
}, i*1000 );
}
这个例子相信大家再熟悉不过了,首先timer()形成闭包函数。直觉上都会认为输出为1,2,3,4,5。很明显这个结论是错误,实际结果为6,6,6,6,6。
首先是js执行为单线程,所以当循环执行完之后才会开始执行setTimeout函数。所以最后执行的时候i已经变成6了,可能有人会问,每一个闭包不应该都会有自己的一份拷贝吗?恭喜你,你的理解是对的,但这个方法却没有这样做,它都是调用了i这个变量,也就是说没有保存自己的那一个i。那么问题也就好解决了,我们给它传一个属于自己i
for (var i=1; i<=5; i++){
(function(j){
setTimeout( function timer(){
console.log( j );
}, j*1000 );
})(i)
}
也可以使用let 解决这个问题
for (let i = 1; i <= 5; i++) {
setTimeout( function timer(){
console.log( i );
}, i*1000 );
}
因为let块级作用域,当前的i只在本轮循环有效
var 没有块级作用域,var的i在全局范围内有效,所以全局只有一个变量i,每一次循环,变量i的值都会发生改变
闭包的好处
希望一个变量长期存储在内存中。
避免全局变量的污染。
私有成员的存在。
闭包的缺点
常驻内存,增加内存使用量。
使用不当会很容易造成内存泄露。
闭包常见用法
单例模式
var Singleton = (function () {
var instance;
function createInstance() {
return new Object("I am the instance");
}
return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
function run() {
var instance1 = Singleton.getInstance();
var instance2 = Singleton.getInstance();
console.log("Same instance? " + (instance1 === instance2));
}
代码模块化(闭包模拟私有方法)
function CoolModule() {
var something = "cool";
var another = [1, 2, 3];
function doSomething() {
console.log( something );
}
function doAnother() {
console.log( another.join( " ! " ) );
}
return {
doSomething: doSomething,
doAnother: doAnother
};
}
var foo = CoolModule();
foo.doSomething(); // coolf
oo.doAnother(); // 1 ! 2 ! 3
对象与方法关联
我们常见的做法就是,响应事件然后执行的函数,但如果需要改变大小的样式有很多,比如12px一个按钮,14px一个按钮,16px一个按钮,如果以前的方式来写就很麻烦,而闭包可以为我们提供便利
function makeSizer(size){
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;