带你揭秘 this 作用域谜题，直击前端面试重点

this 作用域的前世今生

在 JavaScript 中，this 是一个特殊的，它指向函数执行时的上下文对象。this 的指向会随着函数的调用方式和所属对象的不同而变化。

箭头函数中的 this

箭头函数（又称匿名函数）是一个不带函数名的函数，它没有自己的 this 绑定，而是继承其父级作用域的 this 值。这意味着，箭头函数内部的 this 指向与箭头函数本身的调用方式无关，而是取决于它所在环境的上下文对象。

上下文中寻找 this

在 JavaScript 中，函数可以被独立调用，也可以作为对象的属性被调用。当一个函数作为对象的属性被调用时，该函数内部的 this 指向该对象。例如：

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

person.greet(); // 输出：Hello, my name is John!

在上面的例子中，greet() 方法作为 person 对象的属性被调用，因此 this 指向 person 对象，greet() 方法内部可以使用 this.name 来访问 person 对象的 name 属性。

全局作用域中的 this

当函数在全局作用域中被独立调用时，this 指向 window 对象。例如：

function greet() {
  console.log(`Hello, world!`);
}

greet(); // 输出：Hello, world!

在上面的例子中，greet() 函数在全局作用域中被独立调用，因此 this 指向 window 对象，greet() 方法内部可以使用 this.console 来访问 window 对象的 console 属性。

打破常规：箭头函数的特殊性

箭头函数是 JavaScript 中独一无二的存在，它没有自己的 this 绑定，而是继承其父级作用域的 this 值。这意味着，箭头函数内部的 this 指向与箭头函数本身的调用方式无关，而是取决于它所在环境的上下文对象。

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

person.greet(); // 输出：Hello, my name is undefined!

在上面的例子中，greet() 方法是一个箭头函数，它作为 person 对象的属性被调用。然而，箭头函数内部的 this 指向的不是 person 对象，而是 window 对象。这是因为箭头函数没有自己的 this 绑定，它继承了父级作用域（全局作用域）的 this 值。

总结

this 作用域是前端面试中常见的考察点之一。理解 this 作用域的规则和原理，对于深入理解 JavaScript 的运行机制和解决面试题都非常重要。本文从箭头函数、上下文的概念入手，逐层剖析 this 指向的规则和原理，帮助你全面掌握 this 作用域的知识，为前端面试做好充分准备。