JS 之 this 的执行上下文

2023-11-26 08:18:01

this 的基本概念

this 是一个动态变量，它的值在运行时根据执行上下文而改变。在 JavaScript 中，有三种主要类型的执行上下文：

全局执行上下文 ：当脚本在浏览器中加载时，它首先会创建一个全局执行上下文。全局执行上下文中的 this 指向全局对象，在浏览器中通常是 Window 对象。
函数执行上下文 ：当函数被调用时，它会创建一个函数执行上下文。函数执行上下文中的 this 指向函数被调用的对象。例如，如果我们有一个名为 foo 的函数，并且我们从全局上下文中调用它，那么 this 将指向 Window 对象。
构造函数执行上下文 ：当使用 new 运算符创建对象时，它会创建一个构造函数执行上下文。构造函数执行上下文中的 this 指向正在创建的新对象。例如，如果我们有一个名为 Person 的构造函数，并且我们使用 new 运算符创建一个 Person 对象，那么 this 将指向新的 Person 对象。

this 与执行上下文的关系

this 的值由执行上下文决定。当一个函数被调用时，JavaScript 会创建一个新的执行上下文，并将 this 指向函数被调用的对象。当一个构造函数被调用时，JavaScript 会创建一个新的执行上下文，并将 this 指向正在创建的新对象。

作用域链和 this 是两套不同的系统，它们之间基本没太多联系。 this 是和执行上下文绑定的，也就是说每个执行上下文中都有一个 this。全局执行上下文中的 this 是指向 Window 的。记住 this 就是谁调用它就指向谁。

this 的值可以在代码中显式地设置，但这并不常见。通常，this 的值由 JavaScript 引擎根据执行上下文自动确定。

this 可以用于以下用途：

访问对象的属性和方法 ：例如，如果我们有一个名为 person 的对象，我们可以使用 this 来访问 person 对象的属性和方法，例如 person.name 和 person.greet()。
作为回调函数的第一个参数 ：当一个函数作为回调函数传递给另一个函数时，this 通常被用作回调函数的第一个参数。例如，我们有一个名为 handleClick 的函数，并且我们将其作为回调函数传递给 addEventListener 方法。当用户点击元素时，addEventListener 方法会调用 handleClick 函数，并将 this 作为第一个参数传递给 handleClick 函数。
创建新对象 ：当使用 new 运算符创建对象时，this 指向正在创建的新对象。例如，如果我们有一个名为 Person 的构造函数，并且我们使用 new 运算符创建一个 Person 对象，那么 this 将指向新的 Person 对象。