5154

在JavaScript的广袤世界中，this关键字如同一把双刃剑，它提供了强大的上下文访问能力，却也是无数开发者，尤其是初学者，频频遭遇报错的根源。this的指向问题并非源于其本身设计的复杂性，而在于它独特的“运行时绑定”机制，理解其核心规律，便能化繁为简，从容应对各类this相关报错。

this的值并非在函数编写时确定，而是在函数被调用时根据其调用方式动态决定，它的指向完全取决于函数的执行上下文，正是这种动态性，使得脱离了调用环境去预判this的值几乎是不可能的,这也是绝大多数错误的起点。

常见的this报错场景

理解this陷阱的最佳方式,就是直面那些最常见的错误场景。

全局函数与独立调用

当函数作为独立个体被直接调用时，其内部的this在非严格模式下指向全局对象（浏览器中为window，Node.js中为global），而在严格模式下则为undefined，这是最常见的“丢失上下文”场景。

function showThis() {
  console.log(this);
}
showThis(); // 非严格模式: window, 严格模式: undefined

这种看似简单的行为，在面向对象编程中会引发问题，当一个对象的方法被赋值给一个变量，随后通过该变量调用时，同样会发生独立调用，导致this丢失。

回调函数中的this丢失

这是一个经典的“重灾区”，当我们将对象的方法作为回调函数传递给另一个函数（如setTimeout、事件监听器或数组方法）时，该方法在被调用时，其内部的this通常不再指向原对象，而是指向了全局对象或undefined。

const myObject = {
  name: 'My Object',
  getName: function() {
    console.log(this.name);
  }
};
// 错误示范
setTimeout(myObject.getName, 1000); // 1秒后输出: undefined (非严格模式下可能输出空字符串或window的name属性)

为什么会这样？因为setTimeout接收到的是myObject.getName这个函数的引用，它会在一个全新的上下文中独立调用这个函数，此时myObject的上下文已经完全丢失。

嵌套函数中的this

在对象的方法内部，如果再定义一个普通函数，那么这个内部函数的this同样会遵循独立调用的规则，指向全局对象或undefined,而不是外层方法所指向的对象。

const myObject = {
  value: 42,
  method: function() {
    console.log(this.value); // 正确: 42
    function innerFunction() {
      console.log(this.value); // 错误: undefined
    }
    innerFunction(); // 独立调用
  }
};
myObject.method();

解决方案与最佳实践

幸运的是，JavaScript提供了多种机制来显式或隐式地控制this的指向,从而有效规避上述错误。

箭头函数

ES6引入的箭头函数（=>）是解决this指向问题的利器，箭头函数没有自己的this绑定，它会捕获其定义时所在（词法作用域）的this值,这使得它在回调函数和嵌套函数中表现得尤为出色。

const myObject = {
  name: 'My Object',
  getName: function() {
    // 使用箭头函数作为回调，捕获外层method的this
    setTimeout(() => {
      console.log(this.name); // 正确: 'My Object'
    }, 1000);
  }
};
myObject.getName();

.bind() 方法

Function.prototype.bind()方法可以创建一个新函数，这个新函数的this值会被永久地绑定到bind传入的第一个参数上,无论后续如何调用。

const myObject = {
  name: 'My Object',
  getName: function() {
    console.log(this.name);
  }
};
// 使用bind创建一个this已绑定的新函数
const boundGetName = myObject.getName.bind(myObject);
setTimeout(boundGetName, 1000); // 正确: 'My Object'

.call() 和 .apply() 方法

与bind不同，.call()和.apply()会立即执行函数，并允许你在调用时动态指定this的值，它们的主要区别在于传参方式：.call()接受一个参数列表，而.apply()接受一个包含多个参数的数组。

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'Alice' };
greet.call(person, 'Hello', '!'); // 立即执行，输出: Hello, Alice!
greet.apply(person, ['Hi', '.']); // 立即执行，输出: Hi, Alice.

保存this到变量（经典模式）

在箭头函数普及之前，一种常见的做法是将外层作用域的this保存到一个变量中（通常命名为self、that或vm）,然后在内部函数中使用该变量。

const myObject = {
  values: [1, 2, 3],
  doubleValues: function() {
    const self = this; // 保存外层this
    this.values.forEach(function(value) {
      console.log(value * 2, self); // 使用self而非this
    });
  }
};

this指向速查表

为了更清晰地梳理this的规则,可以参考下表：

相关问答FAQs

问题1：为什么在React组件的事件处理函数中，如果我使用普通函数而不是箭头函数，this会是undefined？

解答： 这并非React特有的行为，而是JavaScript本身机制与React类组件设计共同作用的结果，在React类组件中，你编写的方法（如handleClick）在默认情况下并不会自动绑定到组件实例上，当你在JSX中将this.handleClick作为回调传递给onClick事件时，React内部会在一个全新的上下文中调用这个函数，相当于独立调用，由于React的组件代码通常在严格模式下运行，因此独立调用的函数其内部的this会是undefined。

解决方案有两种：

1. 在构造函数中绑定：this.handleClick = this.handleClick.bind(this);
2. 使用类属性语法定义箭头函数：handleClick = () => { ... }，这是现代React开发中更受青睐的方式，因为箭头函数会自动捕获其定义时的this,也就是组件实例。

问题2：在什么情况下应该选择.bind()而不是箭头函数？

解答： 尽管箭头函数因其简洁和词法绑定特性而广受欢迎，但.bind()在某些特定场景下依然有其不可替代的价值：

1. 动态创建特定上下文的函数：当你需要从一个“模板”函数中创建多个具有不同this绑定的新函数时，.bind()非常合适，你可以有一个通用的工具函数，然后为不同的对象实例创建多个绑定了各自上下文的版本。

   function multiply(a, b) {
     return a * b * this.multiplier;
   }
   const doubler = { multiplier: 2 };
   const tripler = { multiplier: 3 };
   const double = multiply.bind(doubler, 5);
   const triple = multiply.bind(tripler, 5);
   double(3); // 5 * 3 * 2
   triple(2); // 5 * 2 * 3

2. 与期望特定this的旧库或API交互：一些第三方库或原生API可能依赖于函数的this绑定，在这些情况下，使用.bind()可以更明确地表达“我正在为这个特定的调用约定设置上下文”的意图,代码可读性可能更高。
3. 构造函数绑定：.bind()可以用来预填充构造函数的参数，并创建一个具有特定this上下文的新构造函数，这是箭头函数无法做到的（箭头函数不能用作构造函数）。

对于绝大多数回调函数和内部函数的场景，箭头函数是首选，但在需要动态、显式地创建具有特定上下文的新函数时，.bind()是一个强大且明确的工具。