Короче говоря
Резюме
В своей простейшей форме этот метод стремится заключить код в область действия функции .
Это помогает уменьшить шансы на:
- столкновение с другими приложениями / библиотеками
- загрязняющий превосходящий (наиболее вероятный глобальный) охват
Она не определяет , когда документ будет готов - это не какое - то document.onloadниwindow.onload
Это обычно известно как Immediately Invoked Function Expression (IIFE)илиSelf Executing Anonymous Function .
Код объяснил
var someFunction = function(){ console.log('wagwan!'); };
(function() { /* function scope starts here */
console.log('start of IIFE');
var myNumber = 4; /* number variable declaration */
var myFunction = function(){ /* function variable declaration */
console.log('formidable!');
};
var myObject = { /* object variable declaration */
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
})(); /* function scope ends */
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
В приведенном выше примере любая переменная, определенная в функции (т. varЕ. Объявленная с использованием ), будет «закрытой» и будет доступна ТОЛЬКО в области действия функции (как говорит Вивин Палиат). Другими словами, эти переменные не видны / недоступны вне функции. Смотрите живую демонстрацию .
Javascript имеет функцию определения области видимости. «Параметры и переменные, определенные в функции, не видны вне функции, и что переменная, определенная где-либо внутри функции, видна везде внутри функции». (из "Javascript: хорошие части").
Подробнее
Альтернативный код
В конце код, размещенный ранее, также можно сделать следующим образом:
var someFunction = function(){ console.log('wagwan!'); };
var myMainFunction = function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
};
myMainFunction(); // I CALL "myMainFunction" FUNCTION HERE
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Смотрите живую демонстрацию .
Корни
Итерация 1
Однажды кто-то, вероятно, подумал: «Должен быть способ избежать именования« myMainFunction », поскольку все, что нам нужно, - это выполнить его немедленно».
Если вы вернетесь к основам, вы обнаружите, что:
expression: что-то, оценивающее значение. т.е.3+11/xstatement: строка (и) кода, делающая что-то, НО это не оценивает к значению. т.е.if(){}
Аналогично, функциональные выражения оцениваются как значения. И одно из следствий (я полагаю?) Заключается в том, что они могут быть немедленно вызваны:
var italianSayinSomething = function(){ console.log('mamamia!'); }();
Таким образом, наш более сложный пример становится:
var someFunction = function(){ console.log('wagwan!'); };
var myMainFunction = function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
}();
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Посмотреть демо .
Итерация 2
Следующим шагом является мысль «почему есть var myMainFunction = если мы даже не используем это !?».
Ответ прост: попробуйте удалить это, например, ниже:
function(){ console.log('mamamia!'); }();
Посмотреть демо .
Это не будет работать, потому что «объявления функций не могут быть вызваны» .
Хитрость заключается в том, что путем удаления var myMainFunction =мы преобразовали выражение функции в объявлении функции . Смотрите ссылки в разделе «Ресурсы» для более подробной информации об этом.
Следующий вопрос: «Почему я не могу сохранить это как выражение функции с чем-то другим var myMainFunction =?
Ответ: «Вы можете», и на самом деле есть много способов сделать это: добавив a +, a !, a -или, возможно, заключив в скобки пару (как это теперь делается по соглашению), и многое другое, я верю. Как пример:
(function(){ console.log('mamamia!'); })(); // live demo: jsbin.com/zokuwodoco/1/edit?js,console.
или
+function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wuwipiyazi/1/edit?js,console
или
-function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wejupaheva/1/edit?js,console
Поэтому, когда соответствующая модификация добавлена к тому, что когда-то было нашим «Альтернативным кодом», мы возвращаемся к тому же коду, который использовался в примере «Код объяснен»
var someFunction = function(){ console.log('wagwan!'); };
(function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
})();
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Узнайте больше о Expressions vs Statements:
Демистифицирующие Прицелы
Одна вещь, которая может задаться вопросом: «что происходит, когда вы НЕ определяете переменную« должным образом »внутри функции - т.е. вместо этого делаете простое присваивание?»
(function() {
var myNumber = 4; /* number variable declaration */
var myFunction = function(){ /* function variable declaration */
console.log('formidable!');
};
var myObject = { /* object variable declaration */
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
myOtherFunction = function(){ /* oops, an assignment instead of a declaration */
console.log('haha. got ya!');
};
})();
myOtherFunction(); // reachable, hence works: see in the console
window.myOtherFunction(); // works in the browser, myOtherFunction is then in the global scope
myFunction(); // unreachable, will throw an error, see in the console
Смотрите живую демонстрацию .
По сути, если переменной, которая не была объявлена в ее текущей области действия, присваивается значение, то «выполняется поиск цепочки области действия до тех пор, пока она не найдет переменную или не достигнет глобальной области (в которой она будет создана).
В среде браузера (по сравнению с серверной средой, такой как nodejs) глобальная область определяется windowобъектом. Следовательно, мы можем сделать window.myOtherFunction().
Мой совет «Хорошей практики» по этой теме - всегда использовать varпри определении чего-либо : будь то число, объект или функция и даже в глобальной области видимости. Это делает код намного проще.
Замечания:
- JavaScript не имеет
block scope(Обновление: локальные переменные области видимости добавлены в ES6 .)
- javascript имеет только
function scope& global scope( windowобласть видимости в среде браузера)
Узнайте больше о Javascript Scopes:
Ресурсы
Следующие шаги
Как только вы получите эту IIFEконцепцию, она приведет к тому module pattern, что обычно делается путем использования этого шаблона IIFE. Радоваться, веселиться :)