使用原型或内联扩展对象有什么区别?

时间:2013-05-24 15:36:10

标签: javascript

有什么区别?有没有?

var Likes = function (el) {
  this.el = $(el);
  return this;
};

Likes.prototype.add = function (name) {
  this.el.find('.no-results').remove();
  $('<li>', { text: name }).appendTo(this.el);
};

var Likes = function (el) {
  this.el = $(el);
  this.add = function (name) {
    this.el.find('.no-results').remove();
    $('<li>', { text: name }).appendTo(this.el);
  };
  return this;
};

3 个答案:

答案 0 :(得分:6)

区别在于如何创建对象。当您在对象的原型上定义函数时,它会为该对象的每个其他实例定义ONCE。

如果在实例级别声明函数,则每次声明函数时都会重新定义它们。

它实际上会影响性能http://jsperf.com/prototype-vs-instance-functions

通常认为将原型用于将在构造函数的多个实例上重用的函数的最佳实践。例如,如果您使用new运算符来创建构造函数的实例..

var Likes = function (el) {
  this.el = $(el);
  return this;
};

Likes.prototype.add = function (name) {
  this.el.find('.no-results').remove();
  $('<li>', { text: name }).appendTo(this.el);
};

var oneLike = new Likes();
var twoLike = new Likes();
var threeLike = new Likes();

由于add是在对象的原型上定义的,因此它只定义一次而不是每次实例化Likes

答案 1 :(得分:2)

是的,有区别。

如果使用原型对象,则所有“Likes”创建的对象将具有与原型对象相同的引用。 但是如果你使用第二种方法(this.add),它会为每个创建的对象添加函数。

第一个比第二个更喜欢方法。

答案 2 :(得分:2)

示例2是更好的做法,因为它有助于实现继承而不是浪费对象属性的副本。

在没有继承的小应用程序中,两个示例之间可能没有太大的实际区别。但是,假设您在使用继承的更复杂的应用程序中有10000个Likes构造函数实例。在第二个示例中,每个示例都将在本地收到add函数的副本。

理论上,这可能会在更大的应用程序中造成内存瓶颈。此外,如果您希望将来更改add方法,则需要对每个本地对象执行此操作。