VScode插件：前端每日一题

箭头函数的 this 指向哪里?

箭头函数的 this 指向是 静态的，它会继承定义该箭头函数的外部上下文中的 this。也就是说，箭头函数 没有自己的 this，而是使用外部作用域（即创建箭头函数时的作用域）中的 this。

这与普通函数的行为不同，普通函数的 this 会根据调用时的上下文而动态确定。

1. 箭头函数中的 this：继承自外部作用域

箭头函数的 this 是在函数定义时确定的，绑定到其所在的上下文。它不会根据函数的调用方式（如直接调用、作为方法调用、作为构造函数调用等）动态改变。

示例：

function Person(name) {
  this.name = name;
  
  // 箭头函数
  this.sayHello = () => {
    console.log(`Hello, my name is ${this.name}`);
  };
}

const person = new Person('Alice');
person.sayHello();  // 输出: Hello, my name is Alice

在上面的代码中，this.sayHello 是一个箭头函数，this 继承了 Person 构造函数中的 this（即 person 对象）。因此，即使我们将 sayHello 方法赋给其他变量并调用，this 仍然指向 person：

const greet = person.sayHello;
greet();  // 输出: Hello, my name is Alice

箭头函数的 this 保持不变，仍然指向 person 对象，而不是调用 greet() 时的上下文。

2. 普通函数中的 this：动态绑定

普通函数的 this 会根据函数的调用方式动态确定。如果我们在上述代码中将 sayHello 改为一个普通函数，那么 this 的指向会变化：

function Person(name) {
  this.name = name;
  
  // 普通函数
  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
}

const person = new Person('Alice');
const greet = person.sayHello;
greet();  // 输出: Hello, my name is undefined

在这个例子中，greet() 被调用时，this 不再指向 person 对象，而是指向了全局对象（在浏览器中是 window 对象），因为普通函数的 this 在调用时会根据执行环境来决定。

3. 箭头函数的 this 绑定规则

• 箭头函数的 this 由函数定义时的作用域决定，而不是调用时的上下文。
• 箭头函数没有自己的 this，它的 this 始终指向 外部作用域 中的 this。
• 箭头函数不能用作构造函数，因此不能使用 new 来实例化。

4. 例外：箭头函数中的 this 与 setTimeout 结合

通常在使用传统的函数时，this 会发生变化。举个例子，setTimeout 中的回调函数如果是普通函数，它的 this 会指向全局对象：

function Person(name) {
  this.name = name;

  // 普通函数
  setTimeout(function() {
    console.log(this.name);  // `this` 指向全局对象，输出 undefined
  }, 1000);
}

const person = new Person('Alice');

如果我们改用箭头函数，this 就会正确地指向外部作用域中的 this：

function Person(name) {
  this.name = name;

  // 箭头函数
  setTimeout(() => {
    console.log(this.name);  // `this` 指向 `Person` 对象，输出 Alice
  }, 1000);
}

const person = new Person('Alice');

总结：

• 箭头函数的 this：始终继承自定义时的外部上下文，而不是调用时的上下文。
• 普通函数的 this：根据函数调用时的上下文动态绑定。

在Vue中：

在 Vue 中，箭头函数的 this 行为和普通 JavaScript 中的 this 行为是一样的。然而，在 Vue 组件中，this 主要指向 Vue 实例，因此理解如何在 Vue 中使用箭头函数非常重要，尤其是在组件方法、生命周期钩子和事件处理器中。

1. 箭头函数和 Vue 实例中的 this

在 Vue 中，组件的 this 是指向 Vue 实例的。因此，任何访问 this 的地方都应该指向 Vue 实例中的数据、方法或计算属性。

普通函数：this 是动态绑定的，指向调用该方法的上下文。

箭头函数：this 会静态绑定到函数定义时的上下文，而不是调用时的上下文。

在 Vue 组件中的常见问题：箭头函数导致 this 指向错误

在 Vue 组件中，如果你在事件处理器或生命周期钩子中使用箭头函数，this 可能不会指向 Vue 实例。这是因为箭头函数会捕获定义时的 this，而不是 Vue 实例。

2. 常见的错误：事件处理器中的箭头函数

假设我们在 Vue 组件的 methods 中使用箭头函数作为事件处理器：

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  methods: {
    handleClick: () => {
      console.log(this.message);  // `this` 在这里指向的是箭头函数定义时的外部作用域，而不是 Vue 实例
    }
  }
}
</script>

在这个例子中，handleClick 是一个箭头函数，而 this 会指向它的外部作用域（可能是 window 或 undefined，具体取决于代码的执行环境），而不是 Vue 实例，因此 this.message 会导致 undefined 或错误。

3. 正确的做法：避免在 methods 中使用箭头函数

为了确保 this 正确指向 Vue 实例，应该避免在 Vue 组件的 methods 或生命周期钩子中使用箭头函数。改用常规的函数定义：

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  methods: {
    handleClick() {
      console.log(this.message);  // `this` 在这里指向 Vue 实例，输出 'Hello, Vue!'
    }
  }
}
</script>

在这种情况下，handleClick 是一个普通的函数，this 正确地指向 Vue 实例。

4. 箭头函数在 Vue 生命周期钩子中的使用

在 Vue 生命周期钩子中使用箭头函数时，也可能导致 this 指向错误。例如：

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  created: () => {
    console.log(this.message);  // `this` 会指向外部作用域，而不是 Vue 实例
  }
}

在上面的例子中，created 是一个箭头函数，this 会指向外部作用域，导致访问 Vue 实例的 message 时出错。

5. 正确使用生命周期钩子中的 this

你应该使用常规函数表达式来定义生命周期钩子，确保 this 指向 Vue 实例：

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  created() {
    console.log(this.message);  // `this` 正确指向 Vue 实例，输出 'Hello, Vue!'
  }
}

6. 箭头函数在事件处理器外的其他用途

箭头函数在 Vue 中仍然有其合适的使用场景，特别是在方法中不需要访问 this 时，或者你想确保 this 在某些内部回调中保持一致。例如，箭头函数可以用于非 Vue 事件处理器的内部函数或计算属性的回调。

示例： 使用箭头函数处理数组操作的回调：

export default {
  data() {
    return {
      numbers: [1, 2, 3, 4]
    };
  },
  methods: {
    doubleNumbers() {
      return this.numbers.map(num => num * 2);  // 箭头函数在这里没问题，`this` 会正确指向 Vue 实例
    }
  }
}

总结：

• 箭头函数的 this 在 Vue 组件中是静态绑定的，会继承外部作用域中的 this，因此通常不建议在 Vue 组件的事件处理器、方法、生命周期钩子中使用箭头函数。
• 在 Vue 中，this 需要指向 Vue 实例来访问数据、方法等，所以在 methods 或生命周期钩子中应使用普通的函数声明，以确保 this 正确指向 Vue 实例。
• 箭头函数的合适场景：可以在 Vue 中用于不依赖于 this 的回调函数或函数内部的操作，例如数组的 map、filter、forEach 等操作。