2

我正在尝试找到学习 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_id.addEventListener("mousedown", obj.fun, false);

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

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

4

1 回答 1

3

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

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

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

或（与 IE8 兼容）

canvas_id.addEventListener("mousedown", function(){ obj.fun() }, false);
于 2013-10-31T15:24:01.523 回答