this 的前世今生：从普通函数调用到箭头函数的妙用

不懂就问 | 一文弄懂 this 的前世今生

引言

在 JavaScript 的江湖中，this可谓是武功高强，变化多端，让人捉摸不透。本文将揭开this的神秘面纱，带你领略它的前世今生，助你成为一名合格的 JavaScript 武林高手。

前世：this的诞生

this关键字的诞生离不开它的家族，函数调用。当函数被调用时，this就会应运而生，代表着函数执行时的当前上下文。就像电视剧中的场景转换，this就是那个代表着当前场景的摄像机。

今生：this的变幻

this的变幻莫测，取决于函数调用的方式：

• 普通函数调用： this指向全局对象（浏览器中为window对象）
• 方法调用： this指向调用该方法的对象
• 构造函数调用： this指向新创建的对象
• 箭头函数： this继承父级作用域的this

这些变化就像武侠小说中的轻功，让你在不同的场景中穿梭自如。

实例探秘

普通函数调用：

function showThis() {
  console.log(this); // 输出 window 对象
}

showThis(); // 输出 window 对象

方法调用：

const obj = {
  name: "张三",
  showName: function() {
    console.log(this.name); // 输出 "张三"
  }
};

obj.showName(); // 输出 "张三"

构造函数调用：

function Person(name) {
  this.name = name;
}

const p = new Person("李四");
console.log(p.name); // 输出 "李四"

箭头函数：

const parentThis = "张三";

const child = () => {
  console.log(this.parentThis); // 输出 undefined（箭头函数无自己的 `this`）
};

child(); // 输出 undefined

限制条件

结尾

this的灵活运用是 JavaScript 编程中的关键技能，掌握了它，你的代码功力将更上一层楼。就像武侠小说中的秘籍，this的奥秘等待着你的探索和破解。