Создайте класс JS: прототип IIFE против прототипа

Question

Давайте рассмотрим два примера, в которых я попытаюсь объяснить, что я хочу понять.

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

И:

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

Давайте посмотрим !, Оба класса создаются как выражение функции, и оба работают одинаково. Единственные различия между ними: Первый возврат функции Авто с его прототипом. Вторая работа, возвращающая функцию Car, избегая свойства прототипа и вместо этого использует IIFE.

В чем разница между использованием return Car.prototype; и предотвращением IIFE и использованием return Car; с использованием IIFE (круглые скобки в конце декларации класса).

Answer 1

Второй пример кода - это правильный способ добиться того, что вы ищете. Вы создаете сразу исполняемую функцию, внутри которой вы создаете новую функцию, добавляете ее прототип и возвращаете ее.

Первый пример немного нечетный и не совсем корректно создает конструктор. Линия

return Car.prototype; // return with prototype 

вызывает вашу функцию автомобиля просто всегда возвращает объект буквальный, который вы ранее назначены Car.prototype. Это отменяет нормальное поведение функции требо new

---

только одна вещь, чтобы отметить, эту строку:

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

приведет к constructor свойство вновь создавать объекты больше не указывают на ваш автомобиль функция. Есть два простых способа исправить это, если это важно для вас.

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

Или изменить выше

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