闭包的禅意

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

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

// 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

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

JavaScript被认为非常擅长于暴露它的所有对象，所以不管它的窗口对象本身。

因此，如果我想用JQuery/YUI div弹出窗口覆盖浏览器警报，它也接受字符串作为参数，可以简单地使用下面的代码片段。

function divPopup(str)
{
    //code to show the divPopup
}
window.alert = divPopup;

有了这个更改，所有对alert()的调用都将显示新的基于div的弹出窗口，而不是浏览器特定的警报。

函数是对象，因此可以具有属性。

fn = function(x) {
   // ...
}

fn.foo = 1;

fn.next = function(y) {
  //
}

JavaScript使用了一个简单的对象文字:

var x = { intValue: 5, strValue: "foo" };

这将构造一个完整的对象。

JavaScript使用基于原型的面向对象，并提供了在运行时扩展类型的能力:

String.prototype.doubleLength = function() {
    return this.length * 2;
}

alert("foo".doubleLength());

对象将对不包含它自身的属性的所有访问委托给它的“原型”，另一个对象。这可以用来实现继承，但实际上更强大(即使更麻烦):

/* "Constructor" */
function foo() {
    this.intValue = 5;
}

/* Create the prototype that includes everything
 * common to all objects created be the foo function.
 */
foo.prototype = {
    method: function() {
        alert(this.intValue);
    }
}

var f = new foo();
f.method();

所有“隐藏的”特性都在Mozilla wiki上:http://developer.mozilla.org/en/JavaScript。

这里有JavaScript 1.5的核心参考，JavaScript 1.6的新特性，JavaScript 1.7的新特性，以及JavaScript 1.8的新特性。看看所有这些实际工作的例子，是正确的。

JavaScript没有块作用域(但它有闭包，所以让我们称它为偶数?)

var x = 1;
{
   var x = 2;
}
alert(x); // outputs 2