【JavaScript】改变 this 指向的四种方法详解

JavaScript 中的 this 是一个非常重要且容易困惑的概念，主要用于引用执行上下文。然而，this 的指向经常因为不同的执行环境而改变。为了解决这个问题，JavaScript 提供了多种方法来明确指定 this 的指向。本文将详细介绍 JavaScript 中常用的四种改变 this 指向的方法：bind、call、apply 和箭头函数。

一、this 的基本概念

在 JavaScript 中，this 是一个执行上下文相关的特殊变量。它的值通常根据函数的调用方式来决定，而不是在函数定义时绑定。理解 this 的行为是掌握 JavaScript 中函数执行机制的关键。

1. this 的默认指向

在全局作用域中，this 默认指向 window（在浏览器环境下）。例如：

console.log(this); // 浏览器中输出：Window

在函数内部，this 的指向取决于调用方式。通常，直接调用函数时，this 会指向全局对象：

function showThis() {
  console.log(this);
}

showThis(); // 浏览器中输出：Window

2. 在对象方法中的 this

当函数作为对象的方法被调用时，this 会指向该对象：

const obj = {
  name: 'Object',
  showThis: function () {
    console.log(this);
  }
};

obj.showThis(); // 输出：obj 对象

二、bind、call 和 apply 方法

JavaScript 提供了 bind、call 和 apply 三种方法来手动设置 this 的指向。这些方法在函数执行时起到了非常重要的作用。

1. bind() 方法

bind() 方法返回一个新函数，这个新函数的 this 值会被永久绑定为指定的对象。常用于当我们需要在事件回调或异步操作中确保 this 的指向不变时。

const obj = {
  name: 'Bound Object'
};

function showName() {
  console.log(this.name);
}

const boundShowName = showName.bind(obj);
boundShowName(); // 输出：'Bound Object'

使用场景

bind() 经常用于事件处理程序中。例如，当一个按钮的点击事件发生时，我们希望 this 指向某个特定的对象，而不是默认的 window。

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  const boundHandler = this.handleClick.bind(this);
});

2. call() 方法

call() 方法用于立即调用函数，并指定函数内部的 this。与 bind() 不同，call() 直接执行函数，不会返回新的函数。

const obj = {
  name: 'Call Object'
};

function showName() {
  console.log(this.name);
}

showName.call(obj); // 输出：'Call Object'

传递参数

call() 的一个重要特点是，除第一个参数外，后续所有参数都将依次传递给被调用的函数。例如：

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

greet.call(obj, 'Hello', '!'); // 输出：'Hello, Call Object!'

3. apply() 方法

apply() 和 call() 类似，但它的区别在于，apply() 接受一个参数数组，而不是逐个列出参数。

const obj = {
  name: 'Apply Object'
};

function showNameWithAge(age) {
  console.log(`${this.name}, Age: ${age}`);
}

showNameWithAge.apply(obj, [30]); // 输出：'Apply Object, Age: 30'

传递参数数组

apply() 方法非常适合当我们有一组参数需要传递给函数时使用：

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);
console.log(max); // 输出：7

三、箭头函数中的 this

箭头函数中的 this 与传统函数不同，它不绑定 this，而是继承自上下文。这意味着在箭头函数内部，this 的值与定义箭头函数时的上下文保持一致。

1. 箭头函数 this 继承特性

在普通函数中，this 的指向依赖于调用方式，而在箭头函数中，this 始终保持与它定义时的 this 相同：

const obj = {
  name: 'Arrow Object',
  showThis: () => {
    console.log(this);
  }
};

obj.showThis(); // 输出：Window（箭头函数继承了全局的 `this`）

在这个例子中，showThis 是一个箭头函数，它继承了定义时的全局上下文，因此 this 指向全局对象 window。

2. 箭头函数的常见应用场景

箭头函数在处理回调函数时非常有用，因为它不需要担心 this 的指向会改变。例如，在事件处理程序中，我们可以使用箭头函数来确保 this 的指向保持不变：

const obj = {
  name: 'Event Object',
  handleClick: function () {
    setTimeout(() => {
      console.log(this.name); // 由于箭头函数没有自己的 `this`，它会继承 `handleClick` 方法的 `this`
    }, 1000);
  }
};

obj.handleClick(); // 一秒后输出：'Event Object'

四、总结与最佳实践

1. 何时使用 bind()、call() 和 apply()

• bind()：当你需要在将来某个时刻调用函数，并且确保 this 的指向时，使用 bind()。特别是在事件处理或定时器中，bind() 非常有用。
• call()：如果你需要立即调用函数，并且可以明确传递多个参数，使用 call()。
• apply()：当函数的参数以数组形式存在时，使用 apply()。它能让代码更加简洁、灵活。

2. 箭头函数的最佳实践

• 继承 this：当你需要在嵌套函数中保持 this 指向时，箭头函数是一种简洁的方式，无需显式绑定 this。
• 避免滥用：箭头函数虽然简洁，但它的 this 继承特性在某些场景中可能会带来问题，特别是在面向对象编程中，避免滥用箭头函数作为对象方法。

推荐：

• JavaScript
• react
• vue

---