Question

我有下面的类初始化鼠标事件的canvas元素。侦听器在构造函数中初始化，但是当事件触发时我调用findxy时，对变量this.flag的引用会导致错误，因为它们未定义，这使我认为侦听器正在丢失其调用this时引用findxy。我不确定如何解决此问题。提前致谢。

class Signature {
  constructor() {
    this.signed = false;
    this.prevX = 0;
    this.currX = 0;
    this.prevY = 0;
    this.currY = 0;
    this.dot_flag = false;
    this.flag = false;
    this.canvas = document.getElementById('can');

    this.ctx = this.canvas.getContext("2d");
    this.w = this.canvas.width;
    this.h = this.canvas.height;

    this.canvas.addEventListener("touchmove", function(e) {
      mobilexy('move', e)
    }, false);
    
    this.canvas.addEventListener("touchstart", function(e) {
      mobilexy('down', e)
    }, false);
    
    this.canvas.addEventListener("touchleave", function(e) {
      mobilexy('up', e)
    }, false);

    this.canvas.addEventListener("mousemove", function(e) {
      findxy('move', e)
    }, false);
    
    this.canvas.addEventListener("mousedown", function(e) {
      findxy('down', e)
    }, false);
    
    this.canvas.addEventListener("mouseup", function(e) {
      findxy('up', e)
    }, false);
    
    this.canvas.addEventListener("mouseout", function(e) {
      findxy('out', e)
    }, false);

    findxy(res, e) {
      if (res == 'down') {
        this.prevX = this.currX;
        this.prevY = this.currY;
        this.currX = e.pageX - this.canvas.offsetLeft;
        this.currY = e.pageY - this.canvas.offsetTop;

        this.flag = true;
        this.dot_flag = true;
        
        if (this.dot_flag) {
          this.ctx.beginPath();
          this.ctx.fillStyle = x;
          this.ctx.fillRect(currX, currY, 2, 2);
          this.ctx.closePath();
          this.dot_flag = false;
        }
      }
      
      if (res == 'up' || res == "out") {
        this.flag = false;
      }
      
      if (res == 'move') {
        if (this.flag) {
          this.prevX = this.currX;
          this.prevY = this.currY;
          this.currX = e.pageX - canvas.offsetLeft;
          this.currY = e.pageY - canvas.offsetTop;
          draw();
        }
      }
    }
  }

我的错误：

未捕获的ReferenceError：未定义标志
      在findxy（jobs.self-self-09776d4c973306a740403ee614a19882dd0d4d402c0c72bba61747ef44c6ab2b.js？body = 1：191）
      在HTMLCanvasElement。（signature.self-e4f9a6f8d0069a7e6488dd64f3234fbdf4b0c2004f9de362da627d0176111f06.js？body = 1：31）
      findxy @ jobs.self-09776d4c973306a740403ee614a19882dd0d4d402c0c72bba61747ef44c6ab2b.js？body = 1：191
      （匿名）@ signature.self-e4f9a6f8d0069a7e6488dd64f3234fbdf4b0c2004f9de362da627d0176111f06.js？body = 1：31       09：37：56.162

Answer 1

范围不随呼叫转移。您需要将this引用作为参数传递：

this.canvas.addEventListener("mouseout", function (e) {
  findxy('out', e, this)
}, false); 

findxy(res, e, _this) {
  // call it something more appropriate than '_this' - this is just an example
  _this.prevY = ...;
}

或使用call()提供范围：

this.canvas.addEventListener("mouseout", function (e) {
  findxy.call(this, 'out', e)
}, false);

或者使用jQuery替代call()的{{1}}：

$.proxy()

侦听器丢失对“ this”的引用-jQuery

1 个答案: