javascript - 在构造函数 : Why use the prototype keyword? 上创建公共(public)方法

Question

如果我创建一个构造函数 BlahWidget 并为其提供 2 个公共(public)方法:publicHello 和 secondHello。我使用“this”直接在小部件内部分配 publicHello，但使用原型(prototype)对象分配 secondHello 方法，这对小部件上 2 种方法的行为有什么真正的区别？

var BlahWidget = function(){
  this.publicHello = function(){
    alert("Hello");
  }
};

BlahWidget.prototype.secondHello = function(){
  alert("Second Hello");
}

我的理解是使用 .prototype 允许它被继承的对象调用。但事实并非如此。这两个方法都可以被继承的函数对象调用，如下所示:

var MiniBlah = function(){

  this.callSupers = function(){
     this.publicHello();    
     this.secondHello();
  }
}


MiniBlah.prototype = new BlahWidget();
MiniBlah.prototype.constructor = MiniBlah;

var x = new MiniBlah();
x.callSupers();//calls both publicHello and secondHello

Answer 1

不同之处在于，在原型(prototype)对象上声明的函数在构造函数创建的对象实例之间共享，而在构造函数主体内部声明的函数则不然，它们属于从函数构造的对象。

这实际上意味着您可以从构造函数创建大量对象，原型(prototype)上的函数执行 X，然后将原型(prototype)上的函数更改为执行 Y，所有对象实例都将获得新功能函数。

一个例子

var BlahWidget = function(){
  this.publicHello = function(){
    console.log("Hello");
  }
};

BlahWidget.prototype.secondHello = function(){
  console.log("Second Hello");
}

var blah1 = new BlahWidget();

var blah2 = new BlahWidget();
blah2.publicHello = function() {
    console.log("Goodbye");
}

blah1.secondHello(); // logs SecondHello
blah2.secondHello(); // logs SecondHello

BlahWidget.prototype.secondHello = function(){
  console.log("Second Goodbye");
}

blah1.secondHello(); // logs Second Goodbye
blah2.secondHello(); // logs Second Goodbye

blah1.publicHello(); // logs Hello
blah2.publicHello(); // logs Goodbye