走进‘this’的世界，探索JavaScript中的灵魂关键字

2023-10-14 09:46:07

JavaScript中的‘this’可谓是初学者绕不开的一大难点，好似一杯浓烈的咖啡，令人沉醉却也叫人困惑，但只要细细品味，慢慢消化，定能从它那苦涩中察觉出一丝甘甜。就像跋涉在山间的道路上，崎岖不平、荆棘丛生，却也正是如此才增添了这趟旅程的意义。

this 的初识：指引方向的灵魂

this 在JavaScript的世界中担当着领航者的角色，它指向当前执行代码所在的上下文对象。它就像一盏明灯，照亮了代码运行时的所属空间。这个空间可以是全局、函数、对象甚至是类。

this 的作用域：穿越时空的链接

this 的工作范围取决于其所在的作用域，就像不同区域的地图一样，每个区域都有其独特的地形和地貌。在全局作用域中，this 指向的是window对象，也就是浏览器窗口本身。而在函数作用域中，this 指向的是当前函数所属的对象，可能是全局对象、某个对象或类。

this 的妙用：信手拈来的灵动

当我们理解了this 的本质和作用范围后，便可熟练运用它来处理各种场景下的问题，就像一位指挥家挥舞手中的指挥棒，演奏出美妙的乐章。

场景一：数据传递

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

function displayInfo() {
  console.log(`姓名：${this.name}, 年龄：${this.age}`);
}

const person1 = new Person('小明', 20);
person1.displayInfo(); // 输出：姓名：小明，年龄：20

在这个例子中，我们创建了Person类和displayInfo函数，this 关键字在Person类的构造函数中指向新创建的对象，而在displayInfo函数中指向调用它的对象，通过巧妙运用this ，我们轻松实现了数据传递。

场景二：事件监听

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

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

在这个例子中，当按钮被点击时，addEventListener函数中的回调函数会被执行，此时this 指向触发事件的元素，即按钮本身。通过this ，我们轻松获取了事件源，便于进行后续处理。

this 的注意事项：小心驶得万年船

在使用this 关键字时，我们也需要注意一些潜在的陷阱，就像行驶在公路上时要注意遵守交通规则，避免事故发生。

陷阱一：箭头函数中的 this**

const person = {
  name: '小明',
  age: 20,
  displayInfo: () => {
    console.log(this); // 输出：undefined
  }
};

person.displayInfo(); // 输出：undefined

在这个例子中，displayInfo函数是一个箭头函数，箭头函数中的this 指向的是定义它的对象，也就是window对象，而非包含它的person对象，因此输出结果为undefined。

陷阱二：使用 call()和 apply()**方法

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

const person1 = new Person('小明', 20);
const person2 = new Person('小红', 18);

person1.displayInfo.call(person2); // 输出：姓名：小红，年龄：18