Javascript原型问题

Question

我的情况是我正在使用Box2DWeb开发Canvas游戏，所以我有一个名为 Sprite 的类，它将图像绘制到Canvas，我现在要创建一个 PhysicsSprite < / em>从 Sprite 继承方法和属性的类。

我的 Sprite 类（Sprite.js）：

Sprite = function (position, dimension, image) {

  this.Position = position;
  this.Dimension = dimension;
  if (image)
    this.Image = image;
  ...

  this.Draw = function (g) {
    ...
  }
  ...
};

我正在设置 PhysicsSprite （PhysicsSprite.js）中的原型，如下所示：

PhysicsSprite = function(position, dimension, world) {

    this.prototype = new Sprite(position, dimension, undefined);
    //alert(this.prototype.Position.X)

    var body = CreateBody();
    this.GetBody = function () { return body; }

    this.Draw = function (g) {
        ...  
    }

    function CreateBody () {
          ...
    }
};

请注意警告（this.prototype.Position.X），它会提醒我该位置，但如果我将代码更改为 this.Position.X ，我得到一个错误，同样，如果我有一个 PhysicsSprite 的实例，我必须显式调用原型。

这让我认为我没有设置Object的原型，只是创建了一个名为prototype的属性，并将其设置为新的 Sprite 。

如果有人可以帮助我，并解释我做错了什么，那将非常感激。 我是阅读障碍者，所以我总是拼错变量，这是令人沮丧的，所以这是我寻找的第一件事，但对我来说一切都很好。

Answer 1

  

这让我想到我没有设置Object的原型，只是创建了一个名为prototype的属性，并将其设置为一个新的Sprite。

没错。此外，您根本没有使用函数的原型，因为您将每个函数直接分配给实例（this.Draw = function() ...）而不是原型。

---

在JavaScript中，您有一些名为构造函数的东西。使用new运算符调用的每个函数都是构造函数。

当以这种方式调用函数（new SomeFunc()）时，会创建一个新对象（让我们称之为 isntance ），该对象继承自SomeFunc.prototype引用的对象，此实例可通过this在该函数中使用。

现在，继承基本上归结为原型（SomeFunc.prototype）而不是（几乎）空对象（默认），继承自另一个函数的原型。

示例：

function A(name) {
    // `this` refers to a new instance
    // lets set some properties:
    this.name = name;
}

// all "class" methods should be assigned to the prototype
A.prototype.getName = function() {
    return this.name;
};


// lets create a child "class"
function B(name, place) {
    // we have to call the parents constructor with the current instance
    // and the arguments we want to pass on.
    // this is like `super(name)` in Java or `A.__init__(self, name)` in Python 
    // (or `super(B, self).__init__(name)` in Python)
    A.call(this, name);
    this.place = place;
}

// here we connect A's prototype with B's prototype in a way that they
// stay independent 
inherits(B, A);

// B's "class" methods
B.prototype.getPlace = function() {
    return this.place;
};

// now we can do
var b = new B('SomeName', 'SomePlace');
alert(b.getName());
alert(b.getPlace());

这就是inherits的样子（这个实现由Google Closure库使用）：

function inherits(Child, Parent) {
    var Tmp = function() {};
    Tmp.prototype = Parent.prototype;
    Child.prototype = new Tmp();
    Child.prototype.constructor = Child;
}

您看到Child.prototype引用Tmp的实例。但Tmp的原型与Parent的原型相同。这意味着，new Tmp()返回的实例继承自Parent的原型，并且由于此实例是Child的原型，Child的所有实例都将继承自Parent.prototype 1}}。

使用ECMAScript 5，可以简化为

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

但它基本上是一样的。它创建了一个继承自Parent.prototype。

的新对象

---

进一步阅读：

• JS: Confusion about inheritance
• MDN - Inheritance and the prototype chain
• MDN - Inheritance revisited
• MDN - new
• MDN - this
• MDN - .call()

Answer 2

更改

this.prototype = new Sprite(position, dimension, undefined);

到

Sprite.apply(this, position, dimension, undefined);

您是对的，在更改之前，您将对象的实例分配给“prototype”属性。

原型是构造函数的属性，而不是对象实例 - 即您可以通过PhysicsSprite.prototype访问原型，但不能访问this.prototype或x.prototype（其中x = new PhysicsSprite() ）。

Answer 3

JavaScript是一种与Java完全不同的鸟，尽管它们经常被误认为是因为它们共享{和}。 ：d

典型的JavaScript类：

function Sprite(a,b) {
    // These are per instance
    this.a = a;
    this.b = b;
}
Sprite.prototype = {
    // These are per class, all instances share them
    Draw: function (g) {
        // ...
    }
};

... JavaScript中的继承非常奇怪。