javascript - 尝试访问原型(prototype)方法中的成员变量

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 5 年前。

我是第一个在 js 中使用 OOP 风格的人，这个范围让我很困惑。

$(document).ready(function() {
  $("#cv").attr({
    width: '860px',
    height: '645px'
  });
  var ctx = new Blackboard($("#cv"));
});

function Blackboard(canvas) {
  this.canvas = canvas;
  this.ctx = this.canvas.get(0).getContext("2d");
  this.drawing = false;
  this.canvas.on('mousedown', this.press);
  this.canvas.on('mousemove', this.move);
  this.canvas.on('mouseup', this.end);
  this.setShape();
}

Blackboard.prototype.setShape = function(color, width) {
  this.color = 'white';
  this.width = 1;
  if (color != null) {
    this.color = color;
  }
  if (width != null) {
    this.width = width;
  }
  this.ctx.strokeStyle = this.color;
  this.ctx.lineWidth = this.width;
}

Blackboard.prototype.press = function(event) {
  console.log(this.ctx); // undefined!
  this.ctx.beginPath();
  this.ctx.moveTo(event.pageX, event.pageY);
  this.drawing = true;
}

Blackboard.prototype.move = function(event) {
  if (this.drawing) {
    this.ctx.lineTo(event.pageX, event.pageY);
    this.ctx.stroke();
  }
}

Blackboard.prototype.end = function(event) {
  this.drawing = false;
}

$("#cv")是 Canvas 元素。

正如我在评论中提到的，每个 this.ctx原型(prototype)方法是 undefined 。尽管我更详细地搜索了有关原型(prototype)的解释，但我找不到我对 this 范围的误解。 .

Answer 1

您所在的事件处理程序中的 this 并不引用 Blackboard。在对 on 的调用中使用 .bind。

this.end = this.end.bind(this);
this.canvas.on('mouseup', this.end);