我正在更新我的 javascript 技能并想出了一种对象可以从另一个对象继承的方法。 继承应该是树状的。
父级->子级->Child2
我扩展了Function.prototype
(不要告诉我这是个坏主意,以后可以更改)
Function.prototype.extend = function(child)
{
// save child prototype
var childPrototype = child.prototype;
// copy parent to child prototype
child.prototype = Object.create(this.prototype);
// merge child prototype
for (var property in childPrototype) {
child.prototype[property] = childPrototype[property];
}
child.prototype.constructor = child;
child.prototype.$parent = this.prototype;
return child;
};
父对象:
var Parent = (function()
{
var Parent = function(x, y)
{
this.x = x;
this.y = y;
console.log('Parent constr', x, y);
}
Parent.prototype.move = function(x, y)
{
this.x += x;
this.y += y;
console.log('Parent moved.');
};
return Parent;
}());
第一个 child :
var Child = Parent.extend(function()
{
var Child = function(x, y)
{
this.$parent.constructor(x, y);
console.log('Child constr');
}
Child.prototype.print = function()
{
console.log('Child print', this.x, this.y);
};
// override
Child.prototype.move = function(x, y)
{
this.$parent.move(x, y);
console.log('Child moved.');
};
return Child;
}());
第二个 child :
var Child2 = Child.extend(function()
{
var Child2 = function(x, y)
{
this.$parent.constructor(x, y);
console.log('Child2 constr');
}
// override
Child2.prototype.move = function(x, y)
{
this.$parent.move(x, y); // call parent move
console.log('Child2 moved.');
};
return Child2;
}());
到目前为止,还不错。我能够调用父构造函数和方法,甚至可以覆盖方法。
var child = new Child2(1, 1);
child.move(1, 1);
child.print();
我得到以下正确的输出:
Parent constr 1 1
Child constr
Child2 constr
Parent moved.
Child moved.
Child2 moved.
Child print 2 2
但是如果我注释掉第二个 child 的覆盖,我会得到以下输出:
Parent constr 1 1
Child constr
Child2 constr
Parent moved.
Child moved.
Child moved. -> WHY??
Child print 2 2
我不明白为什么 Child moved.
输出了两次。结果是正确的,但发生了一些奇怪的事情。
编辑:
最后,在对问题进行更多研究和深入研究之后,我得出了一个不错的解决方案:
// call method from parent object
Object.getPrototypeOf(Child2.prototype).move.apply(this, arguments);
我对 Function
做了另一个扩展:
Function.prototype.getParent = function()
{
return Object.getPrototypeOf(this.prototype);
};
然后例如 Child2
移动方法:
Child2.prototype.move = function(x, y)
{
Child2.getParent().move.call(this, x, y);
};
所以我不再需要 $parent
并且我得到了想要的结果。
另一种解决方案是直接调用父原型(prototype):
Child2.prototype.move = function(x, y)
{
Child.prototype.move.call(this, x, y);
};
最佳答案
您应该使用 apply 在正确的范围内调用您的函数,同时使用 this
访问父级也不安全。这实际上是学习 JS 调试的一个很好的问题,你可以使用断点看到发生的一切。
看着你的第一个 child :
// override
Child.prototype.move = function(x, y)
{
this.$parent.move(x, y);
console.log('Child moved.');
};
当通过调用child.move(1,1)
到达这段代码时,this
指向child
,而child.$parent.move
指向?为什么,当然是在第一个 child 中实现!
第二次,this
指向 Parent 的原型(prototype),所以现在我们没问题了。
这就是发生这种情况的原因,您能做些什么呢?好吧,这取决于你,我提到应用是因为这是我的默认想法,所以你会使用 this.$parent.move.apply(this, arguments);
,但我们真的 无法访问更高级别的父级,所以我能想到的唯一其他选择是 binding (搭便车,对于任何 dojo 人阅读)它各自原型(prototype)的每个函数,从而保证它的 this
值总是指向相同的东西,因此它总是可以可靠地访问 $parent。
当然,这意味着无法访问实际的对象实例,因此它仅对纯实用函数真正有用,但这实际上并不新鲜。如果您覆盖了 print(它访问对象实例的 x 和 y 成员)并尝试调用父级,那也会被破坏。
关于javascript多级继承奇怪的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16836354/