JS中让this指向你期望的对象有这6种方式，直接上手，搞定this

前端

2024-01-27 21:38:35

搞定JS this指向问题，你只需掌握这6种方法

如果你想成为一名合格的 JavaScript 开发者，那么你必须搞懂 this 指向问题。这不仅是一个面试必问点，更重要的是，它能帮助你写出更健壮、更易维护的代码。

什么是this指向？

在 JavaScript 中，this 指向当前执行代码的对象。这通常是调用该代码的对象，但也有例外情况。例如，当你在函数内部使用箭头函数时，this 指向就不再是调用该箭头函数的对象，而是箭头函数所在的作用域。

如何控制this指向

有几种方法可以控制 this 指向。最常见的方法是使用bind()、call()和apply()方法。这些方法可以让你显式地设置函数的this指向。

以下是使用bind()、call()和apply()方法的示例：

const person = {
  name: '张三',
  sayHello: function() {
    console.log(`大家好，我叫${this.name}`);
  }
};

const sayHello = person.sayHello;
sayHello(); // 输出：undefined

const sayHelloBind = person.sayHello.bind(person);
sayHelloBind(); // 输出：大家好，我叫张三

const sayHelloCall = person.sayHello.call(person);
sayHelloCall(); // 输出：大家好，我叫张三

const sayHelloApply = person.sayHello.apply(person);
sayHelloApply(); // 输出：大家好，我叫张三

除了bind()、call()和apply()方法之外，你还可以使用箭头函数来控制 this 指向。箭头函数没有自己的this指向，它会继承外层函数的this指向。

以下是使用箭头函数控制 this 指向的示例：

const person = {
  name: '张三',
  sayHello: function() {
    console.log(`大家好，我叫${this.name}`);

    const sayHelloArrow = () => {
      console.log(`大家好，我叫${this.name}`);
    };

    sayHelloArrow();
  }
};

person.sayHello(); // 输出：大家好，我叫张三