Câu hỏi Tạo một lớp JS: IIFE vs return prototype


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ả hai lớp được tạo thành biểu thức hàm và cả hai đều hoạt động 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ề hàm Car, tránh thuộc tính prototype và thay vào đó sử dụng IIFE.

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


15
2017-11-05 04:45


gốc


Chính xác là bạn đang cố đạt được điều gì? - alex
Tôi đang cố gắng hiểu lý thuyết về cách thức hoạt động chuyên sâu và sự khác biệt về mặt kỹ thuật là gì. - Nestor Britez
Bạn có định sử dụng new nhà điều hành với cả hai Car đối tượng được trả về? - alex


Các câu trả lời:


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 là một chút lẻ, và không hoàn toàn tạo ra một hàm xây dựng đúng cách. Dòng

return Car.prototype; // return with prototype

làm cho chức năng ô tô của bạn chỉ đơn giản là luôn trả về đối tượng mà bạn đã gán cho Car.prototype. Điều này ghi đè hành vi bình thường của một hàm được 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 các đối tượng mới tạo không còn trỏ đến chức năng ô tô của bạn nữa. 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 phần trên thành

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

15
2017-11-05 05:19



Khá thú vị! - Nestor Britez