巧解JS中“this”的奥秘：它是动态作用域还是词法作用域？

前端

2024-02-07 02:04:16

JavaScript 中千变万化的“this”动态作用域的真相

在 JavaScript 世界里，一个令开发者们困惑不解的概念就是“this”。它以其复杂且动态的行为而闻名，常常让我们摸不着头脑。

“this”与作用域的真相

我们常常听到一种说法，即“this”与词法作用域相关。然而，事实并非如此。词法作用域是一种在代码编写时就确定的作用域，而“this”却与之相反，更接近于动态作用域。

动态作用域与“this”的相似性

动态作用域指的是变量的作用域在运行时动态确定，这取决于函数被调用的位置。这种行为与“this”关键字非常相似。

让我们举一个例子：

function foo() {
  console.log(this.name);
}

var name = "John Doe";

foo(); // 输出 "John Doe"

在上面的代码中，foo() 函数被调用时，this 关键字指向的是全局对象，因为它是全局上下文中调用的。因此，this.name 等同于 window.name，输出结果为 "John Doe"。

如果我们将 foo() 函数放在另一个函数中，this 关键字的指向就会发生改变：

function outer() {
  var name = "Jane Doe";

  function foo() {
    console.log(this.name);
  }

  foo(); // 输出 "Jane Doe"
}

outer();

在这个例子中，foo() 函数被调用时，this 关键字指向的是 outer() 函数的内部，因为这是函数被调用的上下文。因此，this.name 等同于 outer.name，输出结果为 "Jane Doe"。

实际案例中的“this”

为了进一步理解“this”的动态行为，让我们来看几个实际案例：

对象方法： 在对象的方法中，this 关键字指向的是该对象本身。例如：

var person = {
  name: "John Doe",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // 输出 "Hello, my name is John Doe"

构造函数： 在构造函数中，this 关键字指向的是即将创建的对象。例如：

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

  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

var person1 = new Person("John Doe");
var person2 = new Person("Jane Doe");

person1.greet(); // 输出 "Hello, my name is John Doe"
person2.greet(); // 输出 "Hello, my name is Jane Doe"

箭头函数： 在箭头函数中，this 关键字指向的是其外层函数的 this。例如：

var person = {
  name: "John Doe",
  greet: function() {
    var that = this;

    setTimeout(function() {
      console.log("Hello, my name is " + that.name);
    }, 1000);
  }
};

person.greet(); // 输出 "Hello, my name is John Doe"