1. Анонимные функции
Функции являются наиболее гибким объектом в JavaScript. Здесь мы просто объясняем цель его анонимных функций. Анонимные функции: это функции без имен функций.
1.1 Определение функции. Во -первых, давайте кратко представим определение функции. Это может быть приблизительно разделено на три способа.
Первый: это также самый распространенный
Кода -копия выглядит следующим образом:
функция двойной (x) {
вернуть 2 * x;
}
Второй метод: этот метод использует конструктор функции, который использует как список параметров, так и корпус функции в качестве строк, что очень неудобно и не рекомендуется.
Кода -копия выглядит следующим образом:
var Double = новая функция ('x', 'return 2 * x;');
Третий тип:
var double = function (x) {return 2* x; }
Обратите внимание, что функция справа от "=" является анонимной функцией. После создания функции функция присваивается квадрату переменной.
1.2 Создание анонимных функций
Первый метод: определите квадратную функцию, упомянутую выше, которая также является одним из наиболее часто используемых методов.
Второй метод:
Кода -копия выглядит следующим образом:
(function (x, y) {
оповещение (x + y);
})(двадцать три);
Здесь создается анонимная функция (в первом кронштейне), а второй кронштейн используется для вызова анонимной функции и передачи параметров.
2. Закрытие
Английское слово для закрытия - это закрытие, которое является очень важной частью JavaScript, поскольку использование закрытия может значительно уменьшить объем нашего кода, сделать наш код более ясным и т. Д. Короче говоря, функции очень мощные.
Смысл закрытия: чтобы выразить это, закрытие - это функции гнездования. Внутренняя функция может использовать все переменные внешней функции, даже если внешняя функция была выполнена (это включает в себя цепь схватки JavaScript).
Пример 1
Кода -копия выглядит следующим образом:
function checkcloure () {
var str = 'дождь-мужчина';
settimeout (
function () {alert (str); } // Это анонимная функция
, 2000);
}
CheckClosure ();
Этот пример выглядит очень просто. После тщательного анализа его процесса выполнения все еще есть много точек знаний: выполнение функции контроля является мгновенным (возможно, это заняло всего 0,00001 миллисекунд), переменная STR создается в организме функции контроля. После того, как контрольный уровень выполнен, STR не выпущен. Это связано с тем, что анонимная функция в SetTimeout имеет ссылку на STR. STR выпускается только через 2 секунды.
Пример 2, оптимизируйте код
Кода -копия выглядит следующим образом:
Функция fortimeout (x, y) {
оповещение (x + y);
}
Функция задержка (x, y, time) {
setTimeout ('fortimeout (' + x + ',' + y + ')', time);
}
/**
* Вышеуказанная функция задержки очень трудно читать, и ее нелегко написать, но если вы используете закрытие, код может быть более четким
* Функция задержка (x, y, time) {
* setTimeout (
* function () {
* fortimeout (x, y)
*}
* , время);
*}
*/
3. Приведите пример
Самое большое использование анонимных функций заключается в создании закрытия (одной из особенностей языка JavaScript), а также для создания пространств имен для уменьшения использования глобальных переменных.
Пример 3:
Кода -копия выглядит следующим образом:
var oevent = {};
(function () {
var addEvent = function () { / *Реализация кода опущена * /};
function RemoveEvent () {}
oevent.addevent = addevent;
oevent.removeevent = removerevent;
}) ();
В этом коде функции AddEvent и RemoveEvent являются локальными переменными, но мы можем использовать его через глобальную переменную oevent, что значительно уменьшает использование глобальных переменных и повышает безопасность веб -страницы. Мы хотим использовать этот код: oevent.addevent (document.getElementById ('box'), 'click', function () {});
Пример 4:
Кода -копия выглядит следующим образом:
var rainman = (function (x, y) {
вернуть x + y;
})(двадцать три);
/**
* Это также может быть записано в следующей форме, потому что первый кронштейн только помогает нам читать, но следующий формат письма не рекомендуется.
* var rainman = function (x, y) {
* вернуть x + y;
* }(двадцать три);
*/
Здесь мы создаем переменную дождь и инициализируем его до 5, вызывая анонимную функцию напрямую. Этот трюк иногда очень практичен.
Пример 5:
Кода -копия выглядит следующим образом:
var over = null;
(function () {
var One = 1;
функция inner () {
один += 1;
предупреждение (один);
}
внешний = внутренний;
}) ();
внешний (); // 2
внешний (); // 3
внешний (); // 4
Переменная в этом коде является локальной переменной (поскольку она определена в функции), поэтому внешняя часть недоступна. Но здесь мы создаем внутреннюю функцию, которая может получить доступ к переменной; а также ссылайтесь на глобальную переменную внешнюю во внутреннюю, поэтому три вызова для внешнего появится на дополнительном результате.
4. Обратите внимание
4.1 Закрытие позволяет функциям внутренних слоев обращаться к переменным в родительских функциях, но переменная-это конечное значение
Пример 6:
Кода -копия выглядит следующим образом:
/**
* <body>
* <ul>
* <li> один </li>
* <li> Два </li>
* <li> Три </li>
* <li> один </li>
* </ul>
*/
var lists = document.getElementsbytagname ('li');
для (var i = 0, len = lists.length; i <len; i ++) {
списки [i] .onmouseover = function () {
оповещение (i);
};
}
Вы обнаружите, что когда мышь пройдет через каждый <li & rt; Элемент, он всегда появляется 4 вместо индекса элемента, который мы ожидаем. Почему это? Меры предосторожности были обсуждены (окончательное значение). Очевидно, что это объяснение слишком простое. Когда событие MouseOver вызывает функцию прослушивания, сначала посмотрите, определяется ли я внутри Anonymous Function (function () {alert (i);}), и результатом является то, что она не определена; Поэтому он будет смотреть вверх, и результат поиска состоит в том, что он был определен, и значение I составляет 4 (значение I после цикла); Итак, в конце концов, каждое всплывающее окно 4.
Решение 1:
Кода -копия выглядит следующим образом:
var lists = document.getElementsbytagname ('li');
для (var i = 0, len = lists.length; i <len; i ++) {
(function (index) {
списки [index] .onmouseover = function () {
предупреждение (индекс);
};
})(я);
}
Решение 2:
Кода -копия выглядит следующим образом:
var lists = document.getElementsbytagname ('li');
для (var i = 0, len = lists.length; i <len; i ++) {
списки [i]. $$ index = i; // Записать индекс, связав атрибут индекса $$ на элементе DOM
списки [i] .onmouseover = function () {
предупреждение (это. $$ Index);
};
}
Решение три:
Кода -копия выглядит следующим образом:
Функция EventListener (List, Index) {
list.onmouseover = function () {
предупреждение (индекс);
};
}
var lists = document.getElementsbytagname ('li');
для (var i = 0, len = lists.length; i <len; i ++) {
EventListener (списки [i], i);
}
4.2 Утечка памяти
Использование закрытия очень легко вызвать утечку памяти браузера. В тяжелых случаях браузер будет мертв. Если вы заинтересованы, пожалуйста, см.