2.7.2 箭头函数中的this-Vue.js从入门到精通(一)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(一)

### 2.7.2 箭头函数中的`this`

在JavaScript中，`this`关键字的行为一直是初学者乃至资深开发者容易混淆的概念之一。它的值取决于函数是如何被调用的，这一特性在普通函数（也称为非箭头函数）中尤为明显。然而，随着ES6（ECMAScript 2015）的发布，箭头函数（Arrow Functions）被引入，为`this`的绑定方式带来了革命性的变化。本章节将深入探讨箭头函数中`this`的行为，以及它如何与传统函数中的`this`形成对比，帮助读者更好地理解和应用这一特性。

#### 2.7.2.1 理解`this`在传统函数中的行为

在探讨箭头函数中的`this`之前，有必要先回顾一下在普通函数（即非箭头函数）中`this`的行为。在JavaScript中，`this`的值在函数执行时确定，而不是在函数定义时。它主要有以下几种情况：

1. **全局环境下**：在全局执行环境中（如浏览器中的全局对象是`window`），`this`指向全局对象。
   
2. **函数作为普通函数调用时**：`this`指向全局对象（在严格模式下为`undefined`）。

3. **函数作为对象的方法调用时**：`this`指向调用该方法的对象。

4. **构造函数中**：在构造函数中使用`new`关键字调用时，`this`指向新创建的对象实例。

5. **使用`call`、`apply`、`bind`方法时**：可以显式地设置`this`的值。

这些规则使得`this`的指向变得复杂且难以预测，特别是在回调函数、事件处理器等场景中。

#### 2.7.2.2 箭头函数简介

箭头函数是ES6中引入的一种更简洁的函数书写方式，它使用`=>`符号定义函数。箭头函数不仅语法更简洁，而且在处理`this`时表现出与普通函数截然不同的行为。箭头函数不绑定自己的`this`，它会捕获其所在上下文的`this`值，作为自己的`this`值。这意味着，在箭头函数内部，`this`的值不会随着函数调用的改变而改变，它永远指向函数定义时所在的上下文中的`this`。

#### 2.7.2.3 箭头函数中`this`的行为

由于箭头函数不绑定自己的`this`，它主要带来以下几个方面的优势：

1. **简化`this`的使用**：在回调函数、事件处理器等场景中，经常需要访问外部作用域的`this`值。使用箭头函数可以避免使用`.bind(this)`或设置变量来保存`this`的引用，从而使代码更加简洁。

2. **减少错误**：由于`this`在箭头函数中是静态绑定的，因此不会出现因函数调用方式改变而导致的`this`指向错误的问题。

3. **一致性**：箭头函数提供了一种更一致的方式来处理`this`，使得代码更加容易理解和维护。

#### 2.7.2.4 示例分析

为了更好地理解箭头函数中`this`的行为，我们来看几个具体的例子。

**示例1：在对象方法中使用箭头函数**

```javascript
const obj = {
  x: 42,
  getX: function() {
    return () => this.x; // 箭头函数捕获了外围函数getX的this
  }
};

console.log(obj.getX()()); // 输出：42
```

在这个例子中，`getX`是一个普通函数，它返回了一个箭头函数。由于箭头函数捕获了`getX`执行时的`this`（即`obj`），所以即使在箭头函数外部调用它，`this.x`仍然指向`obj.x`。

**示例2：在定时器中使用箭头函数**

```javascript
function Person() {
  this.age = 0;

setTimeout(() => {
    this.age++; // 箭头函数中的this指向Person的实例
    console.log(this.age);
  }, 1000);
}

const p = new Person();
// 一秒后输出：1
```

在这个例子中，如果`setTimeout`的回调函数是一个普通函数，那么`this`将不会指向`Person`的实例，而是指向全局对象（在浏览器中是`window`）。但是，由于使用了箭头函数，`this`正确地指向了`Person`的实例，从而能够正确地更新和访问`age`属性。

**示例3：与普通函数的对比**

```javascript
const obj = {
  x: 42,
  getXWithArrow: () => this.x, // 错误：这里的this指向全局对象（非严格模式下）或undefined（严格模式下）
  getXWithFunction: function() {
    return this.x;
  }
};

console.log(obj.getXWithArrow()); // 输出：undefined（在非严格模式下可能是window的某个属性，但通常不是预期结果）
console.log(obj.getXWithFunction()); // 输出：42
```

这个例子展示了在对象字面量中直接定义箭头函数的潜在陷阱。由于箭头函数不绑定自己的`this`，且对象字面量的上下文在定义时并不明确（实际上，在定义时，`this`通常指向全局对象），因此`this.x`并不是指向`obj.x`的。相反，它指向全局作用域中的`x`（如果存在的话），或者在严格模式下为`undefined`。

#### 2.7.2.5 结论

箭头函数中的`this`绑定是其最显著也是最有用的特性之一。它简化了在复杂场景中（如回调函数、事件处理器等）对`this`的处理，减少了因`this`指向错误而导致的bug。然而，也需要注意到箭头函数并不总是解决方案，特别是在需要动态绑定`this`（如使用`call`、`apply`、`bind`）或需要定义具有自己`this`上下文的函数（如构造函数）时。因此，在实际开发中，应根据具体情况灵活选择使用普通函数还是箭头函数。

该分类下的相关小册推荐：

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(二)

Vue源码完全解析

TypeScript和Vue从入门到精通(四)

Vue原理与源码解析

TypeScript和Vue从入门到精通(一)

Vue3技术解密

TypeScript和Vue从入门到精通(五)

vuejs组件实例与底层原理精讲

移动端开发指南

VUE组件基础与实战

Vue.js从入门到精通(二)