ИИФЭ в JS

JavaScript

IIFE

IIFE: немедленно вызываемое функциональное выражение, которое преобразуется в немедленно вызываемое функциональное выражение. То есть функция вызывается сразу же при объявлении функции.

Объявления обычных функций и вызовы функций

function bar() {
    var a = 10;
    console.log(a);
}
bar(); // 函数调用

Объявление и вызов функции IIFE

(function foo(){
    var a = 10;
    console.log(a);
})();

Во-первых, обратите внимание, что функция IIFE состоит из пары) будет обернута декларация функции (выражения. JS заставляет компилятор больше не думать, что это объявление функции, а IIFE, а именно немедленно выполнять выражения функции. Но оба достигают цели одинаково, оба объявляют функцию, а затем вызывают эту функцию.

Зачем использовать IIFE

Если это просто немедленное выполнение функции, очевидно, что преимущества IIFE ограничены. На самом деле появление IIFE призвано компенсировать недостатки JS с точки зрения масштаба: JS имеет только глобальный масштаб, масштаб функций и масштаб блоков, начиная с ES6. По сравнению с другими популярными объектно-ориентированными языками видно, насколько JS хрупок с точки зрения контроля доступа! Так как же добиться изоляции области видимости? В JS только функции могут обеспечить изоляцию области действия, поэтому, если вы хотите изолировать определения переменных, функций и т. д. в фрагменте кода, вы можете только инкапсулировать этот фрагмент кода в функцию.

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

область действия блока

В ES5 нет понятия области блока. только глобальная область действия и область действия функции

for (var i = 0; i< 10; i++) {
    console.log(i);
}
console.log(i); // 10

Это место можно увидеть в переменной цикла for, я глобальная переменная, цикл for завершается после этого, к которому у меня все еще есть доступ. я не был уничтожен

块级作用域也可以称为私有作用域。 That is to say, it is only defined in the statement block of the for loop. Once the loop ends, the variable i will be destroyed. In ES5, we mainly use the anonymous function [IIFE] to achieve the effect of block-level объем.

IIFE реализует изоляцию области
// 函数声明语句写法
function test() {};
test();

// 函数表达式写法
var test = function(){};
test();

[Примечание] Двигатель JavaScript предусматривает, что если ключевое слово функции появится в начале, будет интерпретироваться как оператор декларации функций; и после того, как функция не будет объявлена ​​с скобками (анонимная функция - это объявление функции). Однако после того, как экспрессия функции может сопровождаться скобками. Он может быть преобразован в функцию функции объявления функции. Переменные в функции немедленного выполнения определены сразу

(function(){
    console.log('123');
}());

(function(){
    console.log('123');
})();

(function foo(){
    console.log('123');
})();
точка с запятой

(function(){
    console.log('a');
})()

(function(){
    console.log('b');
})()

В этом фрагменте кода может отображаться только a, а b сообщит об ошибке

TypeError: (intermediate value)(...) is not a function

Без точки с запятой приведенный выше контент будет интерпретироваться JS как:

(function(){
    console.log('a');
})()(function(){
    console.log('b');   
 })()

Мы можем изменить

(function(){
    console.log('a');
})()

(function(){
    console.log('b');
}())

Преимущества ИИФЭ

  • Создание области на уровне блока (частной) позволяет избежать добавления переменных и функций в глобальную область, тем самым избегая конфликтов имен для глобальных переменных и функций при разработке для нескольких человек.
  • Любые переменные и функции, определенные в IIFE, будут уничтожены в конце выполнения.Этот подход может уменьшить проблему памяти, занимаемой замыканиями, поскольку нет ссылок на анонимные функции. Как только функция завершает выполнение, ее цепочка областей видимости может быть немедленно уничтожена.

Добро пожаловать в общественное число WeChat

Категории