闭包的禅意

其他人也提到了关闭。但令人惊讶的是，有那么多人知道闭包，使用闭包编写代码，但仍然对闭包的真正含义有错误的认识。有些人混淆了一级函数和闭包。但也有人认为它是一种静态变量。

对我来说，闭包是一种“私有”全局变量。这是一种变量，一些函数将其视为全局变量，而其他函数则看不到。现在，我知道这是在快速和松散地描述底层机制，但这就是它的感觉和行为。说明:

// Say you want three functions to share a single variable:

// Use a self-calling function to create scope:
(function(){

    var counter = 0; // this is the variable we want to share;

    // Declare global functions using function expressions:
    increment = function(){
        return ++counter;
    }
    decrement = function(){
        return --counter;
    }
    value = function(){
        return counter;
    }
})()

现在，增量、减量和值这三个函数共用一个变量counter，而不是一个实际的全局变量counter。这是闭包的真正本质:

increment();
increment();
decrement();
alert(value()); // will output 1

以上并不是闭包的真正有用的用法。事实上，我认为这样使用它是一种反模式。但是它对于理解闭包的性质是有用的。例如，大多数人在尝试做以下事情时会被发现:

for (var i=1;i<=10;i++) {
    document.getElementById('span'+i).onclick = function () {
        alert('this is span number '+i);
    }
}
// ALL spans will generate alert: this span is span number 10

这是因为他们不理解闭包的本质。他们认为他们把i的值传递给了函数，而实际上这些函数共享一个变量i，就像我之前说的，一个特殊的全局变量。

为了解决这个问题，你需要分离*闭包:

function makeClickHandler (j) {
    return function () {alert('this is span number '+j)};
}

for (var i=1;i<=10;i++) {
    document.getElementById('span'+i).onclick = makeClickHandler(i);
}
// this works because i is passed by reference 
// (or value in this case, since it is a number)
// instead of being captured by a closure

*注:我不知道这里的正确术语。

你可以在任何对象上执行一个对象的方法，不管它是否有这个方法。当然，它可能并不总是有效(如果方法假设对象具有它没有的东西)，但它可能非常有用。例如:

function(){
    arguments.push('foo') // This errors, arguments is not a proper array and has no push method
    Array.prototype.push.apply(arguments, ['foo']) // Works!
}

如果您在google上搜索关于给定主题的像样的JavaScript参考，在查询中包含“mdc”关键字，那么您的第一个结果将来自Mozilla Developer Center。我没有随身携带任何离线参考资料或书籍。我总是使用“mdc”关键字来直接找到我要找的东西。例如:

谷歌:javascript数组排序mdc (在大多数情况下，你可以省略“javascript”)

更新:Mozilla开发者中心已重命名为Mozilla开发者网络。“mdc”关键字技巧仍然有效，但很快我们可能不得不开始使用“mdn”来代替。

==运算符有一个非常特殊的属性，它创建了这个令人不安的等式(是的，我知道在其他动态语言中，如Perl，这种行为是预期的，但JavaScript通常不会尝试在比较中聪明):

>>> 1 == true
true
>>> 0 == false
true
>>> 2 == true
false

要将浮点数转换为整数，您可以使用以下神秘的技巧之一(请不要这样做):

3.14 >> 0(通过2.9999999999999999 >> .5?) 3.14 | 0(通过JavaScript中将浮点数转换为整数的最佳方法是什么?) 3.14 & -1 3.14 ^ 0 ~ ~ 3.14

基本上，对浮点数应用任何二进制操作都不会改变最终值(即恒等函数)，最终会将浮点数转换为整数。

正如Marius已经指出的，可以在函数中使用公共静态变量。

我通常使用它们来创建只执行一次的函数，或者缓存一些复杂的计算结果。

下面是我以前的“单例”方法的例子:

var singleton = function(){ 

  if (typeof arguments.callee.__instance__ == 'undefined') { 

    arguments.callee.__instance__ = new function(){

      //this creates a random private variable.
      //this could be a complicated calculation or DOM traversing that takes long
      //or anything that needs to be "cached"
      var rnd = Math.random();

      //just a "public" function showing the private variable value
      this.smth = function(){ alert('it is an object with a rand num=' + rnd); };

   };

  }

  return arguments.callee.__instance__;

};


var a = new singleton;
var b = new singleton;

a.smth(); 
b.smth();

如您所见，在这两种情况下构造函数都只运行一次。

For example, I used this approach back in 2004 when I had to create a modal dialog box with a gray background that covered the whole page (something like Lightbox). Internet Explorer 5.5 and 6 have the highest stacking context for <select> or <iframe> elements due to their "windowed" nature; so if the page contained select elements, the only way to cover them was to create an iframe and position it "on top" of the page. So the whole script was quite complex and a little bit slow (it used filter: expressions to set opacity for the covering iframe). The "shim" script had only one ".show()" method, which created the shim only once and cached it in the static variable :)