Закрытия JavaScript

Рубрика: JavaScript 101

Закрытия - расширение понятия контекста. С закрытиями JavaScript у функций есть доступ к переменным, которые были доступны в контексте, где функция создавалась. Если это кажется запутывающим, не волнуйтесь: закрытия обычно лучше всего поняты на примере.

Как было описано в статье Функции JavaScript настоящей рубрики, у функций есть доступ к измененным значениям переменных. То же самые поведение существует с функциями, определяемыми внутри циклов – функция "видит" изменение в значении переменной, даже после того, как функция определяется, что выражается в том, что функция всегда ссылается на последнее значение, сохраненное в переменной.

Пример

// Каждая функция выполняемая внутри
    //цикла будет ссылаться
// на последнее значение, сохраненное в i (5).
// Это не будет вести себя так, как мы хотели - каждые
//     100 миллисекунд, 5 будет показано в предупреждении
for ( var i = 0; i < 5; i++ ) {
    setTimeout(function() {
        alert( i );
    }, i * 100 );
}

Попробуйте Сами »

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

Пример

// Использование закрытия, чтобы создать новый частный контекст
// решение: “закроем” значение i внутри
// createFunction, так, что оно не будет меняться
var createFunction = function( i ) {
    return function() {
        alert( i );
    };
};

for ( var i = 0; i < 5; i++ ) {
    setTimeout( createFunction( i ), i * 100 );
}

Попробуйте Сами »

Закрытия могут также использоваться, чтобы решить вопросы с ключевым словом this, которое является уникальным для каждого контекста:

Пример

// Использование закрытия для доступа к внутренным
// и внешним экземплярам объекта одновременно.
var outerObj = {
    myName: "внешний",
    outerFunction: function() {
        // обеспечим ссылку на outerObj
        // через закрытие innerFunction
        var self = this;
        var innerObj = {
            myName: "внутренний",
            innerFunction: function() {
                console.log( self.myName, this.myName );
                  // "внешний внутренний"
            }
        };

        innerObj.innerFunction();

        console.log( this.myName ); // "внешний"
    }
};

outerObj.outerFunction();

Попробуйте Сами »

Далее: Служебные Методы jQuery

Смотрите также

Комментарии

Написать