this 指向与箭头函数：剖析 JavaScript 上下文之谜

前端

2023-10-08 05:08:09

一、this 指向与 JavaScript 上下文

在 JavaScript 中，this 指向当前执行代码块的作用域对象。理解 this 指向的关键在于理解 JavaScript 的上下文。JavaScript 有两种主要上下文：全局上下文和函数上下文。

1. 全局上下文

全局上下文是 JavaScript 程序的默认上下文，也是整个程序的根上下文。在全局上下文中，this 指向 window 对象。window 对象是浏览器中的全局对象，它包含了浏览器中所有可用的属性和方法。

2. 函数上下文

当一个函数被调用时，它会创建一个新的函数上下文。在函数上下文中，this 指向函数本身。也就是说，在函数内部，this 指向的是当前正在执行的函数。

二、箭头函数与 this 指向

箭头函数是一种匿名函数，它使用 => 符号而不是 function 关键字来定义。箭头函数没有自己的作用域，它继承其父级作用域的上下文。因此，在箭头函数内部，this 指向与父级作用域中的 this 指向相同。

1. 箭头函数作为方法

箭头函数不能被用作方法。这是因为箭头函数没有自己的作用域，因此它无法访问其所属对象的数据和方法。例如，以下代码会抛出一个错误：

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    // 错误：箭头函数没有自己的作用域，因此无法访问其所属对象的数据和方法
    const sayHello = () => {
      console.log(`Hello, ${this.name}!`);
    };

    sayHello();
  }
}

2. 箭头函数作为回调函数

箭头函数常被用作回调函数。回调函数是传递给其他函数作为参数的函数。在回调函数内部，this 指向与父级作用域中的 this 指向相同。例如，以下代码中，箭头函数作为回调函数传递给 setTimeout 函数：

const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

setTimeout(() => {
  // 在箭头函数内部，this 指向 person 对象
  this.greet();
}, 1000);