Коротко
Підсумок
У своїй найпростішій формі ця методика має на меті обернути код всередині функції .
Це допомагає зменшити шанси:
- зіткнення з іншими програмами / бібліотеками
- забруднюючи найкращу сферу (найімовірніше глобальну)
Він не виявляє, коли документ готовий - це не якийсь 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 =?
Відповідь "ти можеш", і насправді існує багато способів, як ти це зробиш: додавання а +, а !, а -чи, можливо, загортання в пару круглих дужок (як це зараз робиться за умовами), і багато іншого я вважаю. Наприклад:
(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. Приємно :)