javascript - 基本的javascript继承问题

Question

为了更好的结构，我尝试在 Javascript 中继承我的类。也许我的方法是完全错误的或不可行的。这是我的示例代码:

function myMotherClass(value){
   this.MyValue = value
}

function myChildClass(value){
    this.prototype = new myMotherClass(value);
    this.alert = function(){
        alert(value);
    };
}

//myChildClass.prototype = new myMotherClass(1)

var myClass = new myChildClass(2);
myClass.alert();

here is my fiddle !

正如您在我的 fiddle 中看到的那样，如果您使用注释行，它工作正常。

如果您能看到 fiddle ，我正在尝试将 myChildClass 中的 cunstructor 值赋予基“myMotherClass”。但是正如您所见，有一个未定义的输出。

提前感谢您抽出时间提供帮助。

Answer 1

它似乎与注释掉的行一起工作的原因是那个注释掉的行中的myChildClass 是函数；但是在 myChildClass 构造函数中，this 不是 function，它是由 new 创建的实例运算符(operator)。函数的 prototype 属性是将由 new 运算符分配给它创建的新实例的对象，作为它们的底层原型(prototype)； 实例 上的 prototype 属性没有特殊含义(例如，它不引用实例的底层原型(prototype))。

正确的做法是:

// Parent constructor
function myMotherClass(value){
   this.MyValue = value
}

// Child constructor
function myChildClass(value){
    // Chain to parent constructor, passing any necessary args
    myMotherClass.call(this, value);

    // Other child stuff -- see note below
    this.alert = function(){
        alert(value);
    };
}

// Set up inheritance by creating myChildClass's prototype
// property to be an object that is baked by myMotherClass's
// prototype object; do NOT *call* myMotherClass here, it's
// a common anti-pattern you'll see in a lot of examples
inherit(myMotherClass, myChildClass);

// Create an instance    
var myClass = new myChildClass(2);
myClass.alert();

...其中 inherit 是:

function inherit(parent, child) {
    var temp;

    if (Object.create) {
        child.prototype = Object.create(parent.prototype);
    } else {
        temp = function() { };
        temp.prototype = parent.prototype;
        child.prototype = new temp();
    }
    child.prototype.constructor = child;
}

请注意，使用您定义 alert 的方式，会出现这种稍微奇怪的行为:

var o = new myChildClass(42);
console.log(o.MyValue); // 42
o.alert();              // alerts "42"
o.MyValue = 67;
console.log(o.MyValue); // 67
o.alert();              // alerts "42" <== !!!

您可以更改定义 alert 的方式，以便它像这样使用 MyValue:

this.alert = function() {
    alert(this.MyValue);
};

...前提是您始终通过实例调用它。 (更多关于我的博客:神话方法)

但如果您打算这样做，您可以将它移到原型(prototype)中——将它放在设置链的 inherit 调用之后:

myChildClass.prototype.alert = function(){
    alert(this.MyValue);
};

下面是所有内容:

// Parent constructor
function myMotherClass(value){
   this.MyValue = value
}

// Child constructor
function myChildClass(value){
    // Chain to parent constructor, passing any necessary args
    myMotherClass.call(this, value);

    // Other child stuff...
}

// Set up inheritance by creating myChildClass's prototype
// property to be an object that is baked by myMotherClass's
// prototype object; do NOT *call* myMotherClass here
inherit(myMotherClass, myChildClass);

// Add stuff to myChildClass's prototype property
myChildClass.prototype.alert = function(){
    alert(this.MyValue);
};

// Create an instance    
var myClass = new myChildClass(2);
myClass.alert();

如果您对 JavaScript 中的经典继承感兴趣，我有一个方便的帮助脚本 Lineage，它使上面的内容更简单并添加了一些有用的功能:http://code.google.com/p/lineagejs/