javascript多级继承奇怪的结果

Question

我正在更新我的 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);
};

Answer 1

您应该使用 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 成员)并尝试调用父级，那也会被破坏。