JavaScript this 关键字

Begindev 编辑部 March 25, 2026

当你开始在 JavaScript 中使用对象时，你不可避免地会遇到一个特殊的关键字：this。

对于初学者来说，这个关键字是最基础但也最令人困惑的概念之一。本质上，this 是对正在执行的代码的“所有者”的引用。它的值不是固定的；相反，它完全取决于函数被调用的上下文。

理解 this 对于编写有效且可预测的面向对象 JavaScript 至关重要，因为它允许方法访问和操作它们所属对象本身的属性。掌握 this 将解锁你创建更动态、更具交互性对象的能力，为构建复杂的应用程序打下坚实的基础。

1. 在不同上下文中理解 `this`

JavaScript 中 this 的值不是静态的；它是由函数如何被调用决定的。这种动态特性通常是初学者困惑的根源，但一旦你掌握了基本规则，一切都会变得清晰起来。让我们探索最常见的几种场景。

1.1 全局上下文 (The Global Context)

当 this 在任何函数之外使用时，即在全局作用域中，它指的是 全局对象。

在 Web 浏览器环境中，全局对象是 window 对象。
在 Node.js（另一种 JavaScript 运行环境）中，它是 global 对象。

这意味着任何全局声明的变量或函数都会成为 window 对象（在浏览器中）的属性，而 this 将指向它。

// 在浏览器环境中，在任何函数之外：
console.log(this === window); // 输出: true (在浏览器中)

let globalMessage = "来自全局作用域的问候！";
console.log(this.globalMessage); // 输出: "来自全局作用域的问候！"

在现代 JavaScript 中，特别是使用模块（Modules）时（模块默认启用严格模式），模块顶层的 this 可能是 undefined。目前，我们主要关注典型浏览器脚本中的 window 对象。

1.2 函数上下文（普通函数）

当一个普通函数（不是作为对象的方法）被直接调用时，this 通常指的是 全局对象（在浏览器中是 window 对象）。这通常被称为“默认绑定”规则。

但是，如果启用了 JavaScript 的 严格模式 (Strict Mode)（无论是针对整个脚本还是函数内部），普通函数调用中的 this 将会是 undefined。严格模式是一种允许你以更严格的方式编写 JavaScript 的功能，它可以捕获常见的编码错误并禁止某些“不安全”的操作。

function greet() {
  console.log(this); // 非严格模式浏览器中: Window 对象
                     // 严格模式或模块中: undefined
  console.log("你好！");
}

greet(); // 作为普通函数调用 greet()

function describeContext() {
  'use strict'; // 为此函数启用严格模式
  console.log(this); // 输出: undefined
}

describeContext();

普通函数调用中 this 指向全局对象（或严格模式下的 undefined）的行为有时会导致意外结果，特别是当你期望 this 指向某个特定对象时。

1.3 方法上下文 (Method Context)

这是 this 最常见和直观的用法之一。当一个函数作为对象的方法被调用时（意味着它是对象的属性，并使用点符号调用，例如 object.method()），this 指向 拥有该方法的对象。

这使得方法可以轻松访问和操作其父对象的属性。

const person = {
  name: "Alice",
  age: 30,
  // sayHello 是 person 对象的一个方法
  sayHello: function() {
    // 这里的 'this' 指的是 'person' 对象
    console.log(`你好，我的名字是 ${this.name}，我今年 ${this.age} 岁。`);
  },
  celebrateBirthday: function() {
    this.age++; // 增加 person 对象的 age 属性
    console.log(`${this.name} 现在 ${this.age} 岁了！`);
  }
};

person.sayHello();       // 输出: 你好，我的名字是 Alice，我今年 30 岁。
// 当 sayHello 作为 'person' 的方法被调用时，'this' 就是 'person'。

person.celebrateBirthday(); // 输出: Alice 现在 31 岁了！
person.sayHello();          // 输出: 你好，我的名字是 Alice，我今年 31 岁。

在这个例子中，sayHello 和 celebrateBirthday 方法内部的 this.name 和 this.age 正确地分别引用了 person 对象的 name 和 age 属性。

重要陷阱： 如果你从对象中提取一个方法并将其作为独立函数调用，this 将恢复为全局上下文（或严格模式下的 undefined），而不是原始对象。

const car = {
  make: "Honda",
  model: "Civic",
  displayInfo: function() {
    console.log(`汽车: ${this.make} ${this.model}`);
  }
};

car.displayInfo(); // 输出: 汽车: Honda Civic (this 指向 'car')

const standaloneDisplay = car.displayInfo;
standaloneDisplay(); // 输出: 汽车: undefined undefined
                     // 'this' 现在是 'window' (或严格模式下的 undefined)，
                     // 它没有 'make' 或 'model' 属性。

这个常见的陷阱突显了 this 的动态特性，并强调了它的值是由函数 如何被调用 决定的，而不是它最初定义在哪里。

1.4 箭头函数与词法 `this`

ES6 (ECMAScript 2015) 引入的 箭头函数 (Arrow Functions) 处理 this 的方式与普通函数不同。

箭头函数没有自己的 this 绑定。相反，它们从 外围作用域（定义它们的作用域）词法继承 this。这意味着箭头函数中的 this 与箭头函数外部的 this 是一样的。

这种行为对于解决普通函数中经常遇到的 this 绑定问题非常有用，尤其是在处理回调或涉及嵌套函数的方法时。

const user = {
  firstName: "Bob",
  lastName: "Smith",
  // 一个普通方法
  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  },
  // 一个内部使用箭头函数的方法
  greetWithDelay: function() {
    console.log(`你好，我是 ${this.fullName()}。`); // 这里的 'this' 是 'user'
    
    // 下面的箭头函数不会创建它自己的 'this' 上下文。
    // 它从 'greetWithDelay' 方法的作用域继承 'this'。
    setTimeout(() => {
      // 这里的 'this' 仍然是 'user'，继承自 greetWithDelay 的作用域
      console.log(`(延迟后) 我是 ${this.fullName()}。`);
    }, 1000);
  }
};

user.greetWithDelay();
// 输出:
// 你好，我是 Bob Smith。
// (延迟后) 我是 Bob Smith。 (1秒后出现)

如果在 greetWithDelay 方法的 setTimeout 中使用普通函数，this 将会被绑定到全局对象（或 undefined），导致 this.fullName() 报错。箭头函数优雅地解决了这个问题。

2. 实战示例与演示

让我们通过更详细的例子来巩固我们对不同场景下 this 的理解。

2.1 示例 1：嵌套对象与回调中的 `this`

考虑一个代表演示文稿幻灯片的对象。每张幻灯片可能有自己的内容，并且能够切换到下一张。

const presentation = {
  title: "JavaScript 对象入门",
  currentSlide: 1,
  slides: [
    "欢迎来到第 7 模块！",
    "什么是对象？",
    "属性和方法",
    "详解 'this' 关键字",
    "后续步骤..."
  ],
  // 显示当前幻灯片内容的方法
  displayCurrentSlide: function() {
    // 这里的 'this' 指的是 'presentation' 对象
    console.log(`--- ${this.title} ---`);
    console.log(`幻灯片 ${this.currentSlide}: ${this.slides[this.currentSlide - 1]}`);
  },
  // 切换到下一张幻灯片的方法
  advanceSlide: function() {
    if (this.currentSlide < this.slides.length) {
      this.currentSlide++;
      this.displayCurrentSlide();
    } else {
      console.log("演示结束。");
    }
  },
  // 一个使用普通函数回调来调度动作的方法
  // 这将演示一个常见的 'this' 绑定问题
  startAutoAdvanceProblem: function() {
    console.log("\n开始自动播放 (因 'this' 问题而出错)...");
    // 这里的 'this' 指的是 'presentation'。
    // 但是，传递给 setTimeout 的函数是一个普通函数。
    setTimeout(function() {
      // 在这个普通函数内部，'this' 现在是 'window' (或严格模式下的 undefined)。
      // 所以，this.advanceSlide() 会失败，因为 'window' 没有这个方法。
      console.log("尝试从有问题的回调中切换幻灯片...");
      try {
        this.advanceSlide(); // 错误: this.advanceSlide is not a function
      } catch (e) {
        console.error("遇到错误:", e.message);
        console.error("原因: setTimeout 回调中的 'this' 不是 'presentation'。");
      }
    }, 2000);
  },
  // 一个使用箭头函数回调来调度动作的方法
  // 这正确地保留了 'this' 上下文
  startAutoAdvanceCorrect: function() {
    console.log("\n开始自动播放 (使用箭头函数修正)..");
    // 这里的 'this' 指的是 'presentation'。
    // 传递给 setTimeout 的箭头函数将从这里词法继承 'this'。
    setTimeout(() => {
      // 在这个箭头函数内部，'this' 仍然是 'presentation'，
      // 继承自 'startAutoAdvanceCorrect' 方法的作用域。
      console.log("尝试从正确的回调中切换幻灯片...");
      this.advanceSlide(); // 正常工作！
    }, 2000);
  }
};

// 初始显示
presentation.displayCurrentSlide(); // 幻灯片 1

// 手动切换
presentation.advanceSlide();        // 幻灯片 2

// 演示普通函数回调的 'this' 问题
presentation.startAutoAdvanceProblem();

// 等待片刻，然后演示箭头函数的正确方法
setTimeout(() => {
  presentation.startAutoAdvanceCorrect();
}, 4000); // 留出时间让错误示例先显示

这个例子清楚地说明了 this 如何根据函数调用上下文而变化，以及箭头函数如何为保持异步操作或回调中预期的 this 绑定提供了强大的解决方案。

2.2 示例 2：构建一个简单的游戏角色

让我们为一个小游戏创建一个 player（玩家）对象，看看 this 如何帮助管理对象状态。

const player = {
  name: "英雄",
  health: 100,
  score: 0,
  inventory: [],
  // 受到伤害的方法
  takeDamage: function(amount) {
    this.health -= amount; // 'this' 指的是 'player' 对象
    console.log(`${this.name} 受到 ${amount} 点伤害。生命值: ${this.health}`);
    if (this.health <= 0) {
      this.die();
    }
  },
  // 治疗的方法
  heal: function(amount) {
    this.health += amount;
    // 确保生命值不超过最大值 (假设最大生命值为 100)
    if (this.health > 100) {
      this.health = 100;
    }
    console.log(`${this.name} 恢复了 ${amount} 点生命。生命值: ${this.health}`);
  },
  // 添加物品到清单的方法
  addItem: function(item) {
    this.inventory.push(item);
    console.log(`${this.name} 捡起了一个 ${item}。清单: ${this.inventory.join(', ')}`);
  },
  // 玩家死亡的方法
  die: function() {
    console.log(`${this.name} 被击败了！游戏结束。`);
  },
  // 一个延迟描述玩家的方法
  // 使用箭头函数来保持 'this' 上下文
  describePlayerDelayed: function() {
    console.log("准备玩家描述...");
    setTimeout(() => {
      // 箭头函数内部的 'this' 仍然是 'player'
      console.log(`\n${this.name} 状态:`);
      console.log(`  生命值: ${this.health}`);
      console.log(`  分数: ${this.score}`);
      console.log(`  清单: ${this.inventory.join(', ')}`);
    }, 1500);
  }
};

player.takeDamage(20);    // 英雄 受到 20 点伤害。生命值: 80
player.heal(15);          // 英雄 恢复了 15 点生命。生命值: 95
player.addItem("药水");   // 英雄 捡起了一个 药水。清单: 药水
player.addItem("剑");     // 英雄 捡起了一个 剑。清单: 药水, 剑
player.takeDamage(80);    // 英雄 受到 80 点伤害。生命值: 15
player.takeDamage(20);    // 英雄 受到 20 点伤害。生命值: -5。英雄 被击败了！游戏结束。

// 重置玩家以进行演示
player.health = 100;
player.inventory = [];
player.name = "战士";
player.describePlayerDelayed();

// 1.5 秒后:
// 战士 状态:
//   生命值: 100
//   分数: 0
//   清单:

这些例子突显了 this 对于创建自包含对象的基础作用，这些对象的方法可以与其自身的属性进行交互，使对象成为代码中真正的“现实世界实体”。

3. 总结

this 关键字是 JavaScript 对象模型的基石，使方法能够与其父对象中包含的数据进行动态交互。我们探讨了它的值如何根据 调用上下文 而变化：

在 全局作用域 中，this 指的是 window 对象（在浏览器中）。
在 普通函数调用 中，this 默认为 window 对象（或严格模式下的 undefined）。这是混淆和 Bug 的常见来源。
在 方法调用 中，this 指的是拥有该方法的对象。这是 this 最直观和强大的用例。
箭头函数 是特殊的：它们没有自己的 this 绑定。相反，它们从外围作用域词法继承 this，这使得它们在需要保留 this 上下文的回调和嵌套函数中非常有用。

掌握 this 是编写健壮的面向对象 JavaScript 的基础。它允许你创建可以管理自身状态和行为的动态交互式对象。

1. 在不同上下文中理解 this