JavaScript中的this陷阱的最全收集并整理(没有之一)

JavaScript中的this陷阱攻略

简介

JavaScript中的关键字this在很多情况下会导致一些没有预料到的结果，对于这种情况我们称之为this陷阱。为了避免陷入这种情况，必须对this的行为有深入的了解。本文收集并整理了JavaScript中的this陷阱，希望能够帮助大家更好地使用this。

this陷阱

1. 隐式绑定的行为

传统方式下，JS函数内的this指向全局对象，如下：

function show() {
  console.log(this);
}
show(); // Window

此时this指向Window对象，因为这是在全局作用域中调用了show()函数。

那么当函数不是在全局作用域中调用而是在其它对象内部调用呢？此时this指向什么呢？举个例子：

var obj = {
  name: '张三',
  show: function () {
    console.log(this.name);
  }
};
obj.show(); // 张三

在此例中，show()函数在obj对象内部调用，因此this指向obj对象。

但是别着急，隐式绑定有时也会出现问题：

var obj = {
  name: '张三',
  show: function () {
    console.log(this.name);
  }
};
var a = obj.show;
a(); // undefined

在此例中，将obj.show()赋值给变量a，然后使用a()方式调用，发现输出结果为undefined。这是因为在这种情况下，函数show()的执行环境发生了改变，this不再指向obj对象，它指向了全局作用域，因此输出了undefined。

为了避免出现上述问题，通常的解决方法是显式地指定this。

2. 事件处理程序中的this

在事件处理程序中，this通常指向触发事件的元素。例如：

<button id="btn">点击</button>
<script>
  var btn = document.getElementById('btn');
  btn.onclick = function () {
    console.log(this.id); // 输出btn
  };
</script>

在此例中，this指向btn元素。

3. 使用bind()方法

bind()方法可以在调用函数时指定this的值。例如：

var obj = {
  name: '张三',
  show: function () {
    console.log(this.name);
  }
};
var a = obj.show.bind(obj);
a(); // 张三

在此例中，使用bind()方法将obj作为参数传递给bind()，从而将obj绑定为函数show()的this值。

总结

使用this的时候，需要特别注意上述情况，避免陷入this陷阱。在实际开发中，必须深入理解this的行为并恰当地使用它。

示例代码

以下是一个将this绑定的例子：

var obj1 = {
  name: '张三',
  show: function () {
    console.log(this.name);
  }
};
var obj2 = {
  name: '李四'
};
obj1.show.bind(obj2)();  // 李四

在此例中，使用bind()方法将obj1.show()绑定到obj2上，此时this指向obj2对象，因此输出结果为李四。

另一个例子展示了一个对象的方法被赋值给变量并在另一个对象中使用：

var obj1 = {
  name: '张三',
  show: function () {
    console.log(this.name);
  }
};
var obj2 = {
  name: '李四',
  fn: obj1.show
};
obj2.fn();  // 李四

在此例中，将obj1.show()赋值给obj2.fn，然后使用obj2.fn()方式调用，在这种情况下，函数show()的执行环境发生了改变，this不再指向obj1对象，它指向了obj2对象，因此输出了李四。