Warum die JavaScript-Klasse in einen anonymen function () -Aufruf einbetten?

Question

Ich habe über die neue JavaScript-ähnliche Sprache von Microsoft gelesen TypoSkript.In der spielplatz (Beispielsektion), gibt es eine einfache Klasse in TypeScript-Syntax, die in JavaScript-Code konvertiert wurde.Da ich einen Java-Programmierhintergrund habe, war es für mich interessant zu lernen, wie OOP in JavaScript ausgeführt wird, wie es aus TypeScript kompiliert wurde.

Der 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 der entsprechende 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);

Der Typoskript-Teil ist Java sehr ähnlich, also verstehe ich das.Jetzt ist meine Frage, warum in JavaScript der Körper des Greeter klasse ist in eine anonyme eingebettet function() anrufen?

Warum schreibst du es nicht so?

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

Was ist der Vorteil / Nachteil jeder Methode?

Answer 1

Das Folgende wird als ein bezeichnet Sofort aufgerufener Funktionsausdruck:

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

Es wird verwendet, um den globalen Bereich sauber zu halten.In diesem Fall ist dies jedoch nicht erforderlich, da der Rückgabewert einer Variablen zugewiesen ist Greeter.Das einzige Mal, dass dieses Muster nützlich ist, ist, wenn Sie "privat" wollen statisch Familienangehörige.

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

Answer 2

Dies ist für private Mitglieder zu ermöglichen.In diesem Beispiel sind alle Mitglieder öffentlich, sodass Ihre beiden Konstruktionen gleichwertig sind.Wenn Sie jedoch private Mitglieder bereitstellen möchten, müssen Sie diese über eine Schließung aus dem aufrufenden Bereich ausblenden.Also, wenn Sie ein privates Mitglied wie dieses haben:

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

Sie würden wahrscheinlich so etwas bekommen:

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

Die Begrüßungsvariable ist für jede Funktion verfügbar, die in der anonymen Funktion definiert ist, aber überall sonst unsichtbar.

Answer 3

Abgesehen von den offensichtlichen Überlegungen zum Umfang / zur Schließung.Die Verwendung einer anonymen Funktion, die sich selbst aufruft, lädt (interpretiert) die Klassendefinition sofort vor.Dadurch können beliebige JIT-Optimierungen innerhalb der Ausführung von vorne geladen werden.Kurz gesagt, für größere, komplexere Anwendungen wird die Leistung verbessert.

Answer 4

Die anonyme Funktion / der selbstausführende Abschluss wird normalerweise verwendet, um den Gültigkeitsbereich so zu kapseln, dass nur auf den zurückgegebenen Wert außerhalb davon zugegriffen werden kann.(oder alles, was Sie an andere Objekte anhängen, z. B. Fenster)

Answer 5

Die anonyme Funktion ist wahrscheinlich dazu da, Namenskollisionen mit anderen Teilen des Codes zu verhindern.Stellen Sie sich das so vor: In Ihrer anonymen Funktion könnten Sie sogar eine Variable namens "$" als das deklarieren, was Sie wollen, und gleichzeitig jQuery für andere Teile Ihres Codes ohne Konflikte verwenden.

Answer 6

Der Abschluss ist das einzige Mittel, um die Konstruktoren mit Parametern aufzurufen:

var w = new Greeter("hello")

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