JavaScript中this关键字

this关键字如何工作？

● this关键字/变量：为每个执行上下文（每个函数）创建的特殊变量。获取（指向）使用this关键字的函数的“所有者”的值；
● this不是静态的，它取决于函数的调用方式，它的值只在函数实际被调用时才被赋值！

this的几种使用方式

● 方法，（this = 调用方法的对象），如下

const jonas = {
  name: 'Jonas',
  year: 1989,
  calcAge: function () {
    return 2037 - this.year;
  },
};

jonas.calcAge();
1
2
3
4
5
6
7
8
9

如上，对象中存在一个函数，函数就是对象中的一个方法，而函数中的this就表示jonas，this就等于调用方法的对象！

● 简单的函数调用（this = undefined）
注：这仅仅在严格模式下生效，在浏览器中，window全局对象中也是如此

● 箭头函数（this =周围函数的 this（词法 this） ）
在 JavaScript 中，词法 this（也称为周围函数的 this）是指在箭头函数中的 this 值。箭头函数具有词法作用域的特性，因此它们的 this 值继承自外围（周围）函数。
与传统函数不同，箭头函数没有自己的 this 绑定。它们通过词法作用域查找外围函数的 this 值。这意味着箭头函数中的 this 值与箭头函数定义的位置无关，而是取决于箭头函数所在的词法环境。
通过使用箭头函数，可以避免传统函数中 this 值可能发生变化的问题，同时简化了对上下文的引用。词法 this 可以让开发人员更容易地控制函数中的 this 值，并避免由于函数调用方式的不同而导致的混淆。
举例：

// 周围函数
function outerFunction() {
  // 这里的 this 将是外部上下文的 this

  // 内部函数 - 传统函数
  function innerFunction() {
    // 这里的 this 将是 innerFunction 的调用者的 this
    console.log('Inner Function - this:', this);
  }

  // 内部函数 - 箭头函数
  const arrowFunction = () => {
    // 这里的 this 将是 outerFunction 的 this，即词法 this
    console.log('Arrow Function - this:', this);
  };

  // 调用内部函数
  innerFunction(); // 内部函数的 this 取决于调用方式
  arrowFunction(); // 箭头函数的 this 取决于外部函数的 this
}

// 调用外部函数
outerFunction(); // 外部函数的 this 取决于调用方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

这段代码将会输出

Inner Function - this: undefined
Arrow Function - this: [object Window] (或者全局对象，如果在浏览器环境下运行)
1
2

● 监听事件（this = 处理程序函数所附加的DOM元素）

注意：this 不指向函数本身，也不指向其变量环境！

但是：
● 当函数使用 new 关键字作为构造函数创建对象时，this 指向新创建的实例对象。
● 当使用 call()、apply() 或 bind() 方法显式绑定 this 时，this 指向传递给这些方法的对象。
这个等到以后的文章中在继续介绍吧！！！