Utwórz klasę JS: IIFE a powróć prototyp

Question

Zobaczmy dwa przykłady, w których spróbuję wyjaśnić, co chcę zrozumieć.

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

I:

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

Zobaczmy !, Obie klasy są tworzone jako wyrażenia funkcyjnego i oba działają jednakowo. Jedyna różnica między nimi to: Pierwsza zwraca funkcję samochodu z jej prototypową właściwością. Drugi działa, zwracając funkcję Car, omijając właściwość prototype i zamiast tego używa IIFE.

Jakie są różnice między użyciem return Car.prototype; i uniknięcia IIFE i użycia return Car; przy użyciu IIFE (nawiasy na końcu deklaracji klasy).

Answer 1

Drugi przykładowy kod to właściwy sposób na osiągnięcie tego, czego szukasz. Tworzysz funkcję natychmiastowego wykonywania, wewnątrz której tworzysz nową funkcję, dodajesz do jej prototypu, a następnie zwracasz.

Pierwszy przykład jest nieco dziwny i nie całkiem poprawnie tworzy funkcję konstruktora. Linia

return Car.prototype; // return with prototype 

powoduje czynność samochód, aby po prostu zawsze zwraca literał obiektu, który już wcześniej przypisany do Car.prototype. Przesłania to normalne zachowanie funkcji wywołany z new

---

tylko jedna rzecz, aby pamiętać, że ten wiersz:

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

spowoduje właściwość constructor nowo tworzyć obiekty nie wskazywały już do samochodu funkcjonować. Są dwa proste sposoby, aby to naprawić, jeśli jest to dla ciebie ważne.

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

lub zmienić wyżej

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