剖析严格模式下的this关键字指向全局对象之谜

2023-12-04 02:24:32

在JavaScript中，this是一个特殊的变量，它指向当前正在执行的函数或方法所属的对象。然而，在严格模式下，this关键字的行为会发生变化，它将不再指向全局对象，而是指向调用它的对象。这种变化可能会导致一些意外的行为，尤其是当您习惯了在非严格模式下使用this关键字时。

严格模式下this关键字指向全局对象的常见场景

在全局作用域中调用函数
```
function myFunction() {
  console.log(this); // 指向全局对象
}

myFunction();
```
在非严格模式下，当您在全局作用域中调用myFunction()时，this关键字将指向全局对象。这是因为全局作用域没有自己的this对象，因此this关键字默认指向全局对象。

然而，在严格模式下，当您在全局作用域中调用myFunction()时，this关键字将指向undefined。这是因为严格模式禁止在全局作用域中使用this关键字指向全局对象。
在构造函数中调用函数
```
function Person() {
  this.name = "John";

  function innerFunction() {
    console.log(this); // 指向全局对象
  }

  innerFunction();
}

const person = new Person();
```
在非严格模式下，当您在构造函数Person()中调用innerFunction()时，this关键字将指向全局对象。这是因为innerFunction()是一个独立的函数，它没有自己的this对象，因此this关键字默认指向全局对象。

然而，在严格模式下，当您在构造函数Person()中调用innerFunction()时，this关键字将指向undefined。这是因为严格模式禁止在构造函数中调用函数时使用this关键字指向全局对象。

如何避免严格模式下this关键字指向全局对象

为了避免严格模式下this关键字指向全局对象带来的问题，您可以使用以下方法：

在全局作用域中使用箭头函数

箭头函数没有自己的this对象，因此它不会受到严格模式的影响。您可以使用箭头函数来代替在全局作用域中定义的普通函数。
```
const myFunction = () => {
  console.log(this); // 指向undefined
};

myFunction();
```

在构造函数中使用bind()方法

您可以使用bind()方法来绑定this关键字到特定的对象。这样，您就可以在构造函数中调用函数时明确指定this关键字指向的对象。

function Person() {
  this.name = "John";

  const innerFunction = function() {
    console.log(this); // 指向person对象
  }.bind(this);

  innerFunction();
}

const person = new Person();