js 中改变 this 指向的方法有哪些

在 JavaScript 编程中，this 指向的灵活性既强大又容易让人困惑。掌握改变 this 指向的方法，对于编写高效、灵活的代码至关重要。下面我们就来探讨几种常见改变 this 指向的方法。

1. call 方法

call 方法是 JavaScript 中改变 this 指向的一种简单直接的方式。它允许你在调用函数时立即设置 this 的值。其语法为 function.call(thisArg, arg1, arg2,...)，其中 thisArg 是要设置的 this 的新值，后面的参数是传递给函数的参数。例如：

const person = {
  name: 'John',
  sayHello: function (message) {
    console.log(`${message}, ${this.name}`);
  }
};
const newPerson = { name: 'Jane' };
person.sayHello.call(newPerson, 'Hi'); 

这里通过 call 方法将 sayHello 函数内部的 this 指向了 newPerson，所以输出的是 “Hi, Jane”。

2. apply 方法

apply 方法和 call 方法非常相似，不同之处在于参数的传递方式。apply 方法的语法是 function.apply(thisArg, [arg1, arg2,...])，参数以数组的形式传递。例如：

const numbers = [1, 2, 3, 4, 5];
const maxNumber = Math.max.apply(null, numbers); 
console.log(maxNumber); 

这里将 Math.max 函数的 this 指向设置为 null，并且通过数组传递参数，最终得到数组中的最大值 5。

3. bind 方法

bind 方法会创建一个新函数，在调用新函数时 this 的值会被设置为你指定的值。语法为 function.bind(thisArg, arg1, arg2,...)。例如：

const calculator = {
  base: 10,
  add: function (num) {
    return this.base + num;
  }
};
const newAdd = calculator.add.bind(calculator, 5);
console.log(newAdd()); 

通过 bind 方法创建了新函数 newAdd，this 指向 calculator，并且预设了一个参数 5，所以最终输出 15。

4.箭头函数

箭头函数没有自己独立的 this，它会继承外层的 this 值。例如：

const outerObject = {
  value: 42,
  getValue: function () {
    const innerFunction = () => {
      console.log(this.value);
    };
    innerFunction();
  }
};
outerObject.getValue(); 

这里箭头函数 innerFunction 继承了外层 getValue 函数的 this，所以输出 42。

了解并熟练运用这些改变 this 指向的方法，能够让我们在 JavaScript 编程中更加得心应手，编写出结构清晰、逻辑严谨的代码。