[英]javascript inheritance using the prototype property
I'm trying to do inheritance in javascript. 我正在尝试用JavaScript进行继承。 First of all, looking on the web I found this
首先,在网络上我发现了这个
function A() {}
function B(){}
B.prototype = new A() ;
B.prototype.constructor = B ;
This works, however when I use the prototype property of B it doesn't work anymore ( http://jsfiddle.net/jeanluca/eQBUx/ ) 这行得通,但是当我使用B的prototype属性时,它不再起作用( http://jsfiddle.net/jeanluca/eQBUx/ )
function A() {}
A.prototype.bar = function(){ return 'A'; }
function B() {}
B.prototype.bar = function(){ return 'B'; }
I realize you could do 我知道你可以做
function B(){ this.bar = function(){ ... } } ;
But I think this is definitely slower than defining it using the prototype. 但是我认为这绝对比使用原型定义它慢。 So how could I do inheritance in the second situation ?
那么在第二种情况下我该如何继承呢?
Thnx n
Using this
to assign properties breaks the prototype chain. 使用
this
属性分配属性会破坏原型链。 It's very inefficient and you can't use it to get inheritance. 这是非常低效的,您不能使用它来获取继承。 So .. don't?
所以..不是吗?
You're creating a property on a the prototype object which you completely replace afterwards. 您正在原型对象上创建一个属性,之后将其完全替换。 Do it the other way round, create the
bar
method on the new object. 反过来,在新对象上创建
bar
方法。 And don't use new
! 并且不要使用
new
!
function B() {}
// first create the prototype object
B.prototype = Object.create(A.prototype);
// then assign properties on it
B.prototype.bar = function(){ return 'B'; }
Here's your code: 这是您的代码:
function A() {}
A.prototype.bar = function(){ return 'A';}
function B() {}
B.prototype.bar = function(){ return 'B'; }
B.prototype = new A() ; // replaces B's "bar" with A's "bar
var b = new B ;
console.log(b.bar());
As you can see the problem is in your 6th line. 如您所见,问题出在第六行。 You're first setting
B.prototype.bar
to a function in line 5 and then you immediately set B.prototype
to new A
in line 6 (effectively undoing what you did in line 5). 首先在第5行
B.prototype.bar
设置为函数,然后在第6行中立即将B.prototype
设置为new A
(实际上撤消了在第5行中所做的操作)。 The solution is to put line 6 before line 5: 解决方案是将第6行放在第5行之前:
function A() {}
A.prototype.bar = function(){ return 'A';}
function B() {}
B.prototype = new A() ; // now it will work
B.prototype.bar = function(){ return 'B'; }
var b = new B ;
console.log(b.bar());
See the demo for yourself: http://jsfiddle.net/eQBUx/1/ 亲自观看演示: http : //jsfiddle.net/eQBUx/1/
In addition I agree with Bergi: Stop using the new
keyword . 另外,我也同意Bergi的建议: 停止使用
new
关键字 。
Update: After reading your comment and understanding your problem in greater detail I would recommend you use my augment
library for inheritance: 更新:阅读您的评论并更详细地了解您的问题后,我建议您使用我的
augment
库进行继承:
var A = Object.augment(function () {
this.constructor = function () {};
this.bar = function () {
return "A";
};
});
var B = A.augment(function (base) {
this.constructor = function () {};
this.bar = function () {
return "B" + base.bar.call(this);
};
});
var b = new B;
console.log(b.bar());
See the demo: http://jsfiddle.net/eQBUx/2/ 观看演示: http : //jsfiddle.net/eQBUx/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.