我曾经写过一篇关于如何使用闭包来简化事件处理代码的文章。它比较ASP。NET事件处理到客户端jQuery。

http://www.hackification.com/2009/02/20/closures-simplify-event-handling-code/

解释JavaScript闭包的实际用法

当我们在另一个函数中创建一个函数时，我们是在创建一个闭包。闭包功能强大，因为它们能够读取和操作其外部函数的数据。无论何时调用函数，都会为该调用创建一个新的作用域。在函数内部声明的局部变量属于该作用域，并且只能从该函数访问它们。当函数完成执行时，作用域通常被销毁。

这类函数的一个简单例子是:

function buildName(name) {
    const greeting = "Hello, " + name;
    return greeting;
}

在上面的例子中，函数buildName()声明了一个局部变量greeting并返回它。每次函数调用都会创建一个新的作用域和一个新的局部变量。在函数执行完成后，我们无法再次引用该作用域，因此它被垃圾收集。

但如果我们有一个指向范围的链接呢?

让我们看看下一个函数:

函数buildName(name) { const greeting = "Hello， " + name + " Welcome "; const sayName = function() { console.log(问候); }; 返回sayName; ｝ const sayMyName = buildName("Mandeep"); sayMyName ();//你好，曼迪普

本例中的sayName()函数是一个闭包。sayName()函数有自己的局部作用域(变量welcome)，也可以访问外部(封闭)函数的作用域。在本例中，是来自buildName()的greeting变量。

在执行buildName之后，在本例中不会销毁作用域。sayMyName()函数仍然可以访问它，因此它不会被垃圾收集。但是，除了闭包之外，没有其他从外部作用域访问数据的方法。闭包充当全局上下文和外部作用域之间的网关。

在Mozilla开发者网络上有一个关于实用闭包的章节。

我已经使用闭包做了如下的事情:

a = (function () {
    var privatefunction = function () {
        alert('hello');
    }

    return {
        publicfunction : function () {
            privatefunction();
        }
    }
})();

正如你在那里看到的，a现在是一个对象，它有一个方法publicfunction(a.publicfunction())，它调用privatefunction，它只存在于闭包中。你不能直接调用privatefunction(即a.b ratefunction())，只能调用publicfunction()。

这是一个最小的例子，但也许你可以看到它的用途?我们使用它来强制公共/私有方法。

假设，你想统计用户在网页上点击按钮的次数。

为此，您将在按钮的onclick事件上触发一个函数来更新变量的计数

<button onclick="updateClickCount()">click me</button>

现在有很多方法，比如:

你可以使用一个全局变量和一个函数来增加计数器: Var计数器= 0; 函数updatecickcount () { + +计数器; //用counter做一些事情 ｝ 但是，问题在于页面上的任何脚本都可以更改计数器，而不需要调用updatecickcount()。

现在，你可能在考虑在函数内部声明变量: 函数updatecickcount () { Var计数器= 0; + +计数器; //用counter做一些事情 ｝ 但是,嘿!每次调用updateClickCount()函数时，计数器再次被设置为1。

Thinking about nested functions? Nested functions have access to the scope "above" them. In this example, the inner function updateClickCount() has access to the counter variable in the parent function countWrapper(): function countWrapper() { var counter = 0; function updateClickCount() { ++counter; // Do something with counter } updateClickCount(); return counter; } This could have solved the counter dilemma, if you could reach the updateClickCount() function from the outside and you also need to find a way to execute counter = 0 only once not everytime.

Closure to the rescue! (self-invoking function): var updateClickCount = (function(){ var counter = 0; return function(){ ++counter; // Do something with counter } })(); The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression. This way updateClickCount becomes a function. The "wonderful" part is that it can access the counter in the parent scope. This is called a JavaScript closure. It makes it possible for a function to have "private" variables. The counter is protected by the scope of the anonymous function, and can only be changed using the updateClickCount() function!

一个关于闭包的更生动的例子

< >脚本 var updatecickcount =(函数(){ Var计数器= 0; 返回函数(){ + +计数器; . getelementbyid(“spnCount”)。innerHTML =计数器; ｝ })（); > < /脚本 < html > <按钮onclick = " updateClickCount ()“>点击我> < /按钮 <div>你点击了 <span id="spnCount"> 0 </span> times! < / div > < / html >

参考:JavaScript闭包

闭包的使用:

闭包是JavaScript最强大的特性之一。JavaScript允许函数嵌套，并授予内部函数对外部函数中定义的所有变量和函数的完全访问权(以及外部函数可以访问的所有其他变量和函数)。但是，外部函数不能访问内部函数内部定义的变量和函数。

这为内部函数的变量提供了一种安全性。此外，由于内部函数可以访问外部函数的作用域，如果内部函数能够在外部函数的生命周期之后继续存在，那么外部函数中定义的变量和函数将比外部函数本身的生命周期更长。当内部函数以某种方式对外部函数之外的任何作用域可用时，就会创建闭包。

例子:

<script>
var createPet = function(name) {
  var sex;
  
  return {
    setName: function(newName) {
      name = newName;
    },
    
    getName: function() {
      return name;
    },
    
    getSex: function() {
      return sex;
    },
    
    setSex: function(newSex) {
      if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
        sex = newSex;
      }
    }
  }
}

var pet = createPet("Vivie");
console.log(pet.getName());                  // Vivie

console.log(pet.setName("Oliver"));   
console.log(pet.setSex("male"));
console.log(pet.getSex());                   // male
console.log(pet.getName());                  // Oliver
</script>

在上面的代码中，外部函数的name变量可以被内部函数访问，除了通过内部函数，没有其他方法访问内部变量。内部函数的内部变量充当内部函数的安全存储。它们保存“持久的”但安全的数据，供内部函数使用。这些函数甚至不需要赋值给变量，也不需要有名称。 详情请阅读此处。