尝试使用.prototype属性理解/学习/使用javascript中的继承

时间:2014-02-10 19:20:21

标签: javascript prototypal-inheritance prototype-programming prototype-chain

我正在尝试理解javascript继承/原型。

我这样做了:

function Foo(par){
    this.prop= par;
    this.propTwo = par;
}
function Bar(par){
    this.p=par;
}
Bar.prototype = new Foo();

如果我这样做:

var myBar = new Bar("value");

myBar.propTwo未定义(我假设这是因为即使我覆盖原型,我明确使用Bar“构造函数”<<如果我错了,请纠正我这个假设。

如果我希望从Bar继承Foo,我应该如何创建Bar的实例或重写构造函数以获得propTwo /在创建myBar对象时分配(请注意,传递的相同参数分配给两个道具)?

我甚至不确定我是否在这里做了“好”的事情,所以如果我完全错了就可以说,如果可以修复,请不要犹豫。

更新 我选择Ethan Brown's答案是正确的,因为1分钟。差异(没什么个人的)。两种解释都运作良好,并且使用两种不同的方式(实际上这个想法是相同的,一种用“应用”另一种“呼叫”)。

同样Bergi's链接/评论结果证明这是为什么不使用这种方法的延伸答案/理由:

What is the reason to use the 'new' keyword here?

感谢您的回答/材料。

2 个答案:

答案 0 :(得分:2)

如果我正确理解了您的问题,那么当您宣布prop为子类时,您想知道propTwomyBar未在Bar中设置的原因Foo

答案是构造函数不会自动调用其原型的构造函数。我想你可能想要的是:

// parent class
function Foo(par){
    this.prop = par;
    this.propTwo = par;
}

// subclass
function Bar(par){
    Foo.call(this, par);  // invoke parent class constructor
    this.p = par;         // custom construction
}
Bar.prototype = new Foo()

正如Bergi在下面的评论中指出的那样,通过将子类的原型设置为父类的新实例来进行子类化可能是您想要的:这使得所有子类型实例都继承自父类的实例,而不是父类的实例原型。如果您希望模仿经典继承,最好的办法是使用Object.create方法:

Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.constructor = Bar;

有关详细信息,请参阅MDN documentation on Object.create。您还可以阅读link Bergi mentionedthis SO question

答案 1 :(得分:1)

您需要在Bar的“context”(或范围)中调用Foo函数。效果就像调用Foo作为父构造函数。

function Foo(par){
        this.prop= par;
        this.propTwo = par;
    }
function Bar(par){
        this.p=par;
        Foo.apply(this,arguments);
    }
Bar.prototype = new Foo();

var myBar = new Bar("value");

console.log(myBar);