JavaScript 原型(prototype)设计 : single prototype object or not?

Question

我不太了解 JavaScript 原型(prototype)设计。以这段代码为例:

function Class(asdf) {
 if(typeof(asdf) == 'undefined') {
 } else {
  this.asdf = asdf;
 }
}
Class.prototype.asdf = "default_asdf";
Class.prototype.asdf2 = [];
Class.prototype.change_asdf = function() {
 this.asdf = "changed_asdf";
 this.asdf2.push("changed_asdf2");
}

function SubClass() {
}
SubClass.prototype = new Class("proto_class");
SubClass.prototype.constructor = SubClass;

test1 = new SubClass();
alert("test1 asdf: " + test1.asdf + " " + test1.asdf2);
test1.change_asdf();
alert("test1 asdf: " + test1.asdf + " " + test1.asdf2);
test2 = new SubClass();
alert("test2 asdf: " + test2.asdf + " " + test2.asdf2);

第一个警报按预期打印“proto_class []”。第二个警报打印“changed_asdf [changed_asdf2]”，也符合预期。但是为什么第三个警报打印“proto_class [changed_asdf2]”？!如果原始原型(prototype)对象(new Class(“proto_class”))被修改，那么为什么asdf变量不保持“changed_asdf”？如果不是，那么为什么 asdf2 数组包含“changed_asdf2”？此外，如何确保每个新的 SubClass() 实例都包含一个新的 Class() 实例，就像在 C++ 和 Java 中一样？

Answer 1

因为你写

SubClass.prototype = new Class("proto_class");

您正在创建Class一个实例的原型(prototype)。您想要的是创建一个继承其父类原型(prototype)的子类。正如大卫·弗拉纳根 (David Flanagan) 在他的 JavaScript: The Definitive Guide 中所展示的那样(第 9.5 节)，您必须使用辅助函数来创建具有指定原型(prototype)的新对象:

function heir(p) {
    function f(){}         // dummy constructor function
    f.prototype = p;       // specify prototype object we want
    return new f();        // create and return new object
}

(Crockford 在所谓的 ES5 object constructor property 之后调用此函数 Object.create，但请不要这样做，因为这个 can be misleading 。)

在子类构造函数中，您必须 call将 this 设置为当前对象的类构造函数:

function SubClass() {
    // call the parent's constructor with
    // `this` set to the current scope
    Class.call(this, "proto_class");
}

最后但并非最不重要的一点是，您只需重置 Class.asdf2 一次，而不是在 Class 或 SubClass 的构造函数中重置。因此，将 this.asdf2 = []; 添加到其中一个构造函数。

完整的代码现在如下:

function heir(p) {
    function f(){}         // dummy constructor function
    f.prototype = p;       // specify prototype object we want
    return new f();        // create and return new object
}

function Class(asdf) {
    if (typeof asdf != 'undefined')
        this.asdf = asdf;
}

Class.prototype.asdf = "default_asdf";
Class.prototype.asdf2 = [];
Class.prototype.change_asdf = function() {
    this.asdf = "changed_asdf";
    this.asdf2.push("changed_asdf2");
}

function SubClass() {
    // call the parent's constructor with
    // `this` set to the current scope
    Class.call(this, "proto_class");
    this.asdf2 = [];
}

SubClass.prototype = heir(Class.prototype);
SubClass.prototype.constructor = SubClass;

test1 = new SubClass();
alert("test1 asdf: " + test1.asdf + " " + test1.asdf2);
test1.change_asdf();
alert("test1 asdf: " + test1.asdf + " " + test1.asdf2);
test2 = new SubClass();
alert("test2 asdf: " + test2.asdf + " " + test2.asdf2);