Путаница в том, как работает IIFE - PullRequest
Новая
       10

Путаница в том, как работает IIFE

3 голосов
/ 10 мая 2019

Я новичок в JavaScript и столкнулся с путаницей в отношении того, как IIFE работает в JavaScript.То есть я понял, что он используется в основном для того, чтобы экранировать переменную, назначенную глобальной переменной, чтобы избежать коллизий.Но вот в чем дело, скажем, у нас есть код вроде: 

var number = 7;

(function() {
  var number = 7;
  alert(number);
})();
//In this code collision does not happen due to IIFE

Но что, если я напишу: 

var number = 7;

function num() {
  var number = 7;
  alert(number);
}

/*In this code there does not happen collisions and 
number variable is not assigned to the global scope as well. So, why use IIFE?*/
num();

Ответы [ 2 ]

3 голосов
/ 10 мая 2019

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

Другая важная вещь, которую использует IIFE, заключается в том, что он позволяет вашему коду немедленно запускать без вмешательства чужого кода . Кроме того, IIFE запускается без вызова функции по имени , которая предположительно существует в глобальной области действия .

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

... вы защищаете свой код от кого-то, кто может случайно или глобально изменить ваши глобальные переменные!

Ознакомьтесь с этой средней статьей по Освоение IIFEs для получения дополнительной информации.

Обновление

Хороший пример того, почему ваш второй пример может негативно повлиять на что-то, таков:

Если вы импортируете какую-то библиотеку, и у нее есть метод с именем num (который библиотека использовала для внутренних целей) в глобальной области (поскольку он не использовал IIFE), ваш второй пример перезапишет этот метод и сделать его непригодным для использования в библиотеке.

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

2 голосов
/ 10 мая 2019

Вы делаете большую путаницу. IIFE не влияет на работу локальных и глобальных переменных.

Нет разницы между вашими двумя примерами относительно глобальных и локальных переменных.

Оба объявляют глобальную переменную number и инициализируют ее с 7 (вне функции), а также переменную, которая также называется number и инициализируется также с 7 внутри функции. Переменная внутри функции «покрывает» глобальную; глобальная переменная number не может использоваться внутри функции (просто используя имя number), а вызов alert() использует локальную переменную.

Вы можете легко проверить это, используя следующие варианты кода: 

var number = 7;

(function() {
  var number = 6;
  alert('local variable: ' + number);
})();
alert('global variable: ' + number);

и 

var number = 7;

function num() {
  var number = 6;
  alert('local variable: ' + number);
}
num();
alert('global variable: ' + number);

Два приведенных выше фрагмента кода имеют почти идентичные эффекты. Они объявляют функцию, а затем выполняют ее.

Единственное отличие состоит в том, что второй создает функцию с именем num в глобальном пространстве имен.

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

...