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

Question

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

voti

17

Stavo leggendo sul nuovo linguaggio Javascript simile da Microsoft chiamato dattiloscritto . Nel parco giochi (sezione di esempio) , v'è una semplice classe nella sintassi dattiloscritto convertito in codice JavaScript. Venendo da una programmazione di fondo Java, è stato interessante per me per imparare OOP è fatto in JavaScript come compilato da dattiloscritto.

Il codice dattiloscritto:

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 tipografico è molto simile a Java così ho capito che. Ora la mia domanda è: perché in JavaScript corpo della Greeterclasse è incorporato in un un anonimo function()chiamata?

Perché non scrivere in questo modo?

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

Qual è il vantaggio / svantaggio di ciascun metodo?

javascript typescript

È pubblicato 02/10/2012 alle 15:27
fonte dall'utente AlexStack

In altre lingue...

6 risposte

voti

3

Oltre all'evidente ragionamento scoping / chiusura. Utilizzando una funzione anonima che si richiama immediatamente pre-carichi (interpreta) la definizione della classe. Questo permette ottimizzazioni JIT da caricare anteriore nelle dell'esecuzione. In breve, per applicazioni più complesse grandi che migliorerà le prestazioni.

Risposto il 02/10/2012 a 15:44
fonte dall'utente Louis Ricci

voti

2

Questo è quello di permettere ai membri privati. In questo esempio, tutti i membri sono pubblici in modo che le due costruzioni sono equivalenti. Tuttavia, se si desidera fornire ai membri privati è necessario nasconderli dal campo di applicazione di chiamare tramite una chiusura. Quindi se avete un membro privato in questo modo:

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

Si sarebbe probabilmente ottenere 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à a disposizione di qualsiasi funzione definita all'interno della funzione anonima, ma invisibile ovunque.

Risposto il 02/10/2012 a 15:36
fonte dall'utente Mark Porter

voti

2

La chiusura di esecuzione anonima funzione / io è solitamente utilizzata per incapsulare portata in modo che solo il valore restituito è accessibile al di fuori di esso. (O qualsiasi cosa si collega ad altri oggetti, come la finestra)

Risposto il 02/10/2012 a 15:31
fonte dall'utente Jordan Denison

voti

1

La funzione anonima è probabilmente lì per evitare che il nome collition con le altre parti del codice. Pensare in questo modo, all'interno della vostra funzione anonima, si potrebbe anche dichiarare una variabile denominata "$" per essere quello che vuoi, e, allo stesso tempo, essere utilizzando jQuery su altre parti del codice senza conflitti.

Risposto il 02/10/2012 a 15:31
fonte dall'utente Deleteman

voti

-4

La chiusura è l'unico mezzo per chiamare i costruttori con parametri:

var w = new Greeter("hello")

Esistono altri metodi, ma tutti complicata e con limiti ed inconvenienti.

Risposto il 18/07/2014 a 09:13
fonte dall'utente Thinol

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

Di seguito viene chiamato un espressione di una funzione immediatamente Invocato :

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

E 'utilizzato per mantenere la portata globale pulita. Anche se, in questo caso non è necessario in quanto il valore di ritorno viene assegnato ad una variabile Greeter. L'unica volta che questo modello è utile quando si vuole "privati" statiche membri.

Per esempio:

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