Что такое конструкция (function () {}) () в JavaScript? - PullRequest
708 голосов
/ 22 ноября 2011

Раньше я знал, что это значит, но сейчас я борюсь ...

Это в основном говорит document.onload?

(function () {

})();

Ответы [ 23 ]

783 голосов
/ 22 ноября 2011

Это выражение для немедленного вызова функции или IIFE для краткости. Он выполняется сразу после его создания.

Он не имеет никакого отношения к любому обработчику событий (например, document.onload).
Рассмотрим часть в первой паре скобок: (<b>function(){}</b>)(); .... это регулярное выражение функции. Затем посмотрите на последнюю пару (function(){})<b>()</b>;, это обычно добавляется в выражение для вызова функции; в этом случае наше предыдущее выражение.

Этот шаблон часто используется при попытке избежать загрязнения глобального пространства имен, потому что все переменные, используемые внутри IIFE (как и в любой другой нормальной функции), не видны вне его области действия.
Вот почему, может быть, вы перепутали эту конструкцию с обработчиком событий для window.onload, потому что он часто используется так:

(function(){
    // all your code here
    var foo = function() {};
    window.onload = foo;
    // ...
})();
// foo is unreachable here (it’s undefined)

Исправление, предложенное Guffa :

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

Обновление Поскольку это довольно популярная тема, стоит упомянуть, что IIFE также можно написать с помощью функции стрелки ES6 (например, Gajus указал в комментарии ):

((foo) => foo)('foo value')
106 голосов
/ 22 ноября 2011

Это просто анонимная функция, которая выполняется сразу после ее создания.

Это как если бы вы присвоили ее переменной и использовали сразу после нее, только без переменной:

var f = function () {
};
f();

В jQuery есть похожая конструкция, о которой вы можете подумать:

$(function(){
});

Это краткая форма привязки события ready:

$(document).ready(function(){
});
47 голосов
/ 29 мая 2014

Вызов функции с немедленным вызовом (IIFE) немедленно вызывает функцию.Это просто означает, что функция выполняется сразу после завершения определения.

Еще три распространенных формулировки:

// Crockford's preference - parens on the inside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
}());

//The OPs example, parentheses on the outside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

//Using the exclamation mark operator
//https://stackoverflow.com/a/5654929/1175496
!function() {
  console.log('Welcome to the Internet. Please follow me.');
}();

Если для возвращаемого значения нет особых требований, то мы можемнаписать:

!function(){}();  // => true
~function(){}(); // => -1
+function(){}(); // => NaN
-function(){}();  // => NaN

В качестве альтернативы это может быть:

~(function(){})();
void function(){}();
true && function(){ /* code */ }();
15.0, function(){ /* code */ }();

Вы даже можете написать:

new function(){ /* code */ }
31.new function(){ /* code */ }() //If no parameters, the last () is not required
31 голосов
/ 22 ноября 2011

Он объявляет анонимную функцию, затем вызывает ее:

(function (local_arg) {
   // anonymous function
   console.log(local_arg);
})(arg);
27 голосов
/ 22 ноября 2011

То есть выполнить немедленно.

так что если я сделаю:

var val = (function(){
     var a = 0;  // in the scope of this function
     return function(x){
         a += x;
         return a;
     };
})();

alert(val(10)); //10
alert(val(11)); //21

Скрипка: http://jsfiddle.net/maniator/LqvpQ/


Второй пример:

var val = (function(){
     return 13 + 5;
})();

alert(val); //18
21 голосов
/ 30 октября 2016

Эта конструкция называется Выражение немедленного вызова функции (IIFE) , что означает, что она выполняется немедленно. Думайте об этом как о функции, вызываемой автоматически, когда интерпретатор достигает этой функции.

Наиболее распространенный вариант использования:

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

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

(function () { 
    var count = 10;
})();
console.log(count);  // Reference Error: count is not defined

ES6 Альтернатива (рекомендуется)

В ES6 теперь у нас могут быть переменные, созданные с помощью let и const. Оба они имеют блочную область (в отличие от var, которая является функциональной областью).

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

{ 
    let count = 10;
};
console.log(count);  // Reference Error: count is not defined

В этом примере мы использовали let для определения переменной count, которая ограничивает count блоком кода, который мы создали с помощью фигурных скобок {...}.

Я называю это Curly Jail.

13 голосов
/ 19 мая 2016
(function () {
})();

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

JavaScript до ECMAScript 6 с использованием лексической области видимости, IIFE используется для моделирования области видимости блока.(С помощью ECMAScript 6 можно определить объем блока с введением ключевых слов let и const.) Справочник по проблеме с лексической областью видимости

Имитация масштабирования блока с помощью IIFE

Преимущество в производительности от использования IIFE заключается в возможности передавать обычно используемые глобальные объекты, такие как окно, документ и т. Д., В качестве аргумента за счет уменьшения поиска в области. (Помните, что Javascript ищет свойства в локальной области видимости и поднимает цепочку до глобальной области видимости.).Чтобы получить доступ к глобальным объектам в локальной области, сократите время поиска, как показано ниже.

(function (globalObj) {
//Access the globalObj
})(window);
11 голосов
/ 22 ноября 2011

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

(...)();

Это вызов функции.Внутри скобок у вас есть:

function() {}

Это анонимная функция.Все, что объявлено с var внутри конструкции, будет видно только внутри той же конструкции и не будет загрязнять глобальное пространство имен.

9 голосов
/ 15 мая 2018

Это выражение немедленного вызова функции в Javascript:

Чтобы понять IIFE в JS, давайте разберем его:

  1. Выражение : что-то, что возвращает значение
    Пример. Попробуйте выполнить следующие действия в консоли Chrome. Это выражения в JS.
a = 10 
output = 10 
(1+3) 
output = 4
  1. Выражение функции :
    Пример:
// Function Expression 
var greet = function(name){
   return 'Namaste' + ' ' + name;
}

greet('Santosh');

Как работает выражение функции:
- Когда механизм JS запускается впервые (контекст выполнения - фаза создания), эта функция (справа от = выше) не выполняется и не сохраняется в памяти. Переменной 'greet' присваивается значение 'undefined' механизмом JS.
- Во время выполнения (контекст выполнения - фаза выполнения) объект функции создается «на лету» ( он еще не выполнен ), ему присваивается переменная «greet», и его можно вызывать с помощью «greet (» somename) ')'.

3. Выражение немедленного вызова функции:

Пример:

// IIFE
var greeting = function(name) {
    return 'Namaste' + ' ' + name;
}('Santosh')

console.log(greeting)  // Namaste Santosh. 

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

Типичный вариант использования IIFE в JS:

Следующий шаблон IIFE довольно часто используется.

// IIFE 
// Spelling of Function was not correct , result into error
(function (name) {
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');
  • Мы здесь делаем две вещи. а) Завершение выражения нашей функции внутри фигурных скобок (). Это говорит синтаксическому синтаксическому анализатору, что все, что находится внутри (), является выражением (в данном случае выражением функции) и является допустимым кодом.
    б) Мы вызываем эту функцию одновременно, используя () в конце.

Таким образом, эта функция создается и выполняется одновременно (IIFE).

Важный сценарий использования IIFE:

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

Предположим, у меня есть другой файл JS (test1.js), используемый в моей заявке вместе с iife.js (см. Ниже).

// test1.js

var greeting = 'Hello';

// iife.js
// Spelling of Function was not correct , result into error
(function (name) { 
   var greeting = 'Namaste';
   console.log(greeting + ' ' + name);
})('Santosh');

console.log(greeting)   // No collision happens here. It prints 'Hello'.

Таким образом, IIFE помогает нам писать безопасный код, в котором мы непреднамеренно не сталкиваемся с глобальными объектами.

6 голосов
/ 22 ноября 2011

Это самовозглашающаяся анонимная функция .

Ознакомьтесь с W3Schools объяснением самовывозующей функции .

Функциональные выражения могут быть сделаны «самовозбуждающимися».

Самовозбуждающееся выражение вызывается (запускается) автоматически, без вызова.

Функциональные выражения будут выполняться автоматически, если следовать этому выражениюby ().

Вы не можете самостоятельно вызывать объявление функции.

...