原型继承导致共享引用

Question

我想了解原型在 Javascript 中如何以及为何有用。在我以为我知道发生了什么之后，我偶然发现原型只是一个对象，不能像我想象的那样被许多对象“共享”。让我用一个例子来详细说明：

var SpritePrototype = {
    img: null,
    pos_x: 0,
    pos_y: 0,

    draw: function(context2d) {
        /*do stuff with the canvas
          using "this" to refer to 
          the object this method is 
          being called on*/
    },
    //Some more member functions...
}

从原型友好的Javascript通常提倡的“对象继承自对象”的概念，我想我可以这样做：

var player = Object.create(SpritePrototype);

但事实证明这种方法是有缺陷的，因为非函数字段将来自 SpritePrototype，因为玩家的原型正是 SpritePrototype。这意味着我无法从该原型创建更多对象，否则非函数字段将全部混淆。

那么 Object.create 的意义何在，更重要的是，实现我想要做的事情的正确方法是什么？也就是说，如何让“玩家”获取字段的副本并从其原型继承功能？

再说一次，我有兴趣按预期的方式做事。我总是可以手动模拟继承或完全跳过它。我的问题的重点是了解原型以及它们如何以及何时有用，尤其是在我的具体案例中。

Answer 1

原型上的属性值最初是共享的，但在实例上的该属性被写入（分配）到时停止共享。在那一刻，实例获得了它自己的属性版本。所以说价值是“共享的”并不完全正确。它仅在实例上的属性被分配到的时间点之前共享。

var SpritePrototype = {
    img: 'img1'
};
var sprite1 = Object.create(SpritePrototype);
var sprite2 = Object.create(SpritePrototype);

sprite1.img = 'img2';            // does NOT affect prototype or sprite2
console.log(sprite2.img);

< "img1"

当img 被引用时，它的值取自原型。但是，当img 被写入 时，会在实例上创建一个新属性来保存新值，并从那时起使用。

更改原型上的属性值的唯一方法是显式地这样做：

SpritePrototype.img = 'img3';

这将为尚未定义自己本地版本的img 的所有实例更改img，方法是分配给它。

Answer 2

您的问题是，您已经根据面向对象的设计定义了“静态”成员。原型部分中的所有内容都在对象之间共享。函数实际上并没有被复制到新创建的对象中，而是用正确的“this”调用。

你应该在构造函数中初始化你的变量，像这样

function Sprite(...) {
    this.img = null;
    ...
}

那么对于子类型你应该使用 Object.create 创建一个原型来继承它的方法，所以

Player.prototype = Object.create(Sprite.prototype);

最后，你可以调用父构造函数来初始化变量

function Player(...) {
    Sprite.call(this, ...);
}

PS。构造函数应该在 Player.prototype 分配之前。

PPS。欲了解更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create