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

我对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了，我得到了理想的结果。

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

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

Answer 1

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

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都是对同一函数的引用这一事实并不妨碍它们被执行两次。

Answer 2

您应该使用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指向什么？为什么，当然是第一个孩子的实施！

第二次，this指向父母的原型，所以现在我们很好。

这就是为什么这种情况发生了，你能做些什么呢？嗯，这取决于你，我提到申请因为这是我默认的想法，所以你会使用this.$parent.move.apply(this, arguments);，但是我们真的无法获得更高的权限父母，所以我能想到的唯一另一个选择是binding（对任何道场人来说都是搭便车）每个功能都是它的原型，从而保证其this值总是指向同样的事情，因此它总是可以可靠地访问$ parent。

当然，这意味着无法访问实际的对象实例，因此它只对纯实用程序函数有用，但实际上并不是新的。如果你覆盖了print（它访问了对象实例的x和y成员）并试图调用父节点，那么它也会被破坏。

javascript多级继承奇怪的结果

2 个答案: