领悟 JS 中 this 的妙用：海绵宝宝的编程之旅

2024-01-31 15:06:45

海绵宝宝的 JS 入门奇遇

各位观众朋友，今天，我们这位黄色的好朋友海绵宝宝将带我们踏上学习 JavaScript 的奇妙旅程。而我们的第一站就是神秘莫测的 this 。

this 就像 JavaScript 中的一位变色龙，它可以随着不同场景而变换身份。有时候，它代表着当前对象，有时候又指向调用它的函数。这种神奇的特性让人捉摸不透，也让不少初学者大伤脑筋。

this 与内存中的数据结构

要理解 this 的奥秘，我们必须深入 JavaScript 的内存世界。想象一下，当你创建一个对象时，它就像一个小房间，里面存储着各种属性。而 this 就像房间里的钥匙，它可以打开房间的门，让你访问这些属性。

举个例子，当我们创建了一个名为 SpongeBob 的对象时，其中包含一个名为 "name" 的属性，它的值为 "SpongeBob SquarePants"。要访问这个属性，我们可以使用 this

const SpongeBob = {
  name: "SpongeBob SquarePants",
};

console.log(SpongeBob.name); // 输出: "SpongeBob SquarePants"

上下文绑定：this 的动态本质

this 的神奇之处还在于它的上下文绑定特性。它总是指向当前执行代码的上下文。这意味着，当你在一个对象的方法内部调用 this 时，它将指向该对象。

例如，SpongeBob 有一个名为 "sayHello" 的方法：

const SpongeBob = {
  name: "SpongeBob SquarePants",
  sayHello() {
    console.log(`Hi there, I'm ${this.name}!`);
  },
};

SpongeBob.sayHello(); // 输出: "Hi there, I'm SpongeBob SquarePants!"

箭头函数：this 的例外

然而，JavaScript 中也存在 this 的一个例外，那就是箭头函数。箭头函数没有自己的 this 绑定，而是继承了其外层作用域中的 this 值。

例如，如果我们用箭头函数重写 SpongeBob 的 "sayHello" 方法，它的行为就会有所不同：

const SpongeBob = {
  name: "SpongeBob SquarePants",
  sayHello: () => {
    console.log(`Hi there, I'm ${this.name}!`);
  },
};

SpongeBob.sayHello(); // 输出: undefined

因为箭头函数没有自己的 this 绑定，所以它试图从外层作用域中获取 this 值。然而，在这个例子中，外层作用域是 window 对象，它不包含 "name" 属性，导致输出为 undefined。