Зачем использовать оператор `+` (плюс) или `!` (логическое НЕ) в IIFE?

Я знаю, что типичная форма IIFE:

(function(){/* code */})()

Однако недавно я нашел новый:

!function(){/* code */}()
+function(){/* code */}()

которые также работают как IIFE.

Я думаю, что в первом ! делает значение логическим, поэтому код эквивалентен true(), а во втором + делает значение числом, поэтому код такой же, как NaN()? Но true() и NaN() не могут работать, в то время как две вышеупомянутые формы работают хорошо.

Как работают эти две формы IIFE?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
34
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

В случаях !function() {}() и +function() {}() JavaScript сначала оценит правую часть данного оператора/IIFE, а затем приведет возвращаемое значение IIFE к логическому типу в случае ! или к типу числа в случае +. Если IIFE возвращает логическое значение, ! отменяет возвращаемое значение.

Пример

console.log(
  !function() {
    return "something";
  }()
); 

/**
!function() {
  return "something";
}()

evaluates to

!"something" and not true() or false()

lastly !"something" is equivalent to false
*/

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

Добавляя к ключевому слову функции префикс унарного оператора, такого как ! или +, или любого другого унарного оператора (~, -, void, ... и т. д.), вы избегаете того, чтобы function интерпретировался как утверждение.

Также будет работать назначение:

var x = function(){/* code */}()

Или литерал массива:

[function(){/* code */}()]

Или передать его в качестве аргумента (дешевой) функции:

Object(function(){/* code */}())

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

0,function(){/* code */}()

Ключевое слово function имеет дуэльную цель. В зависимости от контекста, в котором вы его используете, он либо запускает функцию декларация, либо функцию выражение.

Функция декларации объявляет (поднятую) локальную переменную в области действия текущей функции и назначает функцию этой переменной.

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

Если вы попытаетесь выполнить функцию декларация с помощью (), произойдет ошибка.

function myFunction() {
    console.log("Example");
}();

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

Таким образом, чтобы использовать IIFE, вы должны выполнить что-нибудь, чтобы изменить контекст, в котором появляется ключевое слово function, чтобы оно использовалось для создания выражения вместо объявления.

Классический способ — заключить функцию в круглые скобки.

(function myFunction() {
    console.log("Example");
})();

Но что-либо, который делает его выражением, будет работать.

Этого можно добиться, поместив оператор (например, ! или +) перед ключевым словом function.

В то время как ! возьмет возвращаемое значение вызова IIFE и превратит его в логическое значение с отрицанием, а + превратит его в число это не главное. Слева от оператора ничего нет, поэтому это значение отбрасывается.

Это просто способ заставить ключевое слово function создать функцию выражение, которую можно превратить в IIFE.


Обратите внимание, что ключевые преимущества IIFE также обеспечиваются переменными с областью видимости блока (let и const) и модулями JavaScript, поэтому нет особых причин использовать IIFE в 2022 году.

Другие вопросы по теме