解密JavaScript中的 this：它到底指向谁？

谨缄LuXyi

已于 2025-08-26 11:41:48 修改

阅读量226

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

于 2025-08-26 11:41:24 首次发布

本文链接：https://blog.csdn.net/weixin_73596716/article/details/150850072

引言

在 JavaScript 的学习和实践中，this 关键字无疑是开发者们必须跨越的一道重要关卡。许多开发者，无论是初学者还是有经验的工程师，都可能在某些场景下对其指向感到困惑。this 的值并非在函数定义时确定，而是在函数被调用时才最终决定。这种动态绑定的特性，正是其复杂性的根源。

本文旨在系统性地梳理 this 在不同执行上下文中的指向规则，帮助您建立一个清晰、可靠的心智模型，从而在代码中自信地驾驭它。

this 的核心原则：执行上下文决定身份

理解 this 的第一步，是摒弃一个常见的误解：this 指向函数自身或其词法作用域。事实并非如此。this 的值，本质上是函数执行上下文（Execution Context）的一部分。简而言之，谁调用了函数，this 就指向谁。让我们通过以下几个核心场景来具体分析。

1. 默认绑定：全局上下文

当一个函数在没有任何上下文对象的情况下被直接调用时，this 会应用默认绑定规则。

在非严格模式（non-strict mode）下，this 会指向全局对象。在浏览器环境中，这个全局对象就是 window。

codeJavaScript

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

showContext(); // 在浏览器中输出: Window {...}
console.log(this === window); // true

注意：在严格模式 ('use strict')下，为了避免意外污染全局变量，这种默认绑定会被禁止。此时，this 的值会是 undefined。

codeJavaScript

'use strict';
function showContextStrict() {
  console.log(this);
}

showContextStrict(); // 输出: undefined

2. 隐式绑定：作为对象方法调用

当函数作为对象的一个属性被调用时，this 会被隐式地绑定到这个对象上。这是 this 最常见和最直观的应用场景。

codeJavaScript

const user = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

user.greet(); // greet() 是通过 user 对象调用的，因此 this 指向 user
// 输出: Hello, my name is Alice.

然而，隐式绑定存在“丢失”的风险。如果我们将对象方法赋值给一个变量，然后直接调用这个变量，this 的上下文就会丢失。

codeJavaScript

const greetFunction = user.greet;
greetFunction(); // 此处等同于直接调用，应用了默认绑定
// 在非严格模式下输出: Hello, my name is . (因为 this 指向 window)

这个例子清晰地表明，this 的指向取决于调用的那一刻，而非定义时的位置。

3. 显式绑定：call, apply, 和 bind

为了解决隐式绑定丢失等问题，JavaScript 提供了三种可以精确控制 this 指向的方法：call(), apply(), 和 bind()。

Function.prototype.call(thisArg, arg1, arg2, ...): 立即调用函数，并将函数内部的 this 绑定到第一个参数 thisArg。后续参数逐个传递给函数。
Function.prototype.apply(thisArg, [argsArray]): 作用与 call 类似，也是立即调用函数。区别在于，它将所有参数打包成一个数组 argsArray 进行传递。
Function.prototype.bind(thisArg, arg1, ...): 不会立即执行函数，而是返回一个新的函数。这个新函数的 this 被永久地绑定到 thisArg，无论之后如何调用，其 this 指向都不会改变。

codeJavaScript

function introduce(location, hobby) {
  console.log(`I am ${this.name}, from ${location}. I enjoy ${hobby}.`);
}

const personA = { name: 'Bob' };
const personB = { name: 'Charlie' };

// 使用 call 和 apply 立即执行
introduce.call(personA, 'New York', 'coding');
// 输出: I am Bob, from New York. I enjoy coding.
introduce.apply(personB, ['London', 'reading']);
// 输出: I am Charlie, from London. I enjoy reading.

// 使用 bind 创建一个绑定后的新函数
const introduceBob = introduce.bind(personA, 'New York', 'coding');
introduceBob(); // 无论何时何地调用，this 都指向 personA
// 输出: I am Bob, from New York. I enjoy coding.

4. new 绑定：构造函数调用

当使用 new 关键字调用一个函数（即构造函数）时，会发生以下过程：

创建一个全新的空对象。
这个新对象的原型（[[Prototype]]）被链接到构造函数的 prototype 属性。
构造函数内部的 this 被绑定到这个新创建的对象上。
如果函数没有显式返回其他对象，则 new 表达式会返回这个新创建的对象。

codeJavaScript

function User(name) {
  // 这里的 this 指向即将被创建的新实例
  this.name = name;
  this.isAdmin = false;
}

const newUser = new User('David');
console.log(newUser.name);    // 输出: David
console.log(newUser.isAdmin); // 输出: false

在这种模式下，this 的指向是明确且可靠的，它始终指向由 new 创建的实例。

5. 词法 this：箭头函数

ES6 引入的箭头函数（Arrow Functions）在 this 的处理上与传统函数完全不同。箭头函数没有自己的 this 绑定。它会捕获其定义时所在上下文（词法作用域）的 this 值，并将其作为自己 this 的值，且这个值无法被 call, apply, bind 等方法修改。

这使得箭头函数在处理回调函数时非常有用，可以完美解决传统函数中 this 指向丢失的问题。

codeJavaScript

const project = {
  title: 'Project Phoenix',
  tasks: ['Design', 'Develop', 'Deploy'],
  
  start: function() {
    console.log(`Starting ${this.title}...`); // 这里的 this 是 project
    
    // 在回调中使用箭头函数
    setTimeout(() => {
      // 箭头函数捕获了 start 方法的 this (即 project)
      console.log(`${this.title} has completed its first task.`);
    }, 1000);
  }
};

project.start();
// 输出: Starting Project Phoenix...
// (1秒后) 输出: Project Phoenix has completed its first task.