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！

正如你可以在我的小提琴中看到的那样，如果你使用注释行，它工作正常。

如果你能看到小提琴，我试图将myChildClass中的cunstructor值赋给base＆＃34; myMotherClass＆＃34;。但正如您所看到的，有一个未定义的输出。

感谢您的时间和帮助。

Answer 1

它似乎与注释掉的行一起使用的原因是该注释掉的行中的myChildClass是函数;但是在myChildClass构造函数内的行中，this不是函数，它是由new运算符创建的实例。函数上的prototype属性是由new运算符分配给它创建的新实例的对象，作为它们的基础原型; 实例上的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);
};

...如果你总是通过实例调用它。（更多关于我的博客：神话方法）

但如果您要这样做，可以将其移至原型 - 在设置链的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/

基本的javascript继承问题

1 个答案: