2012-01-29 14 views
97

Powiel możliwe:
What is the (function() { })() construct in JavaScript?Zaawansowany JavaScript: Dlaczego ta funkcja jest zawijana w nawiasy?

natknąłem się na ten kawałek kodu JavaScript, ale nie mam pojęcia, co zrobić z niego. Dlaczego otrzymuję "1", gdy uruchamiam ten kod? Czym jest ten dziwny mały dodatek (1) i dlaczego funkcja jest zawijana w nawiasy?

(function(x){ 
    delete x; 
    return x; 
})(1); 
+0

To jest IIFE, szczegóły tutaj: http://www.markupjavascript.com/2016/07/what-are-immediately-invoked-function.html –

Odpowiedz

208

Jest tu kilka rzeczy. Pierwszym z nich jest immediately invoked function expression (Iife) wzór:

(function() { 
    // Some code 
})(); 

Zapewnia to sposób na wykonanie kodu JavaScript w swoim własnym zakresie. Zwykle jest używany tak, aby wszelkie zmienne utworzone w funkcji nie miały wpływu na zasięg globalny. Zamiast tego możesz użyć tego:

function foo() { 
    // Some code 
} 
foo(); 

Wymaga to podania nazwy funkcji, która nie zawsze jest konieczna. Użycie nazwanej funkcji oznacza również, że w pewnym przyszłym punkcie funkcja może zostać ponownie wywołana, co może nie być pożądane. Używając anonimowej funkcji w ten sposób, upewniasz się, że jest ona wykonywana tylko raz.

Ta składnia jest nieprawidłowy:

function() { 
    // Some code 
}(); 

Bo trzeba zawinąć funkcji w nawiasach w celu uczynienia go analizować jako wyraz. Więcej informacji znajduje się tutaj: http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Tak szybko zakręcić na wzór Iife:

(function() { 
    // Some code 
})(); 

pozwala „jakiegoś kodu” być wykonywane natychmiast, jakby to było tylko napisane inline, ale również we własnym zakresie aby nie wpływać na globalną przestrzeń nazw (a tym samym potencjalnie ingerować w inne skrypty lub ingerować w nią).

można przekazywać argumenty do funkcji tak samo jak normalna funkcja, na przykład,

(function(x) { 
    // Some code 
})(1); 

więc jesteśmy przekazując wartość „1” jako pierwszy argument do funkcji, która odbiera go jako zmienna o zasięgu lokalnym o nazwie x.

Po drugie, masz odwagę kodu funkcji samego:

delete x; 
return x; 

Operator delete usunie właściwości z obiektów. Nie usuwa zmiennych. Więc;

var foo = {'bar':4, 'baz':5}; 
delete foo.bar; 
console.log(foo); 

Wyniki w tym są rejestrowane:

{'baz':5} 

Natomiast

var foo = 4; 
delete foo; 
console.log(foo); 

zarejestruje wartość 4, ponieważ foo jest nie zmienna właściwość i tak nie może być usunięte.

Wiele osób zakłada, że ​​delete może usuwać zmienne, ze względu na sposób działania autoglobałów. W przypadku przypisania do zmiennej bez deklarowania go najpierw, że nie będzie faktycznie stać się zmienna, ale właściwość na globalnym obiektu:

bar = 4; // Note the lack of 'var'. Bad practice! Don't ever do this! 
delete bar; 
console.log(bar); // Error - bar is not defined. 

tym czasie delete działa, ponieważ nie jesteś usuwanie zmiennej, ale właściwość na obiekcie globalnym. W efekcie, poprzedni fragment jest odpowiednikiem tego:

window.bar = 4; 
delete window.bar; 
console.log(window.bar); 

I teraz można zobaczyć jak to jest analogiczne do przykładu obiektu bla bla i nie zmienna np.

+18

Bardzo dobre wyjaśnienie! –

+1

Bardzo dobrze wytłumaczyć. Ponadto, jako notatkę, widziałem Douglasa Crockforda w rozmowie, którą wolał (function() {}()); skutecznie owija całość IIFE w parens dla jasności - bardziej ekspresyjną. – GuiDoody

+0

w porównaniu do linku wiki, pareny owijają całość, czy robi to jakieś różnice? –

9

Oznacza to, że utworzyłeś anonimową funkcję i wywołasz ją za pomocą parametru 1.

To jest tak samo jak:

function foo(x) { 
    delete x; 
    return x; 
} 
foo(1); 
+2

Chciałbym użyć 'var foo = function() {} 'unikaj mylących instrukcji funkcyjnych i wyrażeń funkcyjnych. – hugomg

+1

@missingno Oni są tacy sami. – xdazz

1

tego powodu, że nadal się 1 zwrócony jest to, że Usuń słowo kluczowe jest do usuwania właściwości obiektów. Reszta jest jak inni komentowali, wszystko zawijane w nawiasy wykonuje się jako funkcja, a drugi zestaw nawiasów to argumenty przekazywane do tego bloku.

Oto MDN reference for delete i MDN reference for closures, który omawia również anonimowe funkcje.

2

Zazwyczaj ludzie nazywają te "Wyrażenia funkcji bezpośrednio wywołanych" lub "Funkcje samoczynne".

Chodzi o to, że zmienne zadeklarowane w tej funkcji nie wyciekają na zewnątrz.

Powiązane problemy