彻底搞懂JS中的this问题

2023-09-02 00:10:50

在 JavaScript 中，this 是一个非常重要的概念，它决定了函数中 this 的指向。this 的指向可以是全局对象、函数对象、DOM 对象、类实例对象等等。

在事件处理函数中，this 指向什么？

在事件处理函数中，this 指向触发该事件的元素。例如，在一个按钮的点击事件处理函数中，this 指向该按钮。
在回调函数中，this 指向什么？

在回调函数中，this 的指向取决于回调函数的调用方式。如果回调函数作为普通函数调用，则 this 指向全局对象 window。如果回调函数作为对象的方法调用，则 this 指向该对象。
在箭头函数中，this 指向什么？

在箭头函数中，this 的指向与普通函数不同。箭头函数中的 this 指向其外层函数的 this。例如，在一个类的实例方法中，箭头函数中的 this 指向该类的实例对象。

在 JavaScript 中，可以通过以下几种方式控制 this 的指向：

使用 bind() 方法

bind() 方法可以将函数的 this 指向绑定到指定的对象。例如，以下代码将函数 f 的 this 指向绑定到对象 o：
```
const f = function() {
  console.log(this);
};

const o = {
  name: 'John'
};

const boundF = f.bind(o);

boundF(); // { name: 'John' }
```
使用箭头函数

箭头函数的 this 指向与普通函数不同。箭头函数中的 this 指向其外层函数的 this。因此，可以使用箭头函数来控制 this 的指向。例如，以下代码使用箭头函数来将 this 指向绑定到对象 o：
```
const o = {
  name: 'John'
};

const f = () => {
  console.log(this);
};

f(); // { name: 'John' }
```
使用 call() 和 apply() 方法

call() 和 apply() 方法可以将函数的 this 指向绑定到指定的对象。call() 方法接受一个参数列表，apply() 方法接受一个参数数组。例如，以下代码使用 call() 方法将函数 f 的 this 指向绑定到对象 o：
```
const f = function() {
  console.log(this);
};

const o = {
  name: 'John'
};

f.call(o); // { name: 'John' }
```