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

What is the difference between extending an object using prototype or inline?

本文关键字：对象 什么 区别 扩展 原型      更新时间：2023-09-26

有什么区别?有吗?

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

区别在于如何创建对象。当你在一个对象的原型上定义函数时，它会在该对象的每个后续实例中定义一次。

如果你在实例级声明函数，每次声明函数时，它们都会被重新定义。

它实际上对性能有影响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时。

是有区别的。

如果你使用原型对象，那么所有创建的"喜欢"对象将有相同的引用原型对象。但是如果你使用第二个方法(this.add)，它将为每个创建的对象添加函数。

第一个方法比第二个方法更受欢迎

示例2是更好的实践，因为它适合于实现继承，而不是创建对象属性的浪费副本。

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

理论上，这可能会在较大的应用程序中导致内存瓶颈。另外，如果将来想要更改add方法，则需要对每个本地对象都这样做。

相关文章：