创建一个 JS 类：IIFE vs 返回原型答案

【问题标题】：Create a JS class: IIFE vs return prototype创建一个 JS 类：IIFE vs 返回原型
【发布时间】：2012-10-24 22:20:27
【问题描述】：

让我们看两个示例，我将在其中尝试解释我想要理解的内容。

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 函数及其原型属性。第二个工作返回 Car 函数，避免原型属性，而是使用 IIFE。

使用return Car.prototype; 和避免使用IIFE 和使用return Car; 使用IIFE（类声明末尾的括号）有什么区别。

【问题讨论】：

你到底想达到什么目的？
我正在尝试深入了解它的工作原理，以及技术差异。
您打算使用new 运算符并返回两个Car 对象吗？

标签： javascript class prototype iife

【解决方案1】：

第二个代码示例是实现所需内容的正确方法。您创建一个立即执行的函数，在其中创建一个新函数，添加到它的原型，然后返回它。

第一个例子有点奇怪，并没有完全正确地创建构造函数。线

return Car.prototype; // return with prototype

使您的 Car 函数始终简单地返回您之前分配给 Car.prototype 的对象字面量。这会覆盖使用new 调用的函数的正常行为

只需要注意一件事，这一行：

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

将导致新创建对象的constructor 属性不再指向您的 Car 函数。如果这对您很重要，有两种简单的方法可以解决此问题。

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 };

【讨论】：