深入剖析 This 机制

2023-10-17 08:27:29

this 机制在 JavaScript 中扮演着非常重要的角色，它决定了函数内部的 this 所指向的对象。在不同的情况下，this 可能指向不同的对象，这可能会导致一些难以理解的错误。为了更好地理解 this 机制，我们需要从以下几个方面进行分析：

默认绑定

在默认情况下，this 会指向全局对象（在浏览器环境中，全局对象是 window 对象）。这意味着，如果你在全局作用域中定义一个函数，那么这个函数内部的 this 将指向 window 对象。例如：

function greet() {
  console.log(this); // this 指向 window 对象
}

greet(); // 输出：Window {}

全局环境

在全局环境中，this 也指向全局对象。这意味着，如果你在一个脚本文件或模块中定义一个函数，那么这个函数内部的 this 将指向全局对象。例如：

// script.js

function greet() {
  console.log(this); // this 指向 window 对象
}

greet(); // 输出：Window {}

独立调用的方法

当一个方法被独立调用时，this 会指向该方法所属的对象。这意味着，如果你有一个对象，并且在这个对象中定义了一个方法，那么这个方法内部的 this 将指向该对象。例如：

const person = {
  name: 'John',
  greet: function() {
    console.log(this); // this 指向 person 对象
  }
};

person.greet(); // 输出：{ name: 'John', greet: [Function: greet] }

嵌套的函数

当一个函数被嵌套在一个另一个函数中时，this 的值可能会发生变化。这取决于嵌套函数是如何被调用的。如果嵌套函数是被它的外层函数直接调用的，那么 this 将指向外层函数所属的对象。例如：

const person = {
  name: 'John',
  greet: function() {
    function innerGreet() {
      console.log(this); // this 指向 person 对象
    }

    innerGreet(); // 输出：{ name: 'John', greet: [Function: greet] }
  }
};

person.greet(); // 输出：{ name: 'John', greet: [Function: greet] }

严格模式

在严格模式下，this 的绑定规则会发生一些变化。在严格模式下，默认绑定被禁用，这意味着函数内部的 this 永远不会指向全局对象。如果一个函数没有明确地绑定 this，那么在严格模式下，this 将指向 undefined。例如：

"use strict";

function greet() {
  console.log(this); // this 指向 undefined
}

greet(); // 输出：undefined

全局对象

在非严格模式下，全局对象是 this 的默认绑定目标。这意味着，如果你在全局作用域中定义一个函数，那么这个函数内部的 this 将指向全局对象。在严格模式下，全局对象不再是 this 的默认绑定目标。这意味着，如果你在全局作用域中定义一个函数，那么这个函数内部的 this 将指向 undefined。

this 的值可能会发生变化

this 的值可能会发生变化，这取决于函数是如何被调用的。例如，如果你使用 call() 或 apply() 方法来调用一个函数，那么你可以手动指定 this 的值。例如：

const person = {
  name: 'John',
  greet: function() {
    console.log(this); // this 指向 person 对象
  }
};

const anotherPerson = {
  name: 'Mary',
};

person.greet.call(anotherPerson); // 输出：{ name: 'Mary' }