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);