Dlaczego musisz wywołać anonimową funkcję w tej samej linii?

Czytałem kilka postów na temat zamknięć i widziałem to wszędzie, ale nie ma jasnego wyjaśnienia, jak to działa - za każdym razem, gdy kazano mi go używać ...:

// 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
})();

Ok, widzę, że stworzymy nową anonimową funkcję, a następnie ją uruchomimy. Po tym ten prosty kod powinien działać (i działa):

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

Moje pytanie brzmi, jaka magia się tutaj dzieje? Myślałem, że kiedy napisałem:

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

wtedy utworzona zostanie nowa nienazwana funkcja, taka jak funkcja „” (msg) ...

ale dlaczego to nie działa?

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

Dlaczego musi znajdować się w tej samej linii?

Czy możesz podać mi jakieś posty lub wyjaśnienia?

Upuść średnik po definicji funkcji.

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

Powyżej powinno działać.

Strona DEMO: https://jsfiddle.net/e7ooeq6m/

Omówiłem tego rodzaju wzorzec w tym poście:

jQuery i $ pytania

EDYTOWAĆ:

Jeśli spojrzysz na specyfikację skryptu ECMA , istnieją 3 sposoby zdefiniowania funkcji. (Strona 98, rozdział 13 Definicja funkcji)

1. Korzystanie z konstruktora funkcji

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

2. Korzystanie z deklaracji funkcji.

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

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

3. Wyrażenie funkcji

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

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

Więc możesz zapytać, jaka jest różnica między deklaracją a wyrażeniem?

Ze specyfikacji skryptu ECMA:

FunctionDeclaration: identyfikator funkcji (FormalParameterListopt) {FunctionBody}

FunctionExpression: function Identifieropt (FormalParameterListopt) {FunctionBody}

Jeśli zauważysz, „identyfikator” jest opcjonalny dla wyrażenia funkcji. A kiedy nie podajesz identyfikatora, tworzysz anonimową funkcję. To nie znaczy, że nie możesz podać identyfikatora.

Oznacza to, że przestrzeganie jest prawidłowe.

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

Ważną kwestią do zapamiętania jest to, że możesz używać „mySum” tylko w treści funkcji mySum, a nie na zewnątrz. Zobacz następujący przykład:

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

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

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

Demo na żywo

Porównaj to z

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

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

 test1(); //alerts 'function'

Uzbrojeni w tę wiedzę, spróbujmy przeanalizować Twój kod.

Kiedy masz taki kod,

    function(msg) { alert(msg); }

Utworzyłeś wyrażenie funkcyjne. Możesz wykonać to wyrażenie wyrażeniowe, zawijając je w nawiasie.

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

Nazywa się to funkcją wywoływaną samodzielnie.

To, co robisz, gdy wywołujesz, (function(){})to zwracanie obiektu funkcji. Po dołączeniu ()do niego jest wywoływane i wykonywane jest wszystko w ciele. ;Oznacza koniec rachunku, dlatego 2nd wywołanie kończy się niepowodzeniem.

Jedną z rzeczy, które uznałem za mylące, jest to, że „()” to operatory grupujące.

Oto twoja podstawowa zadeklarowana funkcja.

Dawny. 1:

var message = 'SO';

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

foo(message);

Funkcje są obiektami i można je grupować. Rzućmy więc pareny wokół funkcji.

Dawny. 2:

var message = 'SO';

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

(foo)(message);     // calls foo

Teraz zamiast deklarować i od razu wywoływać tę samą funkcję, możemy użyć podstawienia podstawowego, aby zadeklarować ją tak, jak ją nazywamy.

Dawny. 3)

var message = 'SO';

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

Wreszcie, nie potrzebujemy tego dodatkowego foo, ponieważ nie używamy nazwy, aby to nazwać! Funkcje mogą być anonimowe.

Dawny. 4

var message = 'SO';

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

Aby odpowiedzieć na twoje pytanie, wróć do Przykładu 2. Twój pierwszy wiersz deklaruje jakąś funkcję bezimienną i grupuje ją, ale jej nie wywołuje. Druga linia grupuje ciąg. Obie nic nie robią. (Pierwszy przykład Vincenta).

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

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

Ale

(foo)
(msg); //works

Funkcja anonimowa nie jest funkcją o nazwie „”. Jest to po prostu funkcja bez nazwy.

Jak każda inna wartość w JavaScript, funkcja nie potrzebuje nazwy do utworzenia. Chociaż o wiele bardziej przydatne jest powiązanie go z nazwą, tak jak z każdą inną wartością.

Ale jak każda inna wartość, czasami chcesz jej użyć bez wiązania jej z nazwą. To jest samozwoływający się wzór.

Oto funkcja i liczba, bez ograniczeń, nic nie robią i nigdy nie można ich użyć:

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

Musimy więc przechowywać je w zmiennej, aby móc z nich korzystać, tak jak każda inna wartość:

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

Możesz także użyć cukru syntetycznego, aby powiązać funkcję ze zmienną:

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

Ale jeśli nazywanie ich nie jest wymagane i prowadziłoby do większego zamieszania i mniejszej czytelności, możesz po prostu użyć ich od razu.

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

Tutaj moja funkcja i moje liczby nie są powiązane ze zmienną, ale nadal można ich używać.

Mówiąc w ten sposób, wygląda na to, że funkcja wywoływania nie ma żadnej rzeczywistej wartości. Trzeba jednak pamiętać, że ogranicznik zakresu JavaScript jest funkcją, a nie blokiem ({}).

Tak więc funkcja samo-wywołująca ma w rzeczywistości takie samo znaczenie jak blok C ++, C # lub Java. Co oznacza, że ​​zmienna utworzona w środku nie „wycieknie” poza zakres. Jest to bardzo przydatne w JavaScript, aby nie zanieczyszczać globalnego zasięgu.

Tak właśnie działa JavaScript. Możesz zadeklarować nazwaną funkcję:

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

I nazwij to:

foo("Hi!");

Lub możesz zadeklarować funkcję anonimową:

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

I nazwij to:

foo("Hi!");

Lub nigdy nie możesz po prostu przypisać funkcji do nazwy:

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

Funkcje mogą również zwracać funkcje:

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

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

Nic nie warte jest to, że wszelkie zmienne zdefiniowane w treści „var” make_foozostaną zamknięte przez każdą zwracaną funkcję make_foo. Jest to zamknięcie i oznacza, że ​​każda zmiana wartości dokonana przez jedną funkcję będzie widoczna przez inną.

Umożliwia to enkapsulację informacji, jeśli chcesz:

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

var hello = make_greeter("Hello!");

hello();

Tak działa prawie każdy język programowania oprócz Java.

Kod, który wyświetlasz,

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

składają się z dwóch instrukcji. Pierwszym z nich jest wyrażenie, które zwraca obiekt funkcji (który zostanie następnie wyrzucony, ponieważ nie jest zapisywany). Drugi to wyrażenie, które daje ciąg znaków. Aby zastosować funkcję do ciągu, musisz albo przekazać ciąg jako argument do funkcji podczas jej tworzenia (co również pokazano powyżej), albo będziesz musiał faktycznie zapisać funkcję w zmiennej, abyś mógł zastosuj go później, w wolnym czasie. Tak jak:

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

Zauważ, że przechowując anonimową funkcję (funkcję lambda) w zmiennej, skutecznie nadajesz jej nazwę. Dlatego równie dobrze możesz zdefiniować regularną funkcję:

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

Podsumowując poprzednie komentarze:

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

gdy nie jest przypisany do zmiennej, powoduje błąd składniowy. Kod jest analizowany jako instrukcja funkcji (lub definicja), która powoduje, że nawiasy zamykające są niepoprawne składniowo. Dodanie nawiasów wokół części funkcji informuje tłumacza (i programistę), że jest to wyrażenie funkcji (lub wywołanie), jak w

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

Jest to funkcja samo-wywołująca, co oznacza, że ​​jest tworzona anonimowo i uruchamia się natychmiast, ponieważ wywołanie następuje w tym samym wierszu, w którym zostało zadeklarowane. Ta funkcja wywołująca jest oznaczona znaną składnią, aby wywołać funkcję bez argumentu, oraz dodane nawiasy wokół nazwy funkcji:(myFunction)(); .

Jest składni funkcja dyskusja JavaScript dobry SO .

Ta odpowiedź nie jest ściśle związana z pytaniem, ale możesz chcieć dowiedzieć się, że tego rodzaju funkcja składniowa nie jest specyficzna dla funkcji. Na przykład zawsze możemy zrobić coś takiego:

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

Związane z funkcjami. Ponieważ są to obiekty dziedziczące po Function.prototype, możemy wykonywać następujące czynności:

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

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

bar(); // alerts foo

I wiesz, nie musimy nawet otaczać funkcji nawiasami, aby je wykonać. W każdym razie, dopóki próbujemy przypisać wynik do zmiennej.

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

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

Inną rzeczą, którą możesz zrobić z funkcjami, gdy tylko je zadeklarujesz, jest wywołanie newnad nimi operatora i uzyskanie obiektu. Następujące są równoważne:

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

var obj = {
    foo : "bar"
};

Jest jeszcze jedna właściwość, którą ma funkcja JavaScript. Jeśli chcesz wywołać rekurencyjnie tę samą funkcję anonimową.

(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

Rozumiem pytanie pytającego, że:

Jak działa ta magia:

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

Mogę się mylić. Jednak zwykłą praktyką, którą znają ludzie, jest:

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

Powodem jest to, że nawiasy JavaScript AKA () nie mogą zawierać instrukcji, a gdy parser napotka słowo kluczowe funkcji, wie, że może je parsować jako wyrażenie funkcji, a nie deklarację funkcji.

Źródło: post na blogu Natychmiastowe wywołanie wyrażenia funkcyjnego (IIFE)

przykłady bez nawiasów:

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

(jest to jedyne prawdziwe zastosowanie void, afaik)

lub

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

lub

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

też pracować. voidpowoduje ekspresję oceny, jak również przydziału i wybuchu. ostatni pracuje ~, +, -, delete, typeof, niektóre z operatorów jednoargumentowych ( voidto jeden również). nie działają ++, --ponieważ są wymagane ze względu na zmienną.

podział linii nie jest konieczny.

Jest to samo-wykonująca się funkcja anonimowa. Pierwszy zestaw nawiasów zawiera wyrażenia do wykonania, a drugi zestaw nawiasów wykonuje te wyrażenia.

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

Peter Michaux omawia różnicę w Ważnej parze nawiasów .

Jest to przydatna konstrukcja podczas próby ukrycia zmiennych przed nadrzędną przestrzenią nazw. Cały kod w ramach funkcji jest zawarty w prywatnym zakresie funkcji, co oznacza, że ​​nie można w ogóle uzyskać do niego dostępu spoza funkcji, co czyni go naprawdę prywatnym.

Widzieć:

1. Zamknięcie (informatyka)
2. Przestrzeń nazw JavaScript
3. Ważna para nawiasów JavaScript

Inny punkt widzenia

Najpierw możesz zadeklarować anonimową funkcję:

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

Następnie nazywacie to:

foo ('Few');

Ponieważ foo = function (msg) {alert (msg);}, więc możesz zastąpić foo jako:

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

Ale powinieneś zawinąć całą anonimową funkcję w parę nawiasów klamrowych, aby uniknąć błędu składniowego deklarowania funkcji podczas parsowania. Potem będzie,

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

W ten sposób łatwo mi to zrozumieć.

Kiedy zrobiłeś:

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

Funkcja została wcześniej zakończona z ('SO')powodu średnika. Jeśli tylko napiszesz:

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

To będzie działać.

Przykład roboczy: http://jsfiddle.net/oliverni/dbVjg/

Prostym powodem, dla którego nie działa, nie jest ;wskazanie końca funkcji anonimowej. Jest tak, ponieważ bez ()końca wywołania funkcji nie jest to wywołanie funkcji. To jest,

function help() {return true;}

Jeśli zadzwonisz, result = help();jest to wywołanie funkcji i zwróci wartość true.

Jeśli zadzwonisz, result = help;to nie jest połączenie. Jest to zadanie, w którym pomoc jest traktowana jak dane, które mają zostać przypisane do wyniku.

Zadeklarowałeś / utworzyłem anonimową funkcję przez dodanie średnika,

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

a następnie próbował wywołać go w innej instrukcji, używając tylko nawiasów ... Oczywiście, ponieważ funkcja nie ma nazwy, ale to nie zadziała:

('SO');

Tłumacz interpretuje nawiasy w drugim wierszu jako nową instrukcję / instrukcję i dlatego nie działa, nawet jeśli zrobiłeś to w ten sposób:

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

Nadal nie działa, ale działa po usunięciu średnika, ponieważ interpreter ignoruje białe spacje i wózki i widzi cały kod jako jedną instrukcję.

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

Wniosek: wywołanie funkcji nie jest wywołaniem funkcji bez ()końca, chyba że w określonych warunkach, takich jak wywołanie przez inną funkcję, to znaczy onload = 'help' wykona funkcję pomocy, nawet jeśli nawiasy nie zostaną uwzględnione. Wierzę, że setTimeout i setInterval również pozwalają na tego typu wywołanie funkcji, a także wierzę, że interpreter dodaje nawiasy za kulisami, które w ten sposób przywracają nas do „wywołanie funkcji nie jest wywołaniem funkcji bez nawiasów”.

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

Jest to powszechna metoda używania anonimowej funkcji jako zamknięcia, z którego korzysta wiele struktur JavaScript.

Ta funkcja jest wywoływana automatycznie po skompilowaniu kodu.

W przypadku umieszczenia ;w pierwszym wierszu kompilator potraktował go jako dwie różne linie. Więc nie możesz uzyskać takich samych wyników jak powyżej.

Można to również zapisać jako:

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

Aby uzyskać więcej informacji, zapoznaj się z funkcjami JavaScript / anonimowymi .

1. Funkcje anonimowe to funkcje dynamicznie deklarowane w czasie wykonywania. Są one nazywane funkcjami anonimowymi, ponieważ nie mają nazwy w taki sam sposób, jak zwykłe funkcje.

   Funkcje anonimowe deklarowane są za pomocą operatora funkcji zamiast deklaracji funkcji. Za pomocą operatora funkcji można utworzyć nową funkcję wszędzie tam, gdzie jest to ważne, aby wstawić wyrażenie. Na przykład możesz zadeklarować nową funkcję jako parametr do wywołania funkcji lub przypisać właściwość innego obiektu.

   Oto typowy przykład nazwanej funkcji:

   funkcja flyToTheMoon () {alert („Zoom! Zoom! Zoom!”); } lecieć na Księżyc(); Oto ten sam przykład utworzony jako funkcja anonimowa:

   var flyToTheMoon = function () {alert („Zoom! Zoom! Zoom!”); } lecieć na Księżyc();

   Aby uzyskać szczegółowe informacje, przeczytaj tutaj:

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

IIFE po prostu dzieli funkcję na części i ukrywa msgzmienną, aby nie „zanieczyszczać” globalnej przestrzeni nazw. W rzeczywistości po prostu zachowaj prostotę i rób jak poniżej, chyba że budujesz witrynę o wartości miliarda dolarów.

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

Możesz nazwać swoją msgwłaściwość za pomocą Wzorca modułu ujawniania, takiego jak:

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

Anonimowe funkcje mają być jednorazową transakcją, w której definiujesz funkcję w locie, dzięki czemu generuje ona dane wyjściowe z wprowadzonego przez Ciebie sygnału wejściowego. Tyle że nie podałeś danych wejściowych. Zamiast tego napisałeś coś w drugim wierszu („SO”); - niezależna instrukcja, która nie ma nic wspólnego z funkcją. Czego oczekiwałeś? :)