Warum rufen Sie die JavaScript-Klasse in einer anonymen Funktion () einbinden?

Question

Warum rufen Sie die JavaScript-Klasse in einer anonymen Funktion () einbinden?

stimmen

17

Ich lese über die neue JavaScript-ähnliche Sprache von Microsoft genannt Typoskript . Im Spielplatz (Beispiel Abschnitt) , ist es eine einfache Klasse in Typoskript Syntax JavaScript - Code umgewandelt. Ich stamme aus einer Java - Programmierung Hintergrund, es war interessant für mich zu lernen , wie OOP in JavaScript erfolgt mit Wirkung vom Typoskript zusammengestellt.

Typoskript Code:

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)

Und das Äquivalent JavaScript-Code:

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);

Das Typoskript Teil ist sehr ähnlich wie Java , damit ich das verstehen. Nun meine Frage , warum in JavaScript , um den Körper der GreeterKlasse in einem anonymen eingebettet ist , zu function()nennen?

Warum schreiben Sie es nicht so?

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

Was ist der Vorteil / Nachteil jeder Methode?

javascript typescript

Veröffentlicht am 02/10/2012 um 15:27
quelle vom benutzer AlexStack

In anderen Sprachen...

6 antworten

stimmen

3

Neben der offensichtlichen Scoping / Schließung Argumentation. Unter Verwendung eine anonyme Funktion, die sie unmittelbar vor den Lasten (interpretiert) die Klassendefinition aufruft. Auf diese Weise können alle JIT-Optimierungen Front in der Ausführung geladen werden. Kurz gesagt, für eine größere komplexere Anwendungen ist die Performance verbessern.

Beantwortet am 02/10/2012 um 15:44
quelle vom benutzer Louis Ricci

stimmen

2

Dies ist für private Mitglieder zu ermöglichen. In diesem Beispiel sind alle Mitglieder der Öffentlichkeit so Ihre beiden Konstruktionen gleichwertig sind. Wenn Sie jedoch für private Mitglieder bieten wollen, müssen Sie sie von dem anrufenden Rahmen über eine Schließung verbergen. Wenn Sie also wie so ein eigenes Mitglied haben:

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

Sie würden wahrscheinlich so etwas wie dieses:

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

Die Begrüßung Variable wird auf jede Funktion innerhalb der anonymen Funktion definiert, aber unsichtbar überall verfügbar sein.

Beantwortet am 02/10/2012 um 15:36
quelle vom benutzer Mark Porter

stimmen

2

Der anonyme Funktion / Selbst Ausführung Verschluss ist in der Regel verwendet Umfang zu kapseln, so dass nur der zurückgegebene Wert außerhalb zugänglich ist. (Oder irgendetwas anhängen Sie auf andere Objekte, wie Fenster)

Beantwortet am 02/10/2012 um 15:31
quelle vom benutzer Jordan Denison

stimmen

1

Die anonyme Funktion ist es wahrscheinlich Namen Collition mit anderen Teilen des Codes zu verhindern. Denken Sie daran, auf diese Weise, in Ihrer anonymen Funktion, könnten Sie sogar eine Variable deklarieren namens „$“ zu sein, was Sie wollen, und zugleich, sein jQuery auf anderen Teilen des Codes ohne Konflikte.

Beantwortet am 02/10/2012 um 15:31
quelle vom benutzer Deleteman

stimmen

-4

Der Verschluss ist das einzige Mittel, die Konstrukteure mit Parametern aufzurufen:

var w = new Greeter("hello")

Es gibt andere Methoden, aber alle komplizierten und mit Einschränkungen und Nachteilen.

Beantwortet am 18/07/2014 um 09:13
quelle vom benutzer Thinol

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

Es folgt ein genannt sofort aufgerufen Funktion Ausdruck :

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

Es wird verwendet , reinigen den globalen Bereich zu halten. Zwar ist es in diesem Fall nicht notwendig , da der Rückgabewert einer Variablen zugewiesen wird Greeter. Das einzige Mal , dieses Muster ist nützlich ist , wenn Sie „private“ wollen statische Mitglieder.

Z.B:

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