Javascript 中的箭头函数与普通函数的this区别

揭秘 JavaScript 中箭头函数和普通函数的 this 之争

引言

在 JavaScript 的奇妙世界中，this 是一个决定函数内部如何访问其外部环境的关键因素。对于箭头函数和普通函数，this 的使用方式大不相同，从而影响了它们的应用场景。

普通函数的 this

普通函数的 this 值由其调用方式决定。当一个函数作为对象的方法被调用时，this 指向调用它的对象。

const person = {
  name: "John Doe",
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // 输出: Hello, my name is John Doe.

如果普通函数不是作为对象的方法被调用，那么 this 将指向全局对象，通常是 window 对象。

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // 输出: Hello, my name is undefined.

箭头函数的 this

箭头函数没有自己的 this 值。它们继承了其父级作用域中的 this 值，无论如何调用它们。

const person = {
  name: "John Doe",
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // 输出: Hello, my name is John Doe.

箭头函数与普通函数的 this 区别

• 普通函数的 this 值由调用方式决定，而箭头函数的 this 值始终继承自其父级作用域。
• 在普通函数中，如果函数作为对象的方法被调用，this 指向该对象。在箭头函数中，this 始终指向父级作用域中的值。
• 普通函数可以修改其 this 值，而箭头函数不能。

何时使用箭头函数和普通函数

在使用箭头函数和普通函数时，需要考虑以下准则：

• 优先使用箭头函数。 它们更简洁，避免了 this 用法不当导致的错误。
• 使用普通函数访问对象属性或方法。
• 使用普通函数修改 this 值。
• 使用普通函数使用 arguments 对象。

结论

理解箭头函数和普通函数在 this 使用上的区别对于有效利用 JavaScript 至关重要。箭头函数提供了更简洁的语法，而普通函数提供了对 this 值的更多控制。通过仔细考虑这些差异，您可以做出明智的选择，并创建更清晰、更健壮的代码。

常见问题解答

1. 为什么箭头函数没有自己的 this 值？

   • 为了保持简洁和避免意外行为。

2. 如何更改箭头函数中的 this 值？

   • 箭头函数无法修改其 this 值。

3. 普通函数可以访问箭头函数的 this 值吗？

   • 否，箭头函数不会创建新的作用域，因此普通函数不能访问其 this 值。

4. 为什么在构造函数中使用箭头函数会抛出错误？

   • 箭头函数没有自己的 this 值，这意味着它们无法访问构造函数的 new.target 属性。

5. 何时应该优先使用普通函数而不是箭头函数？

   • 当需要访问对象属性或方法，修改 this 值或使用 arguments 对象时。