this关键字在JavaScript中的妙用

2023-12-16 20:19:34

JavaScript 中的 this 是一个非常重要的概念，理解了它对我们使用 JavaScript 会有很大的帮助。this 关键字可以指代不同的东西，具体取决于它所在的环境和上下文的不同。

概述

this 关键字作为 JavaScript 中自动定义的特殊标识符，是我们不得不去面对、了解的知识点，很多初学者对 this 关键字可能会有含糊不清的感觉，但其实稍微理一理，this 并不复杂、不混乱。

概述中我们说了 this 是 JavaScript 中的一个特殊关键字，它的值在不同环境中会有不同的指向。这其实和我们的生活中的“我”字一样，在不同的语境环境里，“我”所指代的人都不一样，所以搞清上下文语境，对于理解 this 关键字是至关重要的。

this 的值在不同环境中会有不同的指向，主要有以下几种情况：

this 的值与作用域密切相关，在不同的作用域中，this 的值也会发生变化。

全局作用域

在全局作用域中，this 的值为 window 对象。
函数作用域

在函数作用域中，this 的值由函数的调用方式决定。
- 当函数作为普通函数调用时，this 的值为 window 对象。
- 当函数作为对象的方法调用时，this 的值为该对象。
- 当函数作为构造函数调用时，this 的值为新创建的对象。
块级作用域

在块级作用域中，this 的值与函数作用域相同。

在使用 this 关键字时，我们经常会遇到一些常见问题，这些问题往往是由于我们对 this 的理解不够深刻造成的。

this 关键字指向的对象与函数的调用方式无关

this 关键字指向的对象与函数的调用方式无关，它只与函数内部的代码有关。例如，以下代码中，this 关键字指向的对象都是 window 对象，即使函数 isWindow 被作为对象的方法调用也是如此。
```
function isWindow() {
  return this === window;
}

var obj = {
  isWindow: isWindow
};

console.log(isWindow()); // true
console.log(obj.isWindow()); // true
```
this 关键字指向的对象与函数的执行环境有关

this 关键字指向的对象与函数的执行环境有关，而不是函数的定义环境。例如，以下代码中，this 关键字指向的对象是 window 对象，即使函数 test 被定义在对象 obj 中也是如此。
```
var obj = {
  test: function() {
    return this;
  }
};

var f = obj.test;

console.log(f()); // window
```