3

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

然后例如Child2move 方法：

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

2 回答 2

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

于 2013-05-30T13:28:03.223 回答
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指向父的原型，所以现在我们很好。

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

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

于 2013-05-30T13:36:07.273 回答