你必须知道的【闭包】陷阱和案例
by 【当耐特砖家】
at 2012-02-27 07:39:00
original http://www.cnblogs.com/iamzhanglei/archive/2012/02/27/2368566.html
闭包
In some languages, a closure may occur when a function is defined within another function, and the inner function refers to local variables of the outer function.
At run-time, when the outer function executes, a closure is formed, consisting of the inner function’s code and references (the upvalues) to any variables of the outer function required by the closure.
翻译：
在一些编程语言当中，闭包发生 ：在一个函数内部定义了另外一个函数，并且内部的函数引用了外部函数的本地变量。
在运行的时候，当外部函数执行，这个时候形成了一个闭包，由内部函数的代码和对外部函数任意变量引用组成，这写引用都依赖于此闭包。
// ECMAScript
var f, g;
function foo() {
var x = 0;
f = function () { return ++x; };
g = function () { return --x; };
x = 1;
alert('inside foo, call to f(): ' + f()); // "2"
}
//外部函数执行，这个时候形成了闭包
foo();
//因为有了闭包，所以才访问到了 foo中的x
alert('call to g(): ' + g()); // "1"
//因为有了闭包，所以才访问到了 foo中的x
alert('call to f(): ' + f()); // "2"
javascript闭包陷阱与案例
在很多时候，由于内部函数的变量覆盖了闭包的变量，我们如果需要引用外部函数同名的变量，需要通过执行匿名函数，不外部函数的变量作为参数传递进来。如下所示：
（function(out_xxx){
//这里面就可以使用out_xxx
}(xxx)）
可以看得出来，使用这种方式最多的地方是在我们定义对象的时候：
(function (window) {
var MyObject = function () {
this.initialize();
}
var p = MyObject.prototype;
p.initialize = function () {
}
window.MyObject = MyObject;
} (window));
这样定义对象有两个好处：
1.避免污染外部变量
2.传递参数的形式减少作用域查找
javascript为我们埋了很多坑，在许多场景下，我们需要利用以上的形式去解决问题，下面依依列出。
场景1 :
如下所示，我需要在cc方法中调用到外面的name：
var bb, cc;因为内部的函数定义的变量覆盖了外部函数的变量，所以结果输出“张磊”。
function aa() {
var name = "当耐特";
bb = function () {
var name = "砖家";
cc = function () {
var name = "张磊";
alert(name);
}
}
}
aa();
bb();
cc();//输出 “张磊”
解决办法：
var bb, cc;
function aa() {
var name = "当耐特";
(function (aa_name) {
bb = function () {
var name = "砖家";
(function (bb_name, aa_name) {
cc = function () {
var name = "张磊";
alert(aa_name);
alert(bb_name);
alert(name);
}
})(name, aa_name);
}
})(name);
}
aa();
bb();
cc();//输出“当耐特” “砖家” “张磊”
真实案例：
记得上周，我的一个同事（实习生），对下面一段代码产生疑惑，所以咨询我。如下所示：
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": function () {
var bValid = true;
allFields.removeClass("ui-state-error");
bValid = bValid && checkLength(name, "username", 3, 16);
bValid = bValid && checkLength(email, "email", 6, 80);
bValid = bValid && checkLength(password, "password", 5, 16);
if (bValid) {
$.ajax({
type: "POST",
url: "xxxxx.aspx",
data: "name=xxxxx&email=xxxxx&password=xxxx"
}).done(function (msg) {
alert("Data Saved: " + msg);
$(this).dialog("close");
});
}
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});这里用的是JqueryUI的dialog插件。详见： http://jqueryui.com/demos/dialog/#modal-form
他想要的效果是点击create发起一个异步提交，然后在回调的时候关闭弹出层。令他困惑的地方是，弹出层关闭不了。
他抱怨着说：
Cancel: function () {
$(this).dialog("close");
}
我的cancel都能关闭。为什么
if (bValid) {
$.ajax({
type: "POST",
url: "xxxxx.aspx",
data: "name=xxxxx&email=xxxxx&password=xxxx"
}).done(function (msg) {
alert("Data Saved: " + msg);
$(this).dialog("close");
});
}
这里面的$(this).dialog("close")为什么就不能关闭？
这是一个很典型的场景，解决办法：
if (bValid) {
(function (outThis) {
$.ajax({
type: "POST",
url: "xxxxx.aspx",
data: "name=xxxxx&email=xxxxx&password=xxxx"
}).done(function (msg) {
alert("Data Saved: " + msg);
$(outThis).dialog("close");
});
}
}(this))
},
除了上面的解决方案，我们完全可以使用
var name=name;
var __name=name;
var this =this;
然后内部函数使用新定义的变量就可以。然而，下面的几种场景却必须使用匿名函数。
场景2---循环中的内部函数
function TestObj(name) {
this.name = name;
}
var objs = [];
var obj;
function test() {
for (var i = 0; i < 100; i++) {
var name = "张磊" + i;
obj = new TestObj(name);
obj.printName = function () {
console.log(obj.name);
}
objs.push(obj);
}
}
//外部函数执行，闭包形成。内部函数obj.printName中的obj全部指向最后一次new TestObj(name);
test();
//所以这里会输出100次-----"张磊99"
for (var i in objs) {
objs[i].printName();
}
解决办法
function TestObj(name) {
this.name = name;
}
var objs = [];
var obj;
function test() {
for (var i = 0; i < 100; i++) {
var name = "张磊" + i;
obj = new TestObj(name);
(function (target) {
obj.printName = function () {
console.log(target.name);
}
} (obj))
objs.push(obj);
}
}
test();
for (var i in objs) {
objs[i].printName();
}
真实案例：
// create and populate the screen with random daisies:
for(var i = 0; i < 100; i++){
bitmap = new Bitmap(image);
container.addChild(bitmap);
bitmap.x = canvas.width * Math.random()|0;
bitmap.y = canvas.height * Math.random()|0;
bitmap.rotation = 360 * Math.random()|0;
bitmap.regX = bitmap.image.width/2|0;
bitmap.regY = bitmap.image.height/2|0;
bitmap.scaleX = bitmap.scaleY = bitmap.scale = Math.random()0.4+0.6;
bitmap.name = "bmp_"+i;
// wrapper function to provide scope for the event handlers:
(function(target) {
bitmap.onPress = function(evt) {
// bump the target in front of it's siblings:
container.addChild(target);
var offset = {x:target.x-evt.stageX, y:target.y-evt.stageY};
// add a handler to the event object's onMouseMove callback
// this will be active until the user releases the mouse button:
evt.onMouseMove = function(ev) {
target.x = ev.stageX+offset.x;
target.y = ev.stageY+offset.y;
// indicate that the stage should be updated on the next tick:
update = true;
}
}
bitmap.onMouseOver = function() {
target.scaleX = target.scaleY = target.scale1.2;
update = true;
}
bitmap.onMouseOut = function() {
target.scaleX = target.scaleY = target.scale;
update = true;
}
})(bitmap);
}
这是Easeljs官网demo的一段代码，因为内部函数不会立即执行，所以当执行的时候,内部函数引用外部函数变量的时候，该变量已经被外层的for循环覆盖了N次，所以要通过上面的方式来解决这个问题。
小结
这是javascript蹩脚的一个方面，除了这个，还有javascript的 getter和setter也是该语言语法特性中令人憋屈的地方。另外，在javascript 的一些OOP方式中，我们经常用下划线（_xxxx）的方式代表其为私有变量，但是外部却可以访问，用约定来弥补其语法上的不足。
我相信经过人类的不懈努力，总有那么一天：static 、namespace、interface、private、protected 、class、enum·············都能成为javascript的关键字，而不是五花八门的技巧，对应这些关键字的所有 文章 笔记 心得 日记 技巧 随笔 后门 都将沉尸谷底、永无翻身之日。相信那个时候，HTML5已经成熟。正如小胖所说:什么时候做html5游戏的朋友能够不再纠结于什么js技巧 canvas性能优化的，那就说明html5游戏这个领域成熟了。