Question

我有这样的代码：

var Obj = {
  el : document.getElementById("elementId"),

  doSomething : function(){ this.el.property = "value" }
};

Obj.el.addEventListener('click', Obj.doSomething);

但触发click事件时元素this.el未定义？是什么导致这种情况发生？

注意：我不知道如何在这个编辑器的代码中划分界限，这就是为什么它在一行中。

Answer 1

在JavaScript中（与大多数语法类似的其他语言不同），this完全由如何调用函数定义，而不是定义它的位置。调用事件处理程序的方式，函数中的this不会引用您的对象。

您可以通过三种方式纠正错误：

如果您要定位支持ES5的浏览器或包含ES5“垫片”，请使用Function#bind：

var Obj = {
  el : document.getElementById,

  doSomething : function(){ this.el.property = "value" }
};

Obj.el.addEventListener('click', Obj.doSomething.bind(Obj));

否则，请使用closure：

var Obj = {
  el : document.getElementById,

  doSomething : function(){ this.el.property = "value" }
};

Obj.el.addEventListener('click', function(event) {
    return Obj.doSomething(event);
});

正如RobG在评论中指出的那样，因为你只有一个 Obj对象（而不是有一个构造函数或者根据需要创建多个对象的东西），你可以使用变量（Obj）而不是this来引用该对象：
```
var Obj = {
  el : document.getElementById,

  // Obj instead of this ---v
  doSomething : function(){ Obj.el.property = "value" }
};

Obj.el.addEventListener('click', Obj.doSomething);
```
仅当对象在其定义的范围内是一次性时才有效（对于Obj示例，这是正确的）。如果您唯一的引用是this（例如，您没有Obj），则您无法执行此操作并且需要前两个选项之一。
< / LI>
更多：
- Mythical methods
- You must remember this
请注意，您的el属性是可疑的。你已将其定义为
```
el : document.getElementById,
```
...这意味着el现在指向功能 getElementById。这可能不是你的意思。大概是你的意思是el引用你通过 getElementById检索的DOM元素，例如：

el : document.getElementById("someIdValue"),

更多here。

无法访问事件中的对象属性

1 个答案: