Tạo một lớp JS: IIFE vs nguyên mẫu trả về

Question

Hãy xem hai ví dụ trong đó tôi sẽ cố gắng giải thích những gì tôi muốn hiểu.

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

Và:

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

Hãy xem !, Cả lớp được tạo ra như biểu hiện chức năng và cả hai làm việc như nhau. Sự khác biệt duy nhất giữa chúng, là: Việc đầu tiên trả lại chức năng xe với tài sản nguyên mẫu của nó. Các tác phẩm thứ hai trả về chức năng Ô tô, tránh thuộc tính nguyên mẫu và thay vào đó sử dụng IIFE.

Sự khác nhau giữa việc sử dụng return Car.prototype; và tránh IIFE và sử dụng return Car; bằng cách sử dụng IIFE (dấu ngoặc đơn ở cuối khai báo lớp).

Answer 1

Mẫu mã thứ hai là cách thích hợp để đạt được những gì bạn đang tìm kiếm. Bạn tạo một hàm thực hiện ngay lập tức, bên trong mà bạn tạo một hàm mới, thêm vào nguyên mẫu của nó, và sau đó trả về nó.

Ví dụ đầu tiên hơi lạ và không hoàn toàn tạo chức năng hàm tạo. Dòng

return Car.prototype; // return with prototype 

khiến chức năng ô tô của bạn luôn trả về đối tượng mà bạn đã gán trước đây là Car.prototype. Này ghi đè các hành vi bình thường của một hàm gọi với new

---

Chỉ cần một điều cần lưu ý, dòng này:

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

sẽ gây ra constructor tài sản của mới tạo các đối tượng để có điểm thời gian để xe của bạn chức năng. Có hai cách dễ dàng để sửa lỗi này nếu điều này quan trọng đối với bạn.

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

Hoặc thay đổi ở trên để

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