Подробное объяснение написания и функции закрытия в JavaScript

1. Что такое закрытие

Закрытие - это функция, которая имеет разрешение на доступ к переменным в другой области функции.

Проще говоря, JavaScript позволяет использовать внутренние функции, то есть определения функций и выражения функций расположены в организме функции другой функции. Более того, эти внутренние функции могут получить доступ ко всем локальным переменным, параметрам и другим внутренним функциям, объявленным во внешней функции, где они находятся. Когда одна из этих внутренних функций называется вне внешней функции, содержащей их, образуется закрытие.

2. Объем переменных

Чтобы понять закрытие, вы должны сначала понять объем переменных.

Существует только два типа областей переменных: глобальные переменные и локальные переменные.

Особенностью языка JavaScript является то, что глобальные переменные могут быть прочитаны непосредственно в функциях.

Переменные внешних функций могут быть доступны во внутренней функции, поскольку цепочка областей внутренней функции содержит область внешней функции;

Его также можно понять как: диапазон действия внутренней функции излучается в диапазоне действия внешней функции;

 var n = 999; function f1 () {alert (n);} f1 (); // 999

С другой стороны, локальные переменные внутри функции, естественно, не считываются вне функции.

 Функция f1 () {var n = 999;} alert (n); // ошибка

Здесь есть место, где нужно отметить. При провозглашении переменных внутренне вы должны использовать команду VAR. Если нет, вы на самом деле объявите глобальную переменную!

 Функция f1 () {n = 999;} f1 (); alert (n); // 999

3. Несколько способов писать и использовать закрытие

3.1. Добавьте некоторые свойства в функцию

 Функциональный круг (r) {this.r = r; } Circle.pi = 3.14159; Circle.prototype.area = function () {return circle.pi * this.r * this.r; } var c = новый круг (1.0); оповещение (C.Area ()); //3.14159

3.2. Объявите переменную и назначьте функцию переменной в качестве значения.

 var circle = function () {var obj = new Object (); obj.pi = 3,14159; obj.area = function (r) {return this.pi * r * r; } вернуть obj; } var c = new Circle (); оповещение (C.Area (1,0)); //3.14159

3.3. Этот метод используется чаще и является наиболее удобным. var obj = {} должен объявить пустой объект

 var circle = {"pi": 3.14159, "область": function (r) {return this.pi * r * r; }}; Alert (Circle.area (1.0)); // 3.14159

4. Основная функция закрытия

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

4.1. Как читать локальные переменные снаружи?

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

То есть определить другую функцию внутри функции.

 Функция f1 () {var n = 999; функция f2 () {alert (n); // 999}}

В приведенном выше коде функция F2 включена внутри функции F1, а все локальные переменные внутри F1 видны для F2. Но наоборот невозможно. Локальные переменные внутри F2 невидимы для F1. Это структура «цепочка», уникальная для языка JavaScript. Дочерние объекты будут искать вверх уровнем по уровню для всех переменных родительских объектов. Следовательно, все переменные родительского объекта видны для дочернего объекта, в противном случае это не так.

Поскольку F2 может читать локальные переменные в F1, если F2 используется в качестве возврата, не можем ли мы прочитать ее внутренние переменные вне F1?

 Функция f1 () {var n = 999; функция f2 () {alert (n); } return f2;} var result = f1 (); result (); // 999

4.2. Как всегда сохранить значение переменной в памяти?

 Функция f1 () {var n = 999; nadd = function () {n+= 1} function f2 () {alert (n); } return f2;} var result = f1 (); result (); // 999nadd (); result (); // 1000

В этом коде результат фактически является функцией закрытия F2. Всего он работает дважды, первое значение составляет 999, а второе значение составляет 1000. Это доказывает, что локальная переменная n в функции F1 сохранилась в памяти и не полностью очищена после вызова F1.

Почему это происходит? Причина в том, что F1 является родительской функцией F2, а F2 назначается глобальной переменной, которая заставляет F2 всегда в памяти, а существование F2 зависит от F1. Следовательно, F1 всегда находится в памяти и не будет переработана механизмом сбора мусора после завершения вызова.

Другая примечательная точка в этом коде заключается в том, что строка «nadd = function () {n+= 1}» сначала используется перед NADD, поэтому NADD является глобальной переменной, а не локальной переменной. Во -вторых, значение NADD является анонимной функцией, и сама эта анонимная функция также является закрытием, поэтому NADD эквивалентен сеттеру, который может работать на локальных переменных внутри функции вне функции.

5. Закрытие и этот объект

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

 var name = "the Window"; var object = {name: "my object", getNamefun: function () {return function () {return this.name;};}}; alert (object.getNamefun () {}); // "Окно" (в не строгих режиме)

Сохраните этот объект во внешней области в переменной, к которой можно получить доступ к закрытию, и закрытие может получить доступ к объекту. Код заключается в следующем:

 var name = "the Window"; var object = {name: "my object", getNamefun: function () {var that = this; return function () {return that.name;};}}; alert (object.getnamefun () {}); // "Мой объект"

6. Закрытие и утечки памяти

В частности, если элемент HTML сохраняется в объеме закрытия, это означает, что элемент не может быть уничтожен. следующее:

 function usdesshandler () {var element = document.getelementbyid ("someelement"); element.onclick = function () {alert (element.id);}}

Приведенный выше код создает закрытие в качестве обработчика событий элемента элемента, и это закрытие создает круговую ссылку. Поскольку анонимные функции сохраняют ссылку на Active Object of ReadyHandler (), невозможно уменьшить количество ссылок на элемент. До тех пор, пока существует анонимная функция, количество ссылок на элемент составляет не менее 1, поэтому память, которую она занимает, не будет переработана.

Решить проблемы с внутренними переработкой, переписывая код:

 function usdesshandler () {var element = document.getelementbyid ("someelement"); var id = element.id; element.onclick = function () {alert (id);} element = null;}

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

7. Примечания об использовании закрытия

1) Поскольку закрытие приведет к тому, что все переменные в функции хранятся в памяти, а потребление памяти очень большое, закрытие нельзя злоупотреблять, в противном случае это вызовет проблемы с производительностью веб -страницы и может привести к утечке памяти в IE. Решение состоит в том, чтобы удалить все локальные переменные, которые не используются перед выходом на функцию.

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

Выше приведено подробное объяснение написания и функции закрытия в JavaScript, представленном вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!