Закрытие - это полезный способ создания генераторов , последовательность с поправкой по требованию:

    var foobar = function(i){var count = count || i; return function(){return ++count;}}

    baz = foobar(1);
    console.log("first call: " + baz()); //2
    console.log("second call: " + baz()); //3

Различия суммируются следующим образом:

Anonymous functions                                    Defined functions

Cannot be used as a method                             Can be used as a method of an object

Exists only in the scope in which it is defined        Exists within the object it is defined in

Can only be called in the scope in which it is defined Can be called at any point in the code

Can be reassigned a new value or deleted               Cannot be deleted or changed

Ссылки

• Основы AS3: Функции

Здесь у меня есть один простой пример концепции закрытия, который мы можем использовать на нашем сайте электронной коммерции или многих других. Я добавляю ссылку jsfiddle с примером. он содержит небольшой список товаров из 3 предметов и один счетчик корзины.

Jsfiddle

//Counter clouser 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 JavaScript Closure consept/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>

Да, это хороший пример полезного закрытия. Вызов warnUser создает в своей области переменную calledCount и возвращает анонимную функцию, которая хранится в переменной warnForTamper. Поскольку по-прежнему существует закрытие, использующее переменную calledCount, оно не удаляется при выходе функции, поэтому каждый вызов warnForTamper() увеличивает область видимости и предупреждает значение.

общая проблема, которую я вижу в StackOverflow, - это то, где кто-то хочет «задержать» использование переменной, которая увеличивается на каждом цикле, но поскольку переменная ограничена, каждая ссылка на переменную будет после окончания цикла, в результате чего конечное состояние переменной:

for (var i = 0; i < someVar.length; i++)
    window.setTimeout(function () { 
        alert("Value of i was "+i+" when this timer was set" )
    }, 10000);

Это приведет к тому, что каждое предупреждение покажет то же значение i, значение которого было увеличено до окончания цикла. Решение состоит в том, чтобы создать новое закрытие, отдельную область для переменной. Это можно сделать, используя мгновенно выполненную анонимную функцию, которая получает переменную и сохраняет ее состояние как аргумент:

for (var i = 0; i < someVar.length; i++)
    (function (i) {
        window.setTimeout(function () { 
            alert("Value of i was "+i+" when this timer was set" )
        }, 10000);
    })(i); 

Другим распространенным применением закрытий является связывание this в методе с конкретным объектом, позволяющее ему вызываться в другом месте (например, обработчик события).

function bind(obj, method) {
    if (typeof method == 'string') {
        method = obj[method];
    }
    return function () {
        method.apply(obj, arguments);
    }
}
...
document.body.addEventListener('mousemove', bind(watcher, 'follow'), true);

Всякий раз, когда mousemove watcher.follow(evt).

Замыкания также являются неотъемлемой частью функций более высокого порядка, что позволяет использовать очень общую схему перезаписи нескольких аналогичных функций как одной функции более высокого порядка путем параметрирования несходных частей. В качестве абстрактного примера

foo_a = function (...) {A a B}
foo_b = function (...) {A b B}
foo_c = function (...) {A c B}

становится

fooer = function (x) {
    return function (...) {A x B}
}

, где A и B - не синтаксические единицы, а строки исходного кода (не строковые литералы).

См. « Упорядочение моего javascript с помощью функции » для конкретного примера.

В Mozilla Developer Network имеется раздел о Практических замыканиях .

Этот поток очень помог мне в получении лучшего понимания того, как работают замыкания. С тех пор я сделал некоторые эксперименты по своему собственному опыту и придумал этот довольно простой код, который может помочь некоторым другим людям понять, как закрытие может быть использовано на практике и как использовать закрытие на разных уровнях для поддержания переменных, похожих на статические и / или глобальные переменные без риска их перезаписи или путаницы с глобальными переменными. То, что это делает, - отслеживать нажатия кнопок, как на локальном уровне для каждой отдельной кнопки, так и на глобальном уровне, подсчитывая каждое нажатие кнопки, внося вклад в одну цифру. Примечание. Я не использовал глобальные переменные для этого, что является своего рода точкой упражнения - с обработчиком, который может быть применен к любой кнопке, которая также способствует чему-то глобально.

Пожалуйста, эксперты, дайте мне знать, если я совершил какую-либо плохую практику здесь! Я все еще сам изучаю этот материал.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Closures on button presses</title>
<script type="text/javascript">

window.addEventListener("load" , function () {
    /*
    grab the function from the first closure,
    and assign to a temporary variable 
    this will set the totalButtonCount variable
    that is used to count the total of all button clicks

    */
    var buttonHandler = buttonsCount(); 

    /*
    using the result from the first closure (a function is returned) 
    assign and run the sub closure that carries the 
    individual variable for button count and assign to the click handlers 
    */
    document.getElementById("button1").addEventListener("click" , buttonHandler() );
    document.getElementById("button2").addEventListener("click" , buttonHandler() );
    document.getElementById("button3").addEventListener("click" , buttonHandler() );

    // Now that buttonHandler has served its purpose it can be deleted if needs be
    buttonHandler = null;
});



function buttonsCount() {
    /* 
        First closure level 
        - totalButtonCount acts as a sort of global counter to count any button presses
    */
    var totalButtonCount = 0;

    return  function () {
        //second closure level
        var myButtonCount = 0;

        return function (event) {
            //actual function that is called on the button click
            event.preventDefault();
            /*  
               increment the button counts.
               myButtonCount only exists in the scope that is 
               applied to each event handler, therefore acts 
               to count each button individually whereas because 
               of the first closure totalButtonCount exists at 
               the scope just outside, so maintains a sort 
               of static or global variable state 
            */

            totalButtonCount++;
            myButtonCount++;

            /* 
                do something with the values ... fairly pointless 
                but it shows that each button contributes to both 
                it's own variable and the outer variable in the 
                first closure 
            */
            console.log("Total button clicks: "+totalButtonCount);
            console.log("This button count: "+myButtonCount);
        }
    }
}

</script>
</head>

<body>
    <a href="#" id="button1">Button 1</a>
    <a href="#" id="button2">Button 2</a>
    <a href="#" id="button3">Button 3</a>
</body>
</html>

Если вам нравится концепция создания экземпляра класса в объектно-ориентированном смысле (т. е. для создания объекта этого класса), то вы близки к пониманию закрытий.

Подумайте об этом так: когда вы создаете экземпляр двух объектов Person, вы знаете, что переменная-член класса «Имя» не делится между экземплярами; каждый объект имеет свою «копию». Аналогично, когда вы создаете замыкание, свободная переменная («calledCount» в вашем примере выше) привязана к «экземпляру» функции.

Я думаю, что ваш концептуальный скачок немного затруднен тем фактом, что каждая функция / замыкание, возвращаемая функцией warnUser (в стороне: это функция более высокого порядка ), связывает «calledCount» с тем же начальным значением (0), тогда как часто при создании замыканий более полезно передавать разные инициализаторы в функцию более высокого порядка, подобно передаче разных значений конструктору класса.

Итак, предположим, когда «calledCount» достигает определенного значения, которое вы хотите завершить сеанс пользователя; вам могут потребоваться разные значения для этого в зависимости от того, поступает ли запрос из локальной сети или большого плохого интернета (да, это надуманный пример). Чтобы достичь этого, вы могли передавать разные начальные значения для callCount в warnUser (т. Е. -3 или 0?).

. Часть проблемы с литературой - это номенклатура, используемая для их описания («лексический охват») , "свободные переменные"). Не позволяйте этому обмануть вас, затворы более просты, чем казалось ... prima facie; -)

Предположим, вы хотите подсчитать количество нажатий кнопки пользователя на веб-странице. Для этого вы вызываете функцию на onclick событии кнопки, чтобы обновить счетчик переменной

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

Теперь может быть много таких подходов, как:

1) Вы может использовать глобальную переменную и функцию для увеличения счетчика:

var counter = 0;

function updateClickCount() {
    ++counter;
    // do something with counter
}

Но ошибка заключается в том, что любой скрипт на странице может изменять счетчик, не вызывая updateClickCount().

2) Теперь вы можете подумать об объявлении переменной внутри функции:

function updateClickCount() {
    var counter = 0;
    ++counter;
    // do something with counter
}

Но, Эй! Каждый раз, когда вызывается функция updateClickCount(), счетчик снова устанавливается на 1.

3) Размышление о вложенных функциях?

Вложенные функции имеют доступ к области «выше». В этом примере внутренняя функция updateClickCount() имеет доступ к переменной счетчика в родительской функции countWrapper()

function countWrapper() {
    var counter = 0;
    function updateClickCount() {
    ++counter;
    // do something with counter
    }
    updateClickCount();    
    return counter; 
}

. Это могло бы решить дилемму счетчика, если бы вы могли достичь функции updateClickCount() извне, и вам также нужно найти способ выполнить counter = 0 только один раз не каждый раз.

4) Закрытие для спасения! (функция самозапуска):

 var updateClickCount=(function(){
    var counter=0;

    return function(){
     ++counter;
     // do something with counter
    }
})();

Функция самозапуска только запускается один раз. Он устанавливает counter в ноль (0) и возвращает выражение функции.

Таким образом updateClickCount становится функцией. «Замечательная» часть состоит в том, что она может обращаться к счетчику в родительском пространстве.

Это называется закрытием JavaScript. Это дает возможность для функции иметь переменные [ private .

counter защищен областью анонимной функции и может быть изменен только с помощью добавления функция!

Более яркий пример закрытия:

  <script>
    var updateClickCount=(function(){
    var counter=0;

    return function(){
    ++counter;
     document.getElementById("spnCount").innerHTML=counter;
    }
  })();
</script>

<html>
 <button onclick="updateClickCount()">click me</button>
  <div> you've clicked 
    <span id="spnCount"> 0 </span> times!
 </div>
</html>