Erstellen Sie eine JS-Klasse: IIFE vs Return-Prototyp

Question

Lassen Sie uns zwei Beispiele sehen, in denen ich versuchen werde zu erklären, was ich verstehen will.

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

Und:

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

Mal sehen !, Beiden Klassen werden als Funktionsausdruck erstellt und beide gleichermaßen funktionieren. Die einzigen Unterschiede zwischen ihnen sind: Die erste Rückgabe der Auto-Funktion mit seiner Prototyp-Eigenschaft. Das zweite funktioniert, die Auto-Funktion zurückgebend, die Prototypeigenschaft vermeidend und stattdessen IIFE verwendend.

Was sind die Unterschiede zwischen der Verwendung return Car.prototype; und vermeiden IIFE und Verwendung return Car; mit IIFE (Klammern am Ende der Klassendeklaration).

Answer 1

Das zweite Codebeispiel ist der richtige Weg, um das zu erreichen, wonach Sie suchen. Sie erstellen eine sofort ausführende Funktion, in der Sie eine neue Funktion erstellen, zu ihrem Prototyp hinzufügen und sie dann zurückgeben.

Das erste Beispiel ist ein bisschen seltsam, und schafft nicht ganz richtig eine Konstruktorfunktion. Die Linie

return Car.prototype; // return with prototype 

bewirkt, dass Ihr Auto-Funktion einfach immer die Objektliteral zurückkehren, die Sie zuvor auf Car.prototype zugewiesen hatte. Dies überschreibt das normale Verhalten einer Funktion aufgerufen mit new

---

einer Sache Just zu beachten, diese Zeile:

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

die constructor Eigenschaft verursacht neu Objekte nicht mehr auf Ihr Auto erstellen Funktion. Es gibt zwei einfache Möglichkeiten, dies zu beheben, wenn dies für Sie wichtig ist.

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

oder die oben ändern

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