JavaScript闭包使用方法详解

作者：袖梨 2022-11-14

闭包就是一种在函数内访问和操作外部变量的方式，一般情况下，我们会在函数外部定义一些变量以供函数内部使用。

代码如下 复制代码
var a = 1;
function fn( arg ){
var b =2;
function fnInner ( arg ){
console.log(a); //访问全局的变量
console.log(b); //访问外部函数体内的变量
console.log(arg); //访问函数自身的变量
}
fnInner(3);
}

fn函数的闭包引用了变量b，还有函数本身。fnInner函数引用了b，a，传递给它的参数。我们需要注意一点，虽然函数并没有特别创建一个变量来保存这些要引用的数据，但是要保存和引用这些变量还是会带来内存的消耗。

私有变量
JavaScript语言本身并没有提供创建私有变量的方式，但是我们知道，函数外的变量是无法访问函数内部的变量的，这意味着我们可以这样创建私有变量：

代码如下 复制代码
function(){
this.public = 1; //public在函数外面可以访问
var private = 1;//private变量在函数外部无法访问
}

回调函数和定时器
有时候我们会这样写一个回调函数

代码如下 复制代码
var a = 1;
jQuery.ajax({
url : "test.html",
success : function(html){
console.log(a);
}
})

类似的的还有在设置定时器的时候，我们在1000ms后将一个函数插入队列等待执行

代码如下 复制代码
var a = 1;
setTimeout(function(){
console.log(a);
},1000);
a = a + 1;

ajax回调里的结果可能比较容易猜到，匿名函数本身是一个闭包，保存了变量a的值，从而可以访问。而第二个定时器回调主要要说明的就是，闭包所引用的值是在执行期生成的，而我们虽然在a = a+1前面定义了匿名函数，但是执行的时候因为匿名函数被插入到执行队列的尾部，那么a = a +1会先执行，然后在执行匿名函数，也就是说这个例子返回的值为2。
改变闭包的context
有这么一段代码

代码如下 复制代码
var Button = {
click: function(){
console.log(this);
this.clicked = true;
}
};
var elem = document.querySelector("body");
elem.addEventListener("click", Button.click, false);

我们的目的是通过点击body来改变Button对象的clicked值，但是失败了

虽然我们在定义的时候试图让this指向了Button，但是在addEventListener之后，this又被指向到elem。

解决方法有很多。

在支持Function.prototype.bind方法的浏览器里，我们只需要简单地修改一下代码即可

代码如下 复制代码
var Button = {
click: function(){
console.log(this);
this.clicked = true;
}
};
var elem = document.querySelector("body");
elem.addEventListener("click", Button.click.bind(Button), false);

注：Function.prototype.bind方法参考ECMAScript 262 15.3.4.5中的说明，作用和apply类似，但是不会执行原函数

如果不支持Function.prototype.bind，那么，我们可以自己实现一个bind函数。

代码如下 复制代码
function bind(context, name){
return function(){
return context[name].apply(context, arguments);
};
}
var Button = {
click: function(){
console.log(this);
this.clicked = true;
}
};
var elem = document.querySelector("body");
elem.addEventListener("click", bind(Button, "click"), false);

本文参考自John Resign的《secrets of the JavaScript ninjia》

相关文章

精彩推荐