javascript - 您可以使用原型(prototype)关键字将功能添加到JavaScript类中吗？

Question

我需要能够向 Javascript 类添加许多函数，我认为您可以使用 className.prototype = function(){} 来做到这一点，但也许我在这一点上不正确。

  Car.prototype.toAnotherString = function () {
    return this.model + " has done " + this.miles + " miles";
  };

问题:在此类中是否正确声明了原型(prototype)，并且可以在没有函数名称的情况下以某种方式声明 Car 类>

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;

  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };

  Car.prototype.toAnotherString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}

var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );

console.log( civic.toString() );
console.log( mondeo.toString() );
console.log( civic.toAnotherString() );
console.log( mondeo.toAnotherString() );

新代码:

这就是添加原型(prototype)的方式吗？

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;

  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}

 Car.prototype.toAnotherString = function () {
    return this.model + " has done " + this.miles + " miles";
 };

Answer 1

不，不是:在 Car.prototype 上定义方法的行应该单独放置:

function Car (model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;

  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}

Car.prototype.toAnotherString = function () {
    return this.model + " has done " + this.miles + " miles";
};

看，原型(prototype)的主要优点是能够一次创建方法函数。但在您的代码中，每次调用 Car 构造函数时都会执行此行，从而一次又一次地创建该函数的新实例。这违背了原型(prototype)的目的。

但是您可能会问，这个函数如何知道它所调用的对象？这是通过所谓的函数上下文欺骗来完成的。看，当您调用 civic.toAnotherString() 时， toAnotherString this 对象内部将引用与 civic 相同的对象。当您调用 mondeo.toAnotherString() 时， this 将引用与 mondeo 相同的对象。

但是等等，还有更多!您可以从一个对象调用此方法，但传递另一个对象作为其上下文(即 this ):

civic.toAnotherString.call(mondeo); // or .apply(mondeo)

而且，你瞧，尽管该方法似乎属于 civic 对象，但它实际上就像附加到 mondeo 对象一样。

这个 - 在方法内切换 this 的能力 - 是最强大的 JS 功能之一。我建议从头到尾学习 MDN 上的 this (真的，没有双关语)教程，以及关于 Function.call 、 Function.apply 和 Function.bind 的相应文章。