在构造函数上创建公共方法:为什么要使用prototype关键字？

Question

如果我创建一个构造函数BlahWidget并给它2个公共方法:publicHello和secondHello.我使用'this'直接在widget中分配publicHello但是使用prototype对象来分配secondHello方法,这对widget上的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

不同之处在于,原型对象上声明的函数在构造函数创建的对象实例之间共享,而在构造函数体内声明的函数则不属于从函数构造的对象.

这在实践中意味着您可以从构造函数创建一个对象的负载,其中原型上的函数执行X,然后在原型上更改该函数以执行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