JavaScript简餐——this关键字

---

前言

写本《JavaScript简餐》系列文章的目的是记录在阅读学习《JavaScript高级程序设计（第4版）》一书时出现的各个知识点。虽是对读书的笔记和总结，但是希望它轻量、简洁、犀利，不会引起阅读疲劳，可以在碎片化时间和闲暇之余轻巧地沐浴一下知识点。每篇文章只针对一个小部分进行讲解式的梳理，来达到个人复习总结和分享知识的目的。

---

一、this对象

函数中除了arguments对象，另一个特殊的对象是this，它在标准函数和箭头函数中有不同的行为。在标准函数中，this引用的是把函数当成方法调用的上下文对象，这时候通常称其为this值。直接来看一个例子：

window.name = "Lucy";
let person = {
  name: "Jack",
  sayName() {
    console.log(this.name);
  },
};

function sayName() {
  console.log(this.name);
}

sayName(); // Lucy
person.sayName(); // Jack

定义在全局上下文中的函数sayName引用了this对象，要知道的是，在全局上下文中调用函数时，this是指向window的，即this.name等于window.name，所以在这里输出结果为Lucy。而在调用person.sayName时，this会指向person，即this.name等于person.name，所以输出结果是Jack。

在箭头函数中，this引用的是定义箭头函数时的上下文。还是来看之前的例子，只不过在这里我们把标准函数换成箭头函数：

window.name = "Lucy";
let person = {
  name: "Jack",
  sayName: () => {
    console.log(this.name);
  },
};

const sayName = () => {
  console.log(this.name);
};

sayName(); // Lucy
person.sayName(); // Lucy

现在我们发现，两个输出结果都变成Lucy了。这是因为这两次函数的调用中，this全部指向了window对象。可能大家会有个疑问，sayName函数是定义在全局中的，所以调用时this指向window是可以理解的，可为什么调用person.sayName时this也指向了window？这是因为无论对象嵌套有多深,因为作为对象方法的箭头函数不是被普通函数包含,那么this可以理解为总是指向window对象。（具体可以看=>这篇文章<=）。

---

二、区别实例

在事件回调或定时回调中调用某个函数时，this值指向的并非想要的对象。此时将回调函数写成箭头函数就可以解决问题。这是因为箭头函数中的this会保留定义该函数时的上下文：

function person1() {
  this.age = 20;
  setTimeout(() => {
    console.log(this.age);
  }, 1000);
}

function person2() {
  this.age = 20;
  setTimeout(function () {
    console.log(this.age);
  }, 1000);
}

new person1(); // 20
new person2(); // undefined

调用构造函数person1时由于this指向的是定义setTimeout中的箭头函数时的上下文，所以在调用时可以将age的结果20输出。但是在调用构造函数person2时，this是指向window对象的，所以此时输出的就是undefined。

---

总结

以上就是今天要讲的内容，今天讲了一下this的行为以及他在标准函数和箭头函数中的行为差异，并且举了一个在两个函数中区别使用的例子。下一篇我们来讲一下arguments的callee属性、以及函数中的一些使用属性和方法。撒花~