JavaScript：无法识别对象的方法；为什么不？

Question

我正在尝试创建一个可以跟随鼠标转动的头像。

---

我已经成功创建了一个工作化身，现在我想用对象构造函数创建一个相同的化身。基本上一切都是一样的，除非我会输入var angleToBe; 我会写this.angleToBe;。一切都直接链接到构造函数。在我找到方法之前我没有任何问题，特别是turnToMouse。我的语法如下所示：

Avatar.prototype.turnToMouse = function() {
  if (this.canTurn) {
    this.spotX = this.body.position.x;
    this.spotY = this.body.position.y;
    this.spotY = this.spotY * -1 + height;
    this.body.angleToBe = Math.atan2(cursorX - this.spotX, cursorY - this.spotY);
    this.body.__dirtyRotation = true;
    this.body.__dirtyPosition = true;
    this.gun.__dirtyRotation = true;
    this.gun.__dirtyPosition = true;
    this.body.rotation.set(0, 0, avatarAngleToBe);
  }
  setTimeout(this.turnToMouse, time);
};

头像是构造函数。

本质上，这个函数只是不断地将头像（和它的枪）转向鼠标的方向。这个函数可以正常工作，因为它与我当前的工作函数完全相同（除了this's）。

我遇到的问题是，当我将此代码放入构造函数（即function Avatar() {}）时：

this.turnToMouse();

应该调用我的函数，编辑认为没有函数'turnToMouse()'。

我错过了什么吗？

PS：如果您想查看我现在拥有的工作头像和对象头像的代码，click this link in google chrome。

Answer 1

JavaScript 有一个名为hoisting 的概念。它的作用是一些语句被“提升”到范围的顶部。

在您的特定情况下，您的function Avatar(...) { ... } 定义被提升，以便在您调用new Avatar(...) 时可用。如果不是这样，您的代码就不会走那么远，因为从技术上讲，Avatar 尚未定义。

但是，您遇到问题的地方是并非所有东西都被吊起。您对Avatar.prototype.turnToMouse 的分配仍然发生在您调用new Avatar(...) 之后，这意味着该方法在运行时还不存在！

要解决此问题，只需确保在分配了所有 Avatar.prototype 属性之后运行new Avatar(...)。

---

PS。如果您没有在构造函数中调用该方法，那也没关系，因为原型中的属性即使对于在分配之前创建的实例也是可用的，只是在执行期间直到它们被实际分配后才可用。

---

PPS。关于setTimeout 调用，您将遇到this 绑定的另一个问题。要解决这个问题，只需将其更改为：

var avatar = this;
setTimeout(function () { avatar.turnToMouse(); }, time);

为什么会这样，我会离开寻找另一个答案，但如果您阅读 function binding/context，您可以在线找到资源。