创建一个JS类:IIFE VS回原型(Create a JS class: IIFE vs retu

2019-08-02 07:17发布

让我们来看看两个例子中,我会尽力解释我想明白了什么。

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

让我们来看看!这两个类中创建为函数表达式,并都同样的工作。 它们之间唯一的区别是:第一,其原型属性返回租车功能。 第二个作品还车功能,避免了prototype属性,而使用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 };


文章来源: Create a JS class: IIFE vs return prototype