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

使用return Car.prototype;和避免IIFE之间的区别是什么，并使用IIFE使用return Car;（类声明结尾处的括号）。

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

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

1 个答案: