Чому потрібно викликати анонімну функцію в одному рядку?

Я читав кілька публікацій про закриття і бачив це скрізь, але немає чіткого пояснення, як це працює - кожен раз, коли мені просто казали використовувати його ...:

// Create a new anonymous function, to use as a wrapper
(function(){
    // The variable that would, normally, be global
    var msg = "Thanks for visiting!";

    // Binding a new function to a global object
    window.onunload = function(){
        // Which uses the 'hidden' variable
        alert( msg );
    };
// Close off the anonymous function and execute it
})();

Добре, я бачу, що ми створимо нову анонімну функцію, а потім виконаємо її. Отже після цього цей простий код повинен працювати (і він робить):

(function (msg){alert(msg)})('SO');

Моє запитання - яка магія відбувається тут? Я думав, що коли писав:

(function (msg){alert(msg)})

тоді буде створена нова неназвана функція, як функція "" (msg) ...

але тоді чому це не працює?

(function (msg){alert(msg)});
('SO');

Чому потрібно бути в одному рядку?

Чи можете ви, будь ласка, вкажіть мені кілька дописів чи поясніть мені?

Відкиньте крапку з комою після визначення функції.

(function (msg){alert(msg)})
('SO');

Вище слід попрацювати.

Сторінка DEMO: https://jsfiddle.net/e7ooeq6m/

Я обговорював таку схему в цій публікації:

jQuery та $ питання

Редагувати:

Якщо ви подивитеся на специфікацію сценарію ECMA , то можна визначити три способи визначення функції. (Сторінка 98, Розділ 13 Визначення функції)

1. Використання функціонального конструктора

var sum = new Function('a','b', 'return a + b;');
alert(sum(10, 20)); //alerts 30

2. Використання декларації функції.

function sum(a, b)
{
    return a + b;
}

alert(sum(10, 10)); //Alerts 20;

3. Функція Вираз

var sum = function(a, b) { return a + b; }

alert(sum(5, 5)); // alerts 10

Тож ви можете запитати, яка різниця між декларацією та виразом?

З специфікації сценарію ECMA:

FunctionDeclaration: ідентифікатор функції (FormalParameterListopt) {FunctionBody}

FunctionExpression: функція Identifieropt (FormalParameterListopt) {FunctionBody}

Якщо ви помітили, "ідентифікатор" необов'язковий для вираження функції. І коли ви не даєте ідентифікатор, ви створюєте анонімну функцію. Це не означає, що ви не можете вказати ідентифікатор.

Це означає, що наступне є дійсним.

var sum = function mySum(a, b) { return a + b; }

Важливим моментом є те, що ви можете використовувати "mySum" лише всередині функції функції mySum, а не зовні. Дивіться наступний приклад:

var test1 = function test2() { alert(typeof test2); }

alert(typeof(test2)); //alerts 'undefined', surprise! 

test1(); //alerts 'function' because test2 is a function.

Демонстраційна демонстрація

Порівняйте це з

 function test1() { alert(typeof test1) };

 alert(typeof test1); //alerts 'function'

 test1(); //alerts 'function'

Озброївшись цими знаннями, спробуємо проаналізувати ваш код.

Коли у вас є код на зразок,

    function(msg) { alert(msg); }

Ви створили вираз функції. І ви можете виконати це вираження функції, загорнувши його всередину дужок.

    (function(msg) { alert(msg); })('SO'); //alerts SO.

Це називається функцією самовикликання.

Те, що ви робите під час дзвінка (function(){}), повертає об’єкт функції. Коли ви додаєте ()його, він викликається, і все в тілі виконується. ;Чи означає кінець заяви, саме тому другий виклик зазнає невдачі.

Одне, що мене заплутало, - це те, що "()" групують операторів.

Ось ваша основна заявлена ​​функція.

Вих. 1:

var message = 'SO';

function foo(msg) {
    alert(msg);
}

foo(message);

Функції є об'єктами, і їх можна групувати. Тож давайте кинемо паролі навколо функції.

Вих. 2:

var message = 'SO';

function foo(msg) {  //declares foo
    alert(msg);
}

(foo)(message);     // calls foo

Тепер замість того, щоб оголосити та відразу викликати ту саму функцію, ми можемо використовувати базову заміну, щоб оголосити її так, як ми її називаємо.

Вих. 3.

var message = 'SO';

(function foo(msg) {
    alert(msg);
})(message);          // declares & calls foo

Нарешті, у нас немає необхідності в цьому додатковому фоні, тому що ми не використовуємо ім'я для його виклику! Функції можуть бути анонімними.

Вих. 4.

var message = 'SO';

(function (msg) {   // remove unnecessary reference to foo
    alert(msg);
})(message);

Щоб відповісти на запитання, зверніться до Прикладу 2. Ваш перший рядок оголошує якусь безіменну функцію та групує її, але не називає її. Другий рядок групує рядок. Обидва нічого не роблять. (Перший приклад Вінсента.)

(function (msg){alert(msg)});  
('SO');                       // nothing.

(foo); 
(msg); //Still nothing.

Але

(foo)
(msg); //works

Анонімна функція - це не функція з назвою "". Це просто функція без імені.

Як і будь-яке інше значення в JavaScript, для функції не потрібно створювати ім'я. Хоча насправді набагато корисніше прив’язати його до імені, як і будь-яке інше значення.

Але як і будь-яке інше значення, іноді хочеться використовувати його, не прив'язуючи його до імені. Ось така самовикликаюча модель.

Ось функція і число, не пов'язане, вони нічого не роблять і ніколи не можуть бути використані:

function(){ alert("plop"); }
2;

Тому ми повинні зберігати їх у змінній, щоб мати можливість їх використовувати, як і будь-яке інше значення:

var f = function(){ alert("plop"); }
var n = 2;

Ви також можете використовувати синтатичний цукор для прив'язки функції до змінної:

function f(){ alert("plop"); }
var n = 2;

Але якщо називати їх не потрібно і це призведе до більшої плутанини та меншої читабельності, ви можете просто використати їх відразу.

(function(){ alert("plop"); })(); // will display "plop"
alert(2 + 3); // will display 5

Тут моя функція та мої номери не пов'язані зі змінною, але їх все одно можна використовувати.

Сказане так, схоже, що функція самовикликання не має реального значення. Але ви повинні пам’ятати, що роздільник обмежень JavaScript - це функція, а не блок ({}).

Таким чином, функція самовикликання насправді має те саме значення, що і блок C ++, C # або Java. Що означає, що змінна, створена всередині, не «просочиться» поза рамками. Це дуже корисно в JavaScript, щоб не забруднити глобальну сферу.

Це так, як працює JavaScript. Ви можете оголосити іменовану функцію:

function foo(msg){
   alert(msg);
}

І зателефонуйте:

foo("Hi!");

Або ви можете оголосити анонімну функцію:

var foo = function (msg) {
    alert(msg);
}

І зателефонуйте до цього:

foo("Hi!");

Або ви просто не можете прив'язувати функцію до імені:

(function(msg){
   alert(msg);
 })("Hi!");

Функції також можуть повертати функції:

function make_foo() {
    return function(msg){ alert(msg) };
}

(make_foo())("Hi!");

Нічого не варто, що будь-які змінні, визначені "var" в тілі, make_fooбудуть закриті кожною функцією, повернутою make_foo. Це закриття, і це означає, що будь-яка зміна значення, здійснене однією функцією, буде видно іншою.

Це дозволяє вам інкапсулювати інформацію, якщо хочете:

function make_greeter(msg){
    return function() { alert(msg) };
}

var hello = make_greeter("Hello!");

hello();

Це так, як працює майже кожна мова програмування, окрім Java.

Код, який ви показуєте,

(function (msg){alert(msg)});
('SO');

складається з двох тверджень. Перший - це вираз, який дає об’єкт функції (який буде потім зібраний сміття, оскільки він не зберігається). Другий - це вираз, який дає рядок. Щоб застосувати функцію до рядка, вам потрібно буде передавати рядок як аргумент функції, коли вона створена (що ви також показуєте вище), або вам потрібно буде фактично зберігати функцію у змінній, щоб ви могли застосовуйте його пізніше, у своє дозвілля. Так:

var f = (function (msg){alert(msg)});
f('SO');

Зауважте, що, зберігаючи анонімну функцію (лямбда-функцію) у змінній, ви ефективно даєте їй ім’я. Отже, ви можете так само добре визначити звичайну функцію:

function f(msg) {alert(msg)};
f('SO');

Підсумовуючи попередні коментарі:

function() {
  alert("hello");
}();

коли не присвоєно змінній, приводить до синтаксичної помилки. Код аналізується як функція (або визначення), яка робить синтаксично неправильні дужки, що закриваються. Додавання круглих дужок навколо частини функції повідомляє інтерпретатору (і програмісту), що це вираження функції (або виклик), як у

(function() {
  alert("hello");
})();

Це функція самовикликання, тобто вона створюється анонімно та запускається негайно, оскільки виклик відбувається в тому ж рядку, де і оголошено. Це само-виклику функції відображається знайомий синтаксис для виклику функції без аргументів, а також додані круглі дужки навколо імені функції: (myFunction)();.

Є гарний синтаксис функцій JavaScript для обговорення SO .

Ця відповідь не суворо пов'язана з питанням, але вам може бути цікаво дізнатись, що така функція синтаксису не є особливою для функцій. Наприклад, ми завжди можемо зробити щось подібне:

alert(
    {foo: "I am foo", bar: "I am bar"}.foo
); // alerts "I am foo"

Пов'язані з функціями. Оскільки вони є об'єктами, які успадковуються від Function.prototype, ми можемо робити такі речі, як:

Function.prototype.foo = function () {
    return function () {
        alert("foo");
    };
};

var bar = (function () {}).foo();

bar(); // alerts foo

І знаєте, нам навіть не потрібно оточувати функції з дужками, щоб їх виконувати. У будь-якому випадку, поки ми намагаємося присвоїти результат змінній.

var x = function () {} (); // this function is executed but does nothing

function () {} (); // syntax error

Ще одна річ, яку ви можете зробити з функціями, як тільки ви їх оголосите, - це викликати newоператора над ними та отримати об’єкт. Наступні:

var obj = new function () {
    this.foo = "bar";
};

var obj = {
    foo : "bar"
};

Є ще одна властивість JavaScript функції. Якщо ви хочете викликати ту саму анонімну функцію рекурсивно.

(function forInternalOnly(){

  //you can use forInternalOnly to call this anonymous function
  /// forInternalOnly can be used inside function only, like
  var result = forInternalOnly();
})();

//this will not work
forInternalOnly();// no such a method exist

Моє розуміння питання запитувача таке:

Як працює ця магія:

(function(){}) ('input')   // Used in his example

Я можу помилятися. Однак звичайна практика, з якою люди знайомі:

(function(){}('input') )

Причина така, що в скобках JavaScript AKA ()не може містити операторів, і коли аналізатор стикається з ключовим словом функції, він знає, що він розбирає його як вираз функції, а не декларацію функції.

Джерело: Повідомлення в блозі Виявлення функції негайно викликаних функцій (IIFE)

приклади без дужок:

void function (msg) { alert(msg); }
('SO');

(це єдине реальне використання пустоти, afaik)

або

var a = function (msg) { alert(msg); }
('SO');

або

!function (msg) { alert(msg); }
('SO');

працювати також. the voidвикликає оцінку виразу, а також присвоєння та удару. останній один працює з ~, +, -, delete, typeof, деякі з унарних ( voidце один, а). не працює в Каус ++, --з - за вимоги змінної.

переривання лінії не потрібно.

Це самовиконання анонімної функції. Перший набір дужок містить вирази, які слід виконати, а другий набір дужок виконує ці вирази.

(function () {
    return ( 10 + 20 );
})();

Пітер Мішо обговорює різницю у Важливій парі батьків .

Це корисна конструкція при спробі приховати змінні з батьківського простору імен. Весь код у межах функції міститься в приватній області функції, тобто до нього взагалі не можна отримати доступ із-за меж функції, що робить його справді приватним.

Подивитися:

1. Закриття (інформатика)
2. Розміщення імен JavaScript
3. Важлива пара паролей Javascript

Ще одна точка зору

По-перше, ви можете оголосити анонімну функцію:

var foo = function(msg){
 alert(msg);
}

Тоді ви називаєте це:

foo ('Few');

Тому що foo = function (msg) {alert (msg);}, тому ви можете замінити foo таким чином:

function(msg){
 alert(msg);
} ('Few');

Але вам слід загорнути всю вашу анонімну функцію всередині пари дужок, щоб уникнути помилки синтаксису декларування функції під час аналізу. Тоді ми маємо,

(function(msg){
 alert(msg);
}) ('Few');

Таким чином, мені це легко зрозуміти.

Коли ви зробили:

(function (msg){alert(msg)});
('SO');

Ви закінчили цю функцію раніше ('SO')через крапку з комою. Якщо ви просто пишете:

(function (msg){alert(msg)})
('SO');

Це спрацює.

Приклад роботи: http://jsfiddle.net/oliverni/dbVjg/

Проста причина, по якій вона не працює, полягає не в тому, що ;вказується на закінчення анонімної функції. Це тому, що без ()завершення виклику функції, це не виклик функції. Це є,

function help() {return true;}

Якщо ви зателефонуєте, result = help();це дзвінок до функції і поверне справжній.

Якщо ви телефонуєте result = help; це не дзвінок. Це завдання, коли допомога трактується як дані, які повинні бути призначені для отримання результату.

Що ви зробили, оголосили / створили анонімну функцію, додавши крапку з комою,

(function (msg) { /* Code here */ });

а потім спробував викликати це в іншому операторі, використовуючи просто дужки ... Очевидно, що функція не має імені, але це не буде працювати:

('SO');

Інтерпретатор розглядає круглі дужки у другому рядку як нову інструкцію / заяву, і, таким чином, він не працює, навіть якщо ви зробили це так:

(function (msg){/*code here*/});('SO');

Він все ще не працює, але він працює, коли ви видаляєте крапку з комою, оскільки інтерпретатор ігнорує пробіли та каретки і бачить повний код як одне твердження.

(function (msg){/*code here*/})        // This space is ignored by the interpreter
('SO');

Висновок: виклик функції не є викликом функції без ()закінчення, якщо тільки в конкретних умовах, таких як виклик іншої функції, тобто onload = 'help' буде виконувати функцію довідки, навіть якщо дужки не були включені. Я вважаю, що setTimeout і setInterval також дозволяють цей тип виклику функцій, і я також вважаю, що інтерпретатор так чи інакше додає дужки за кадром, що повертає нас до "виклику функції не викликом функції без дужок".

(function (msg){alert(msg)})
('SO');

Це звичайний метод використання анонімної функції як закриття, яку використовують багато фреймів JavaScript.

Ця функція викликається автоматично, коли компілюється код.

Якщо розміщувати ;на першому рядку, компілятор розглядав його як два різні рядки. Таким чином, ви не можете отримати ті ж результати, що вище.

Це також можна записати як:

(function (msg){alert(msg)}('SO'));

Для отримання більш детальної інформації перегляньте функції JavaScript / Anonymous .

1. Анонімні функції - це функції, які динамічно оголошуються під час виконання. Їх називають анонімними функціями, оскільки їм не присвоюється ім’я так само, як звичайним функціям.

   Анонімні функції оголошуються за допомогою оператора функції замість декларації функції. Ви можете використовувати оператор функції, щоб створити нову функцію там, де це дійсно, щоб поставити вираз. Наприклад, ви можете оголосити нову функцію як параметр виклику функції або призначити властивість іншого об'єкта.

   Ось типовий приклад названої функції:

   функція flyToTheMoon () {сигнал ("Збільшити! Збільшити! Збільшити!"); } flyToTheMoon (); Ось такий же приклад, створений як анонімна функція:

   var flyToTheMoon = function () {alert ("Збільшити! Збільшити! Збільшити!"); } flyToTheMoon ();

   Деталі читайте тут:

   http://helephant.com/2008/08/23/javascript-anonymous-functions/

IIFE просто розділяє функцію і приховує msgзмінну, щоб не "забруднити" глобальний простір імен. Насправді просто продовжуйте робити це просто і робити так, як нижче, якщо ви не будуєте веб-сайт на мільярд доларів.

var msg = "later dude";
window.onunload = function(msg){
  alert( msg );
};

Ви можете назвати простір імен, msgвикористовуючи шаблон модуля розкриття, наприклад:

var myScript = (function() {
    var pub = {};
    //myscript.msg
    pub.msg = "later dude";
    window.onunload = function(msg) {
        alert(msg);
    };
    //API
    return pub;
}());

Анонімні функції мають на увазі однократну угоду, коли ви визначаєте функцію на льоту, щоб вона генерувала у вас вихід із вводу, який ви надаєте. За винятком того, що ви не надали дані. Натомість ви щось написали у другому рядку ("ТАК"); - незалежне твердження, яке не має нічого спільного з функцією. Що ви очікували? :)