Dlaczego osadzić klasę JavaScript w anonimowej funkcji () zadzwonić?

Question

Dlaczego osadzić klasę JavaScript w anonimowej funkcji () zadzwonić?

głosy

17

Czytałam o nowym języku JavaScript podobnego firmy Microsoft o nazwie maszynopis . W zabaw (przykład część) , nie jest to proste klasy składni Typescript przekształca kodu JavaScript. Pochodzących z programowania tła Java, to było interesujące dla mnie, aby dowiedzieć się, w jaki sposób odbywa się OOP w JavaScript jako skompilowany z maszynopis.

Kod maszynopis:

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return Hello,  + this.greeting;
    }
}   

var greeter = new Greeter(world);

var button = document.createElement('button')
button.innerText = Say Hello
button.onclick = function() {
    alert(greeter.greet())
}

document.body.appendChild(button)

A odpowiednikiem kodu JavaScript:

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return Hello,  + this.greeting;
    };
    return Greeter;
})();
var greeter = new Greeter(world);
var button = document.createElement('button');
button.innerText = Say Hello;
button.onclick = function () {
    alert(greeter.greet());
};
document.body.appendChild(button);

Maszynopis część jest bardzo podobny do Javy więc zrozumieć. Teraz moje pytanie brzmi: dlaczego w JavaScript ciało Greeterklasie jest osadzony w anonimowej function()rozmowy?

Dlaczego nie napisać to tak?

function Greeter(message) {
    this.greeting = message;
}
Greeter.prototype.greet = function () {
    return Hello,  + this.greeting;
};

Jaka jest zaleta / wada każdej metody?

javascript typescript

Utwórz 02/10/2012 o 15:27
źródło użytkownik AlexStack

W innych językach...

6 odpowiedzi

głosy

3

Oprócz oczywistej scoping / zamknięcia rozumowania. Korzystanie anonimową funkcję, która wywołuje się natychmiast wstępnych obciążeń (interpretuje) definicję klasy. Pozwala to na wszelkie optymalizacje JIT być ładowane z przodu w realizacji. W skrócie, dla większych bardziej złożonych aplikacji poprawi wydajność.

Odpowiedział 02/10/2012 o 15:44
źródło użytkownik Louis Ricci

głosy

2

Pozwala to na członków prywatnych. W tym przykładzie, wszyscy członkowie są jawne dzięki czemu dwie konstrukcje są równoważne. Jednakże, jeśli chcesz, aby zapewnić dla członków prywatnych trzeba ukryć je przed wywołującego zakresu poprzez zamknięcie. Tak więc jeśli masz prywatnym Państwa w taki sposób:

class Greeter {
    private greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

Prawdopodobnie dostanie coś takiego:

var Greeter = (function () {
    var greeting="";
    function Greeter(message) {
        greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + greeting;
    };
    return Greeter;
})();

Zmienna życzeniami będą dostępne dla każdej funkcji zdefiniowanej wewnątrz funkcji anonimowej, ale niewidoczny wszędzie indziej.

Odpowiedział 02/10/2012 o 15:36
źródło użytkownik Mark Porter

głosy

2

Anonimowa funkcja / self zamknięcie wykonanie jest zwykle używany do hermetyzacji zakres tak, że tylko wartość zwracana jest dostępny poza nim. (Lub cokolwiek dołączać do innych obiektów, takich jak okna)

Odpowiedział 02/10/2012 o 15:31
źródło użytkownik Jordan Denison

głosy

1

Funkcja anonimowy jest prawdopodobnie tam, aby zapobiec nazwę collition z innych części kodu. Pomyśl o tym w ten sposób, wewnątrz anonimowej funkcji, można nawet zadeklarować zmienną o nazwie „$”, aby mieć co chcesz, a jednocześnie, być przy użyciu jQuery na inne części kodu bez konfliktu.

Odpowiedział 02/10/2012 o 15:31
źródło użytkownik Deleteman

głosy

-4

Zamknięcie jest jedynym środkiem do wywołać konstruktor z parametrami:

var w = new Greeter("hello")

Istnieją inne sposoby, ale wszystkie skomplikowane i z ograniczeń i wad.

Odpowiedział 18/07/2014 o 09:13
źródło użytkownik Thinol

xandercoded · Accepted Answer · 2012-10-02 15:30

Nazywa się następujące Natychmiast Wykonano wyrażenie funkcyjne :

(function(){ ... })();

Jest on stosowany, aby utrzymać zasięg globalny czyste. Choć w tym przypadku nie jest konieczne, ponieważ wartość zwracana jest przypisana do zmiennej Greeter. Jedyny czas ten wzór jest przydatna jest, gdy chcesz „prywatny” statyczne członkowie.

Na przykład:

var Greeter = (function () {
    var foo = 'foo', bar = 'bar'; /* only accessible from function's defined
                                     in the local scope ... */

    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();