解读 JavaScript 中扑朔迷离的“this”概念

JavaScript 中的 “this” 是什么？

在 JavaScript 中，this 是一个很特别的，它的含义和用法往往让人捉摸不透。简单来说，this 指的是当前执行上下文的指针，即当前代码正在运行的上下文。this 的值根据代码所在的位置和执行环境而有所不同。

1. 全局执行上下文中的 this

当代码不在任何函数或类（实际上类只是特殊的函数）中时，this 指向的是全局执行上下文。在浏览器环境中，全局执行上下文就是 window 对象。这意味着 this 等于 window。

console.log(this); // 输出：Window {...}

2. 函数执行上下文中的 this

当代码在一个函数中时，this 的值由函数的调用方式决定。

2.1 普通函数中的 this

对于普通函数，this 的值等于函数被调用的地方。例如：

function sayHello() {
  console.log(this);
}

sayHello(); // 输出：Window {...}

在上面的代码中，sayHello 函数被直接调用，因此 this 的值是全局执行上下文，即 window 对象。

2.2 方法中的 this

方法是属于对象的函数。当一个方法被调用时，this 的值等于该方法所属的对象。例如：

const person = {
  name: "John",
  sayHello: function() {
    console.log(this);
  }
};

person.sayHello(); // 输出：{name: "John", sayHello: ƒ}

在上面的代码中，sayHello 方法是属于 person 对象的，因此当 sayHello 方法被调用时，this 的值等于 person 对象。

2.3 构造函数中的 this

构造函数是用于创建对象的函数。当一个构造函数被调用时，this 的值等于新创建的对象。例如：

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

const person = new Person("John");

console.log(person); // 输出：{name: "John"}

在上面的代码中，Person 是一个构造函数，当 new Person("John") 被调用时，this 的值等于新创建的 person 对象。

3. 箭头函数中的 this

箭头函数（=>）是一种特殊的函数，它没有自己的执行上下文，因此 this 的值总是继承自其父级作用域。例如：

const person = {
  name: "John",
  sayHello: () => {
    console.log(this);
  }
};

person.sayHello(); // 输出：{name: "John", sayHello: ƒ}

在上面的代码中，sayHello 是一个箭头函数，它属于 person 对象。当 sayHello 被调用时，this 的值等于 person 对象，因为箭头函数继承了父级作用域的 this 值。

总结

this 是 JavaScript 中一个非常重要的概念，理解 this 的含义和用法对于编写出高质量的代码至关重要。this 的值根据代码所在的位置和执行环境而有所不同，在全局执行上下文中，this 等于 window 对象；在普通函数中，this 等于函数被调用的地方；在方法中，this 等于该方法所属的对象；在构造函数中，this 等于新创建的对象；在箭头函数中，this 等于其父级作用域的 this 值。