Perché incorporare la classe JavaScript in una chiamata anonima () chiamata?

Question

Stavo leggendo del nuovo linguaggio simile a Javascript da Microsoft chiamato dattiloscritto .Nella parchi giochi (sezione di esempio) , c'è una semplice classe in sintassi dattiloscritto convertito in codice JavaScript.Venendo da uno sfondo di programmazione Java, è stato interessante per me imparare come è fatto OOP in JavaScript come compilato da dittivetti.

Il codice dittiletti:

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)

.

E il codice JavaScript equivalente:

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

.

La parte dattilta è molto simile a Java, quindi lo capisco.Ora la mia domanda è il motivo per cui in JavaScript il corpo della classe Greeter è incorporato in una chiamata function() anonima?

Perché non scriverlo come questo?

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

.

Qual è il vantaggio / svantaggio di ciascun metodo?

Answer 1

Quanto segue viene chiamato immediatamente invocato un'espressione della funzione :

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

.

È usato per mantenere pulito lo scope globale.Tuttavia, in questo caso non è necessario poiché il valore di ritorno è assegnato a una variabile Greeter.L'unica volta che questo modello è utile è quando vuoi "privato" statico membri.

E.G.:

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

Questo è per consentire ai membri privati.In questo esempio, tutti i membri sono pubblici, quindi le tue due costruzioni sono equivalenti.Tuttavia, se si desidera fornire ai membri privati è necessario nasconderli dalla portata di chiamata tramite una chiusura.Quindi se hai un membro privato come:

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

.

Probabilmente avresti qualcosa del genere:

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

.

La variabile di saluto sarà disponibile per qualsiasi funzione definita all'interno della funzione anonima, ma invisibile ovunque.

Answer 3

oltre all'ovvio ragionamento scopertale / chiusura.Usando una funzione anonima che si richiama immediatamente pre-carica (interpreta) la definizione della classe.Ciò consente ad eventuali ottimizzazioni JIT di essere caricato anteriore all'interno dell'esecuzione.In breve, per applicazioni più grandi più complesse migliorerà le prestazioni.

Answer 4

La chiusura anonima della funzione / auto-esecuzione è solitamente utilizzata per incapsulare lo scopo in modo che solo il valore restituito sia accessibile al di fuori di esso.(o qualsiasi cosa si attacca ad altri oggetti, come la finestra)

Answer 5

La funzione anonima è probabilmente lì per prevenire la raccolta del nome con altre parti del codice.Pensa a questo modo, all'interno della tua funzione anonima, potresti persino dichiarare una variabile chiamata "$" per essere qualunque cosa tu voglia, e allo stesso tempo, utilizzare JQuery in altre parti del tuo codice senza conflitto.

Answer 6

La chiusura è la sola media per chiamare i costruttori con parametri:

var w = new Greeter("hello")

.

Ci sono altri metodi ma tutti complicati e con limitazioni e svantaggi.