TypeError: Cannot read property of instance

Question

我正在尝试在 Adobe Animate 2015 中像这样 http://www.flashuser.net/eyes-following-mouse-cursor-as3 使光标跟随

function getMousePos(canvasDom, mouseEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: mouseEvent.clientX - rect.left,
    y: mouseEvent.clientY - rect.top
  };
}

canvas.addEventListener("mousemove", function (e) {
    mousePos = getMousePos(this, e);

    var xx = mousePos.x - this.Reye.x;
    var yy = mousePos.y - this.Reye.y;
    var radiusR1 = Math.atan2(yy, xx);
    var degreeR1 = radiusR1 / (Math.PI / 180);
    this.Reye.rotation = degreeR1;

}, false);

但是我在浏览器中有错误

TypeError: Cannot read property 'x' of undefined

并且这段代码工作正常

this.addEventListener("click", fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler(evt)
{
    var xx = stage.mouseX - this.Reye.x;
    var yy = stage.mouseY - this.Reye.y;
    var radiusR1 = Math.atan2(yy, xx);
    var degreeR1 = radiusR1 / (Math.PI / 180);
    this.Reye.rotation = degreeR1;
}

Answer 1

你的范围是错误的。

您将匿名函数添加为内联侦听器：

canvas.addEventListener("mousemove", function (e) {

顺便说一句，这是不好的做法，因为您很难再次移除侦听器。挥之不去的侦听器将阻止收集对象并可能导致内存泄漏。

无论如何，匿名函数（闭包）的作用域是全局对象。 this 不会指向定义函数的范围。

在你的第二个例子中，你绑定了范围：

fl_MouseClickHandler.bind(this)

这对命名函数来说不是必需的。

附带说明：使用类型并为事件类型使用定义的常量，例如 MouseEvent.CLICK 用于 "click" - 防止拼写错误并允许代码完成。

TypeError: Cannot read property of instance

TypeError: Cannot read property of instance

actionscript-3

html5-canvas

animate-cc