[英]Trying to understand/learn/use inheritance in javascript with .prototype property
I'm trying to understand javascript inheritance/prototypes. 我正在尝试了解javascript继承/原型。
I did this: 我这样做:
function Foo(par){
this.prop= par;
this.propTwo = par;
}
function Bar(par){
this.p=par;
}
Bar.prototype = new Foo();
If I do: 如果我做:
var myBar = new Bar("value");
myBar.propTwo
is undefined (I assume this because even If I overwrite the prototype,I'm explicitly using the Bar
"construct function" << please correct me if I'm wrong in this assumption. myBar.propTwo
是未定义的(我之所以这样认为是因为即使我覆盖了原型,我也明确地使用了Bar
“ construct function” <<如果在这种假设中我错了,请更正我。
if I want that Bar
inherit from Foo
, how should I create an instance of Bar
or rewrite the constructs function(s) to get the propTwo
also defined/assigned when creating myBar
object (notice the same argument passed is assigned to both props) ? 如果我想要那个
Bar
继承Foo
,我应该如何创建一个实例Bar
或重写构造函数(S),以获得propTwo
也被定义/创建时分配myBar
对象(注意通过被分配到两个道具相同的参数)?
I'm not even sure if I'm doing something "good" here, so if I'm totally wrong it's okay say it, if can be fixed please don't hesitate in details. 我什至不确定我是否在这里做“好事”,所以如果我完全错了,可以说出来,如果可以解决,请不要犹豫。
Update: I have selected Ethan Brown's answer as the correct because of 1 min. 更新:由于1分钟,我选择了Ethan Brown的答案作为正确答案。 of difference (nothing personal).
的差异(无个人)。 Both explanation works well and use two different ways (actually the idea is the same, one use "apply" the other one "call").
两种解释都很有效,并且使用两种不同的方式(实际上,想法是相同的,一种使用“应用”,另一种使用“调用”)。
Also Bergi's link/comment it turns out to be an extended answer/justification about why not using this approach: 同样, Bergi的链接/评论实际上是关于为什么不使用这种方法的扩展答案/论据:
What is the reason to use the 'new' keyword here? 在这里使用'new'关键字的原因是什么?
Thanks for the answers/material. 感谢您的答案/材料。
If I understand your question correctly, you're wondering why prop
and propTwo
are not set in myBar
when you've declared Bar
to be a subclass of Foo
. 如果我正确理解了您的问题,您想知道为什么在将
Bar
声明为Foo
的子类时未在myBar
设置prop
和propTwo
。
The answer is that the constructor function does not automatically call the constructor of its prototype. 答案是构造函数不会自动调用其原型的构造函数。 I think what you probably want is this:
我认为您可能想要的是:
// 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()
As Bergi points out in the comments below, subclassing by setting the subclass's prototype to a new instance of the parent class is probably what you want: that makes all subtype instances inherit from an instance of the parent class, not the parent class's prototype. 正如Bergi在下面的评论中指出的那样,通过将子类的原型设置为父类的新实例来进行子类化可能是您想要的:这使得所有子类型实例都继承自父类的实例,而不是父类的原型。 If you're looking to emulate classical inheritance, your best bet is to the use the
Object.create
method: 如果您想模仿经典继承,那么最好的选择是使用
Object.create
方法:
Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.constructor = Bar;
See the MDN documentation on Object.create
for more information. 有关更多信息,请参见
Object.create
上的MDN文档 。 You also might want to read the link Bergi mentioned , and this SO question . 您可能还想阅读Bergi提到的链接以及此问题 。
You need to call the Foo function in "context" (or scope) of Bar. 您需要在Bar的“上下文”(或作用域)中调用Foo函数。 The effect is like calling Foo as a parent constructor.
效果就像调用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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.