javascript多级继承奇怪的结果

Question

我正在刷新我的 javascript 技能，并想出了一种对象可以从另一个对象继承的方法。 继承应该是树状的。

Parent->Child->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;

}());

第一个孩子：

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;

}());

第二个孩子：

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

但是如果我注释掉第二个孩子的覆盖，我会得到以下输出：

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);

我对@9​​87654332@做了另一个扩展：

Function.prototype.getParent = function()
{
    return Object.getPrototypeOf(this.prototype);
};

然后例如Child2 move 方法：

Child2.prototype.move = function(x, y)
{        
    Child2.getParent().move.call(this, x, y);
};

所以我不再需要$parent，我得到了想要的结果。

另一种解决方案是直接调用父原型：

Child2.prototype.move = function(x, y)
{        
    Child.prototype.move.call(this, x, y);
};

Answer 1

您应该使用 apply 在正确的范围内调用您的函数，同时使用 this 访问父级是不安全的。这其实是一个学习JS调试的极好题，可以通过断点看到发生的一切。

看着你的第一个孩子：

// 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 的原型，所以现在我们没问题了。

这就是为什么会发生这种情况，你能做些什么呢？好吧，这取决于你，我提到申请是因为这是我的默认想法，所以你会使用 this.$parent.move.apply(this, arguments);，但是我们真的无法访问更高的父母，所以我唯一的其他选择可以想到的是binding（对于任何阅读dojo的人来说）每个函数都指向它各自的原型，从而保证它的this值总是指向同一个东西，因此它总是可以可靠地访问$parent。

当然，这意味着无法访问实际的对象实例，所以它只对纯实用程序函数真正有用，但这实际上并不新鲜。如果您覆盖了 print（访问对象实例的 x 和 y 成员）并尝试调用父级，那也会中断。

Answer 2

您的 extend 方法将继承的属性和方法附加到新对象的原型。它还创建了一个 $parent 对象，该对象等于父对象的原型。请注意，这会导致重复。第二个孩子有三个move方法：

child.protoype.move
child.$parent.move
child.$parent.$parent.move

即使你注释掉覆盖，仍然有三个移动方法（尽管两个是对同一个函数的引用）。

因此，当您运行 child.move 时，您会得到：

child.prototype.move 调用 child.$parent.move 调用 child.$parent.$parent.move

child.prototype.move 和 child.$parent.move 都是对同一个函数的引用这一事实并不能阻止它们被执行两次。