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之外）。

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

this.turnToMouse();

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

我错过了什么吗？

PS：如果你想看到我现在使用工作头像和对象头像的代码，click this link in google chrome。

Answer 1

JavaScript有一个名为hoisting的概念。这样做是因为有些陈述被提升了＃34;在范围的顶部。

在您的特定情况下，您的function Avatar(...) { ... }定义已悬挂，以便在您致电new Avatar(...)时可以使用该定义。如果不是，那么您的代码就不会那么远，因为Avatar技术上还没有定义。

然而，遇到问题的是，并非所有事情都悬而未决。在您调用Avatar.prototype.turnToMouse 之后，您对[{1}}的作业仍会发生，这意味着该方法在运行时尚不存在！

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

PS。如果你没有在构造函数中调用该方法，那么它就可以了，因为原型中的属性即使对于在分配之前创建的实例也是可用的，只是在执行期间不可用，直到它们实际上已经存在分配

PPS。对于您的Avatar.prototype电话，您将遇到this绑定的其他问题。要修复它，只需将其更改为：

setTimeout

为什么会这样，我会留下另一个答案，但如果您在function binding/context上阅读，可以在线查找资源。

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

1 个答案: