如果你熟悉面向对象意义上的实例化类的概念(即创建该类的对象)，那么你就接近理解闭包了。

这样想:当你实例化两个Person对象时，你知道类成员变量“Name”在实例之间是不共享的;每个对象都有自己的“副本”。类似地，当你创建一个闭包时，自由变量(上面例子中的'calledCount')被绑定到函数的'实例'。

我认为你的概念上的突破有点受到这样一个事实的阻碍，即由warnUser函数(另外:这是一个高阶函数)返回的每个函数/闭包都绑定'calledCount'与相同的初始值(0)，而通常在创建闭包时，将不同的初始化式传递到高阶函数中更有用，就像将不同的值传递给类的构造函数一样。

所以，假设当'calledCount'达到某个值时，你想结束用户的会话;您可能需要不同的值，这取决于请求是来自本地网络还是来自大的坏Internet(是的，这是一个人为的例子)。要实现这一点，您可以将不同的calledCount初始值传递给warnUser(即-3或0?)

文献的部分问题是用来描述它们的命名法(“词汇范围”，“自由变量”)。不要让它欺骗你，闭包比看起来要简单得多…初步证据;-)

参考:闭包的实际使用

在实践中，闭包可以创建优雅的设计，允许自定义各种计算、延迟调用、回调、创建封装的作用域等。

一个例子是数组的sort方法，它接受sort条件函数作为参数:

[1, 2, 3].sort(function (a, b) {
    ... // Sort conditions
});

将函数函数映射为数组的map方法，它根据函数参数的条件映射一个新数组:

[1, 2, 3].map(function (element) {
    return element * 2;
}); // [2, 4, 6]

通常，通过使用函数参数定义几乎无限的搜索条件来实现搜索函数是很方便的:

someCollection.find(function (element) {
    return element.someProperty == 'searchCondition';
});

此外，我们可能会注意到应用函数，例如，forEach方法将函数应用于元素数组:

[1, 2, 3].forEach(function (element) {
    if (element % 2 != 0) {
        alert(element);
    }
}); // 1, 3

函数应用于实参(在apply中应用于实参列表，在call中应用于定位实参):

(function () {
    alert([].join.call(arguments, ';')); // 1;2;3
}).apply(this, [1, 2, 3]);

延迟调用:

var a = 10;
setTimeout(function () {
    alert(a); // 10, after one second
}, 1000);

回调函数:

var x = 10;
// Only for example
xmlHttpRequestObject.onreadystatechange = function () {
    // Callback, which will be called deferral ,
    // when data will be ready;
    // variable "x" here is available,
    // regardless that context in which,
    // it was created already finished
    alert(x); // 10
};

创建一个用于隐藏辅助对象的封装作用域:

var foo = {};
(function (object) {
    var x = 10;
    object.getX = function _getX() {
        return x;
    };
})(foo);

alert(foo.getX()); // Get closured "x" – 10

在给定的示例中，所包含的变量'counter'的值是受保护的，只能使用给定的函数(自增，自减)来更改。因为它在闭包中，

var MyCounter =函数(){ Var计数器= 0; 返回{ 增量:函数(){返回计数器+= 1;}， 递减:函数(){返回计数器= 1;}， 获取:函数(){返回计数器;} }; }; var x = MyCounter(); / /或 var y = MyCounter(); 警报(x.get ());/ / 0 警报(x.increment ());/ / 1 警报(x.increment ());/ / 2 警报(y.increment ());/ / 1 警报(x.get ());// x仍然是2

这里我有一个闭包概念的简单例子，我们可以在我们的电子商务网站或其他许多网站上使用它。

我正在添加示例的JSFiddle链接。它包含一个由三种商品组成的小产品清单和一个购物车柜台。

JSFiddle

// Counter closure implemented function; var CartCouter = function(){ var counter = 0; function changeCounter(val){ counter += val } return { increment: function(){ changeCounter(1); }, decrement: function(){ changeCounter(-1); }, value: function(){ return counter; } } } var cartCount = CartCouter(); function updateCart() { document.getElementById('cartcount').innerHTML = cartCount.value(); } var productlist = document.getElementsByClassName('item'); for(var i = 0; i< productlist.length; i++){ productlist[i].addEventListener('click', function(){ if(this.className.indexOf('selected') < 0){ this.className += " selected"; cartCount.increment(); updateCart(); } else{ this.className = this.className.replace("selected", ""); cartCount.decrement(); updateCart(); } }) } .productslist{ padding: 10px; } ul li{ display: inline-block; padding: 5px; border: 1px solid #DDD; text-align: center; width: 25%; cursor: pointer; } .selected{ background-color: #7CFEF0; color: #333; } .cartdiv{ position: relative; float: right; padding: 5px; box-sizing: border-box; border: 1px solid #F1F1F1; } <div> <h3> Practical use of a JavaScript closure concept/private variable. </h3> <div class="cartdiv"> <span id="cartcount">0</span> </div> <div class="productslist"> <ul> <li class="item">Product 1</li> <li class="item">Product 2</li> <li class="item">Product 3</li> </ul> </div> </div>

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

我喜欢Mozilla的函数工厂示例。

function makeAdder(x) {

    return function(y) {
        return x + y;
    };
}

var addFive = makeAdder(5);

console.assert(addFive(2) === 7);
console.assert(addFive(-5) === 0);