Creare una classe JS: IIFE vs prototipo di ritorno

Question

Vediamo due esempi in cui cercherò di spiegare cosa voglio capire.

var Car = function(){ 
    // Init class 
    function Car() { }; 
    // Private func/vars 
    var private = { color:'red' }; 
    // Public func/vars 
    Car.prototype = { 
    newColor: function(color) { private.color = color }, 
    getColor: function() { return private.color } 
    }; 

    return Car.prototype; // return with prototype 
}; 

var myCar = new Car(); 

E:

var Car = (function(){ 
    // Init class 
    function Car() { }; 
    // Private func/vars 
    var private = { color:'red' }; 
    // Public func/vars 
    Car.prototype = { 
    newColor: function(color) { private.color = color }, 
    getColor: function() { return private.color } 
    }; 

    return Car; // avoid prototype adding parentheses on next line; 
})(); 

var myCar = new Car(); 

Vediamo !, Entrambi classe vengono creati come espressione di una funzione ed entrambi funzionano ugualmente. Le uniche differenze tra di loro sono: Il primo restituisce la funzione Auto con la sua proprietà prototipo. Il secondo funziona restituendo la funzione Car, evitando la proprietà prototype e utilizzando invece IIFE.

Quali sono le differenze tra l'uso return Car.prototype; ed evitare IIFE e utilizzare return Car; utilizzando IIFE (parentesi alla fine della dichiarazione di classe).

Answer 1

Il secondo esempio di codice è il modo corretto per ottenere ciò che stai cercando. Si crea una funzione ad esecuzione immediata, all'interno della quale si crea una nuova funzione, si aggiunge al suo prototipo e quindi si restituisce.

Il primo esempio è un po 'strano e non crea correttamente una funzione di costruzione. La linea

return Car.prototype; // return with prototype 

provoca la funzione auto per tornare semplicemente sempre l'oggetto letterale che si era in precedenza assegnato a Car.prototype. Questo sostituisce il normale comportamento di una funzione invocato con new

---

Solo una cosa da notare, questa linea:

Car.prototype = { 
    newColor: function(color) { private.color = color }, 
    getColor: function() { return private.color } 
}; 

farà sì che la proprietà constructor di recente creare oggetti da nessun punto più alla tua auto funzione. Ci sono due semplici modi per risolvere questo problema se questo è importante per te.

Car.prototype = { 
    newColor: function(color) { private.color = color }, 
    getColor: function() { return private.color } 
}; 
Car.prototype.constructor = Car; // <-------- add this line 

o modificare il precedente per

Car.prototype.newColor = function(color) { private.color = color }; 
Car.prototype.getColor = function() { return private.color };