javascript对象方法定义区别

Question

我正在努力寻找学习 Javascript 的方法，但遇到了一个问题，有人告诉我几段代码是相同的，但结果却不同。我发现有三种定义对象(实例)的方法:

版本 1:

var obj = { //create the instance
  variable: value
};
obj.fun = function() {
  obj.variable += 1;
  console.log('obj.fun is called');
};

版本 2:

var obj = { //create the instance
  variable: value,
  fun: function() {
    this.variable += 1;
    console.log('obj.fun is called');
  }
};

版本 3:

function Obj() { //create the class
  this.variable = value;
  this.fun = function() {
    this.variable += 1;
    console.log('obj.fun is called');
  }
};
obj = new Obj(); //create the instance

事实上，我想做的是使用以下方法在 HTML5 Canvas 中创建鼠标事件处理程序:

canvas_id.addEventListener("mousedown", obj.fun, false);

目前，如果我尝试使用此事件监听器调用函数 obj.fun，则只有版本 1 可用，但我更喜欢使用版本 2，因为我认为它更简洁。在版本 2 和 3 中，该函数在调用 obj.fun(newvalue) 时执行(控制台消息已创建)，但变量未更改为新值；如果我尝试检索 obj.variable，则会返回原始值。

我想知道这三个版本的写作之间的确切区别是什么，这样我就可以了解什么时候使用什么。提前致谢。

Answer 1

您在第一个版本中拥有的是一个命名变量 obj 来保存所需的对象。在另外两个中，this(调用的上下文)不是您的对象(事件处理回调的常见问题)。

您仍然可以通过将绑定(bind)更改为来使用这些版本

canvas_id.addEventListener("mousedown", obj.fun.bind(obj), false);

或者(兼容IE8)

canvas_id.addEventListener("mousedown", function(){ obj.fun() }, false);