异常教程

JavaScript this 关键字（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 开发中，this 关键字是一个既强大又容易引发困惑的核心概念。它决定了函数在执行时所处的上下文环境，直接影响代码的逻辑流向和数据访问方式。无论是编写简单的函数，还是设计复杂的对象交互，掌握 this 的行为模式都是开发者进阶的必经之路。

本文将通过 循序渐进 的方式，结合 实际案例 和 形象比喻，深入解析 this 关键字在不同场景下的指向规则。无论你是编程初学者还是中级开发者，都能通过本文系统性地理解 this 的工作原理，并避免常见的陷阱。

一、基础概念：this 是“上下文的代名词”

this 关键字在 JavaScript 中始终指向 函数被调用时的当前上下文对象。可以将其想象为一个“代词”，类似自然语言中的“我”或“它”，具体含义取决于函数的调用方式。

例如：

function sayHello() {  
  console.log(`Hello, I am ${this}`);  
}  
sayHello(); // 输出 "Hello, I am Window"（浏览器环境）

这里，this 指向全局对象（浏览器中为 window）。

二、全局作用域中的 this

在全局代码中（非函数内部），this 指向 全局对象。在浏览器环境中，全局对象是 window；而在 Node.js 中，它是 global。

console.log(this === window); // 浏览器中输出 true

注意：在严格模式下（"use strict"），全局函数中的 this 将指向 undefined，而非全局对象。

三、函数内部的 this：普通函数 vs. 严格模式

1. 普通函数调用

当函数作为普通函数调用时，this 默认指向 全局对象。

function logThis() {  
  console.log(this);  
}  
logThis(); // 输出 Window 对象（浏览器环境）

2. 严格模式的影响

启用严格模式后，函数内部的 this 将变为 undefined：

function strictLog() {  
  "use strict";  
  console.log(this); // 输出 undefined  
}  
strictLog();

比喻：严格模式像一个“规则执行者”，禁止 this 指向全局对象，以避免意外修改全局变量。

四、对象方法中的 this：this 指向调用者对象

当函数作为对象的方法被调用时，this 自动指向 调用该方法的对象。

const person = {  
  name: "Alice",  
  greet: function() {  
    console.log(`Hello, my name is ${this.name}`); // this 指向 person 对象  
  }  
};  
person.greet(); // 输出 "Hello, my name is Alice"

关键点：this 的指向由 调用位置 决定，而非函数定义时的位置。

五、构造函数中的 this：指向新创建的实例

在构造函数中，this 指向通过 new 关键字创建的 新对象实例。

function Person(name) {  
  this.name = name; // this 是新创建的对象  
}  
const alice = new Person("Alice");  
console.log(alice.name); // 输出 "Alice"

比喻：构造函数就像一个“工厂”，this 是工厂正在组装的新产品。

六、事件处理中的 this：指向触发事件的 DOM 元素

在 DOM 事件监听器中，this 默认指向 触发事件的元素。

document.querySelector("button").addEventListener("click", function() {  
  console.log(this === event.target); // 输出 true（假设点击的是按钮本身）  
});

七、改变 this 指向的三种方法

1. bind()：绑定并返回新函数

通过 Function.prototype.bind() 可以创建一个新函数，其 this 永久绑定到指定对象。

const person = { name: "Bob" };  
const greet = function() {  
  console.log(`Hello, ${this.name}`);  
};  
const boundGreet = greet.bind(person);  
boundGreet(); // 输出 "Hello, Bob"

2. call() 和 apply()：立即调用并指定 this

call() 和 apply() 可以立即执行函数，并临时指定 this 的值。两者的区别在于参数传递方式：

  • call() 接收逗号分隔的参数列表。
  • apply() 接收一个参数数组。
greet.call(person, "extraArg"); // call 的参数列表  
greet.apply(person, ["extraArg"]); // apply 的参数数组

3. 箭头函数：继承外层 this

箭头函数没有自己的 this，其值继承自 外层函数作用域。

const obj = {  
  name: "Charlie",  
  greet: () => {  
    console.log(`Hello, ${this.name}`); // this 指向全局对象（或严格模式下的 undefined）  
  }  
};  
obj.greet(); // 可能输出 "Hello, undefined"（严格模式下）

注意：箭头函数适合需要固定 this 的场景，但无法作为构造函数使用。

八、常见陷阱与解决方案

1. 事件监听器中的 this 失效

当事件监听器通过函数引用传递时，this 可能指向全局对象而非预期元素：

function handleClick() {  
  console.log(this); // 可能指向 Window 而非按钮  
}  
document.querySelector("button").addEventListener("click", handleClick);

解决方案：使用箭头函数或 bind() 固定 this：

document.querySelector("button").addEventListener("click", () => {  
  console.log(this); // this 指向按钮元素  
});

2. 异步函数中的 this 丢失

在 setTimeout 或异步函数中，this 可能丢失原始对象的指向：

const counter = {  
  count: 0,  
  increment: function() {  
    setTimeout(function() {  
      this.count += 1; // this 指向 Window，导致错误  
    }, 1000);  
  }  
};  
counter.increment(); // 报错：Cannot set property 'count' of undefined

解决方案：通过变量保存 this，或使用箭头函数：

increment: function() {  
  const self = this; // 保存外层 this  
  setTimeout(function() {  
    self.count += 1;  
  }, 1000);  
}

九、高级技巧：设计模式中的 this 应用

1. 模块模式：固定 this 指向

在模块模式中，可通过 bind() 固定 this，确保方法始终访问模块内部状态：

const counterModule = (function() {  
  let count = 0;  
  return {  
    increment: function() {  
      count += 1;  
    }.bind(this) // 此处需结合具体上下文，可能需其他方式固定 this  
  };  
})();

2. 发布-订阅模式：this 的动态传递

在事件监听系统中，this 可灵活指向发布者或订阅者对象，实现复杂交互逻辑。

十、结论

this 关键字是 JavaScript 灵活性的核心体现，但也因其动态性而容易引发误解。通过本文的讲解，我们系统性地梳理了以下关键点：

  1. this 的指向由函数的 调用方式 决定，而非定义方式。
  2. 在对象方法、构造函数、事件处理等场景中，this 的规则各有不同。
  3. 通过 bind()、call()、箭头函数等工具，可以精确控制 this 的行为。

掌握 this 的本质，不仅能解决代码中的意外问题，更能编写出更优雅、可维护的 JavaScript 代码。建议读者通过 实际编写代码 和 调试实践，逐步内化这些规则。

（全文约 1800 字）

最新发布

查看更多文章