В этой статье анализируется концепция и использование закрытия JavaScript. Поделитесь этим для вашей ссылки. Детали следующие:
Когда дело доходит до закрытия, я считаю, что все слышали о них. Позвольте мне сказать вам мое простое понимание ниже.
Честно говоря, существует не так много сценариев для написания закрытия вручную в повседневной работе, но и сторонние фреймворки и компоненты, используемые в проекте, используются более или менее закрытия.
Поэтому очень необходимо понять закрытие. хе -хе ...
1. Что такое закрытие
Короче говоря, это функция, которая может считывать переменные внутри других функций.
Из -за объема переменных JS внутренние переменные не могут быть доступны извне, а внешние переменные могут быть внешне.
2. Используйте сценарии
1. Реализуйте частных членов.
2. Защитите пространства имен, чтобы избежать загрязнения глобальных переменных.
3. Кэш переменные.
Давайте сначала посмотрим на пример инкапсуляции:
Скопируйте код следующим образом: var person = function () {
// Область переменной находится внутри функции и не может быть доступен снаружи
var name = "по умолчанию";
возвращаться {
getName: function () {
вернуть имя;
},
setName: function (newName) {
name = newName;
}
}
} ();
console.log (person.name); // Прямой доступ, результат: не определен
console.log (person.getName ()); // Результат: по умолчанию
console.log (person.setname ("langjt"));
console.log (person.getName ()); // Результат: langjt
Давайте посмотрим на общие замыкания в петях, чтобы решить проблему ссылки на внешние переменные:
Кода кода следующая: var ali = document.getElementsbytagname ('li');
for (var i = 0, len = ali.length; i <len; i ++) {
ali [i] .onclick = function () {
оповещение (i); // Независимо от того, какой элемент вы нажимаете, всплывающее значение является LEN, что указывает на то, что значение I здесь и значение I Printed After-это то же самое.
};
}
После использования закрытия:
Кода кода следующая: var ali = document.getElementsbytagname ('li');
for (var i = 0, len = ali.length; i <len; i ++) {
ali [i] .onclick = (function (i) {
return function () {
оповещение (i); // Нажмите на элемент <li> в это время, и появится соответствующий подписчик.
}
})(я);
}
3. Что следует отметить
1. Утечка памяти
Поскольку закрытие приведет к тому, что все переменные в функции хранятся в памяти, а потребление памяти очень большое, закрытие нельзя злоупотреблять, в противном случае это вызовет проблемы с производительностью веб -страницы.
например:
Скопируйте код следующим образом: function foo () {
var Odiv = document.getElementById ('j_div');
var id = Odiv.id;
Odiv.onclick = function () {
// предупреждение (ODIV.ID); Здесь есть круговая ссылка. ODIV все еще находится в памяти после того, как страница IE Low Version закрыта. Таким образом, кэшируйте примитивные типы вместо объектов как можно больше.
оповещение (id);
};
ODIV = NULL;
}
2. Переменное именование
Если переменная внутренней функции и имя переменной внешней функции одинаковы, внутренняя функция больше не может указывать на переменную с тем же именем, что и внешняя функция.
например:
Скопируйте код следующим образом: function foo (num) {
возврат функции (num) {
console.log (num);
}
}
var f = new Foo (9);
f (); // неопределенный
Фактически, приведенное выше использование называется функцией Currying, которая является методикой преобразования функции, которая принимает несколько параметров в функцию, которая принимает один параметр (первый параметр исходной функции), и возвращает новую функцию, которая принимает оставшиеся параметры и возвращает результат. По сути, он также использует функции, которые можно кэшировать, например:
Скопируйте код следующим образом: var adder = function (num) {
вернуть функцию (y) {
вернуть num+y;
};
};
var inc = add (1);
var dec = add (-1);
// Inc, DEC теперь является двумя новыми функциями, которые используются для передачи значения параметра (+/) 1
оповещение (Inc (99)); // 100
оповещение (дек (101)); // 100
предупреждение (Adder (100) (2)); // 102
предупреждение (Adder (2) (100)); // 102
Например, в исходном коде Seajs Alibaba Yubo:
Скопируйте код следующим образом:/**
* util -lang.js - минимальное улучшение языка
*/
Функция istype (type) {
возврат функции (obj) {
return {} .toString.call (obj) == "[Object" + type + "]"
}
}
var isobject = istype ("объект");
var Issstring = istype ("String");
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.