在javascript中添加原型函数和对象文字之间的区别

Question

如果我有一个构造函数 Quo

var Quo = function (string) {
     this.status = string;
};

然后用一个新的对象 var myQuo = new Quo("confused");

会有什么区别:

Quo.get_status = function () { 
    return this.status;
};

和

Quo.prototype.get_status = function () { 
    return this.status;
};

Answer 1

我们假设你已经创建了myQuo,正如你所描述的那样

var myQuo = new Quo("confused");

如果您定义get_status为属性Quo,那么要获取myQuo您必须调用的状态Quo.get_status.但是,Quo.get_status需要知道对象上下文(myQuo)才能返回正确的status值.您可以重新定义函数以接受对象作为参数,如下所示:

Quo.get_status = function (quo) { 
  return quo.status;
};
var status = Quo.get_status(myQuo);

或者,您可以Quo.get_status在问题中保留函数,但是您需要以绑定myQuo到"this" 的方式调用函数:

Quo.get_status = function() {
  return this.status;
};
var status = Quo.get_status.call(myQuo);

两种解决方案都很尴尬.首选的解决方案是利用Javascript的原型功能,并定义get_status为可在本地访问所有Quo对象的原型函数,例如myQuo.

Quo.prototype.get_status = function () { 
  return this.status;
};
var status = myQuo.get_status();

Answer 2

定义函数时,它具有一个属性prototype,该属性用作[[prototype]]使用new关键字创建的所有对象的属性.当您添加成员时Quo.prototype,使用的所有对象new Quo()都将能够读取该成员(就像它们一样)([[prototype]]即通过它们Quo.prototype).另一方面,如果Quo直接分配成员,则只能通过Quo自身访问它们.

例:

var Quo = function (status) {
    this.status = status;
}

Quo.status = "enlightened";

Quo.get_status = function() {
    return this.status;
}

Quo.prototype.get_status = function() {
    return this.status;
}

var quo = new Quo("confused");

Quo.get_status(); // "enlightened"
quo.get_status(); // "confused"