this指向趣谈：解析箭头函数和父作用域中的this

箭头函数与 this 指向

了解箭头函数

箭头函数，又称 Lambda 函数，是 ES6 引入的一种语法糖，可简化函数声明。它们使用箭头符号 => 代替传统函数语法中的 function ，且没有自己的 this 关键字。这意味着箭头函数中的 this 指向与父级作用域中的 this 指向相同。

代码示例

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

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

person.greet(); // 输出: Hello, my name is John Doe
greetArrow(); // 错误: Cannot read property 'name' of undefined

在上述示例中，greet 方法是一个普通函数，拥有自己的 this 关键字，指向 person 对象。当我们调用 person.greet() 时，this 指向 person 对象，允许我们使用 this.name 访问其 name 属性。

另一方面，greetArrow 是一个箭头函数，它没有自己的 this 关键字，而是继承父级作用域中的 this 指向。当 greetArrow 被调用时，它的父级作用域是 person 对象，因此 this 指向 person 对象。然而，由于箭头函数没有自己的 this 关键字，直接调用 greetArrow 会导致 this 指向 undefined，引发错误。

父级作用域中的 this 指向

在 JavaScript 中，this 指向取决于函数的调用方式。如果一个函数作为对象方法被调用，那么 this 指向该对象；如果一个函数作为独立函数被调用，那么 this 指向 window 对象。

代码示例

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

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

// 独立函数
const greet = person.greet;
greet(); // 错误: Cannot read property 'name' of undefined

在上述示例中，greet 方法是一个普通函数，它有自己的 this 关键字，指向 person 对象。当我们调用 person.greet() 时，this 指向 person 对象，允许我们使用 this.name 访问其 name 属性。

然而，当我们将 greet 方法赋值给变量 greet 并直接调用它时，greet 方法的 this 指向 window 对象，而不是 person 对象。这是因为 greet 方法现在作为一个独立函数被调用，而不是作为一个对象方法被调用。

结论

箭头函数没有自己的 this 关键字，而是继承父级作用域中的 this 指向。因此，在使用箭头函数时，我们需要特别注意父级作用域中的 this 指向，以确保箭头函数能够正常工作。

常见问题解答

1. 箭头函数是否总是比普通函数更好？

   • 不一定，在某些情况下，普通函数可能更合适，例如需要绑定特定 this 值的情况。

2. 我可以使用箭头函数在父级作用域之外访问 this 吗？

   • 不可以，箭头函数不能脱离其父级作用域访问 this。

3. 箭头函数中的 this 指向是否会受到严格模式的影响？

   • 是的，在严格模式下，箭头函数中的 this 指向 undefined。

4. 箭头函数可以作为构造函数使用吗？

   • 不可以，箭头函数不能作为构造函数使用，因为它们没有自己的 this 关键字。

5. 箭头函数是否可以用于事件处理程序？

   • 是的，箭头函数可以用于事件处理程序，因为它们可以保持 this 指向与父级作用域中的 this 指向相同。