了解 JavaScript 中 this 的新角度：箭头函数是函数，普通函数是特殊方法

前端

2023-09-28 15:18:49

理解 JavaScript 中的 this：一个全新的视角

在 JavaScript 的世界中，理解 this 变量可能是一项艰巨的任务。但不要气馁！有一个不同的视角可以让你茅塞顿开，让你对 this 有一个清晰的理解。让我们来探索一下吧。

作用域：this 的关键

JavaScript 中的函数作用域决定了 this 的值。作用域是指变量和函数可以被访问和使用的区域。JavaScript 中有两种作用域：

全局作用域： 整个脚本都可以访问变量和函数的作用域。
局部作用域： 函数内部定义的变量和函数的作用域。

箭头函数：真正的函数

箭头函数是 ES6 中引入的一种新函数语法。它们没有自己的作用域，因此它们总是继承父级作用域的 this 值。这使得箭头函数非常适合需要访问父级作用域的场景，比如事件处理程序。

想象一下箭头函数就像一个友好的邻居，它总是借用它父母家的东西。无论你给它什么任务，它都会去父母家寻求帮助。

代码示例：

const button = document.getElementById("button");

button.addEventListener("click", () => {
  console.log(this); // 输出：<button id="button">
});

在这个示例中，箭头函数 () => {} 就像一个友好的邻居，它没有自己的家，所以它借用了 button 元素的"房子"。当这个箭头函数被调用时，它会说："嘿，button，让我借用一下你的 this 值！"

普通函数：特殊结构的方法

普通函数是 JavaScript 中的传统函数语法。它们有自己的作用域，所以它们可以定义自己的 this 值。然而，如果普通函数不是作为方法被调用，它们的 this 值将是全局对象。

把普通函数想象成一个独立的房子，它有自己的规则和设施。如果这个房子不是作为某个对象的"方法"被调用的，它就会觉得它无家可归，只能去大街上闲逛，也就是全局作用域。

代码示例：

function greet() {
  console.log(this); // 输出：window
}

greet(); // 输出：window

在这个示例中，greet() 函数就像一栋独立的房子，它有自己的 this 值。但当它不是作为某个对象的方法被调用时，它就像无家可归一样，它的 this 值变成了 window 对象。

结论：视角的力量

通过将箭头函数视为真正的函数，而普通函数视为特殊结构的方法，我们可以更轻松地理解 JavaScript 中的 this 。箭头函数就像友好的邻居，它们总是借用父级作用域的 this 值。普通函数就像独立的房子，它们有自己的 this 值，但如果它们不是作为方法被调用，它们就会无家可归，只能使用全局对象。

希望这个新的视角能帮助你拨开 JavaScript 中 this 的迷雾。

常见问题解答