JavaScript this 关键字的奥秘

2023-08-19 15:55:02

JavaScript 中的 this 的神奇世界

在 JavaScript 的迷人世界中，this 扮演着至关重要的角色。它是一个变幻莫测的实体，它的值取决于函数的调用方式。今天，我们将踏上揭开 this 谜团的旅程，探索它在严格模式和非严格模式下的不同表现，以及如何掌控它的运行时绑定特性。

严格模式下的 this

在严格模式下，this 值永远指向调用函数的对象。记住这句口诀："函数怎么被叫，this 就指谁。"举个例子：

function greet() {
  console.log(this);
}

greet(); // 输出: undefined
const person = {
  name: 'Alice',
  greet: greet
};

person.greet(); // 输出: {name: 'Alice', greet: ƒ}

在第一个例子中，greet() 函数被直接调用，没有明确的对象调用它，因此 this 指向 undefined。而在第二个例子中，greet() 函数通过 person.greet() 被调用，this 指向 person 对象。

非严格模式下的 this

在非严格模式的海洋中，this 值可能会出现一些变化，取决于函数的调用方式。让我们扬帆启航，探索这些方式：

1. 普通函数调用

当函数被当作一个独立的实体调用时，this 会指向全局对象，即 window 对象。想象一下，它是 JavaScript 世界中的船长，指挥着全局作用域。

function greet() {
  console.log(this);
}

greet(); // 输出: Window {window: Window, self: Window, document: HTMLDocument, ...}

2. 方法调用

当函数被当作对象的方法调用时，this 会指向该对象。这就好比船长驾驶着特定的船只，this 就会指向那艘船。

const person = {
  name: 'Alice',
  greet: function() {
    console.log(this);
  }
};

person.greet(); // 输出: {name: 'Alice', greet: ƒ}

3. 构造函数调用

当函数被当作构造函数调用时，this 会指向新创建的对象。想象一下，它是一位技艺高超的造船师，this 就是他正在建造的船只。

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

const person1 = new Person('Alice');
const person2 = new Person('Bob');

console.log(person1); // 输出: Person {name: 'Alice'}
console.log(person2); // 输出: Person {name: 'Bob'}

运行时绑定

JavaScript 中的 this 值是动态的，在函数执行时才会确定。这就好比船长在航行过程中，根据不同的情况做出不同的决策。

例如：

const person = {
  name: 'Alice',
  greet: function() {
    console.log(this);

    const inner = function() {
      console.log(this);
    };

    inner();
  }
};

person.greet();