JavaScript中的this关键字指代什么?

来源:AI大模型作者:广州网站建设头衔:草根站长
导读:本期聚焦于小伙伴创作的《JavaScript中的this关键字指代什么?》,敬请观看详情,探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《JavaScript中的this关键字指代什么?》有用,将其分享出去将是对创作者最好的鼓励。

JavaScript中的this关键字指代什么?这是很多开发者在学习过程中都会遇到的核心问题。this的指向并不是在代码编写阶段就固定下来的,而是取决于函数被调用的方式和当前的执行上下文,不同的调用场景会让this指向完全不同的对象。

JavaScript中的this关键字指代什么?

this的五大绑定规则

JavaScript中this的指向主要遵循五类绑定规则,按照优先级从低到高依次为默认绑定、隐式绑定、显式绑定、new绑定,另外箭头函数有独立的指向逻辑。

1. 默认绑定

当函数独立调用,没有任何对象引用它时,会触发默认绑定。在非严格模式下,this默认指向全局对象,浏览器环境中是window,Node.js环境中是global;严格模式下this会指向undefined。

// 非严格模式示例
function defaultBindTest() {
  console.log(this);
}
defaultBindTest(); // 浏览器中输出window,Node中输出global

// 严格模式示例
'use strict';
function strictDefaultTest() {
  console.log(this);
}
strictDefaultTest(); // 输出undefined

2. 隐式绑定

当函数作为某个对象的方法被调用时,this会指向这个调用它的对象,也就是函数前面的上下文对象。

const user = {
  name: '张三',
  sayName: function() {
    console.log(this.name);
  }
};
user.sayName(); // 输出张三,this指向user对象

// 隐式绑定丢失的情况
const sayNameFn = user.sayName;
sayNameFn(); // 输出空,此时函数独立调用,触发默认绑定,this指向全局

3. 显式绑定

我们可以通过callapplybind方法手动指定函数内部this的指向,这就是显式绑定。

function showInfo(age) {
  console.log(this.name + '年龄是' + age);
}
const person = { name: '李四' };

// call方法调用,第一个参数是this指向,后续是函数参数
showInfo.call(person, 20); // 输出李四年龄是20

// apply方法调用,第一个参数是this指向,第二个是参数数组
showInfo.apply(person, [22]); // 输出李四年龄是22

// bind方法返回新函数,永久绑定this指向
const boundFn = showInfo.bind(person, 25);
boundFn(); // 输出李四年龄是25

4. new绑定

当使用new关键字调用构造函数时,会创建一个新的对象实例,此时构造函数内部的this会指向这个新创建的实例对象。

function Person(name) {
  this.name = name;
  this.introduce = function() {
    console.log('我是' + this.name);
  };
}
const zhangsan = new Person('张三');
zhangsan.introduce(); // 输出我是张三,this指向zhangsan实例

5. 箭头函数的特殊规则

箭头函数没有自己的this,它的this继承自外层最近的非箭头函数作用域,且一旦确定就不会再改变,也无法用call、apply、bind修改。

const obj = {
  name: '王五',
  normalFn: function() {
    // 普通函数内部的箭头函数,this继承normalFn的this,也就是obj
    const arrowFn = () => {
      console.log(this.name);
    };
    arrowFn();
  },
  arrowFn: () => {
    // 外层没有非箭头函数,this继承全局的this
    console.log(this.name);
  }
};
obj.normalFn(); // 输出王五
obj.arrowFn(); // 非严格模式下输出空,this指向全局对象

绑定规则优先级

如果多个绑定规则同时适用,优先级从高到低为:new绑定 > 显式绑定 > 隐式绑定 > 默认绑定,箭头函数的优先级最高,因为它根本没有自己的this。

绑定类型触发场景this指向
箭头函数箭头函数调用外层最近非箭头函数的this
new绑定new 构造函数新创建的实例对象
显式绑定call/apply/bind调用手动指定的对象
隐式绑定对象方法调用调用方法的上下文对象
默认绑定独立函数调用非严格模式全局对象,严格模式undefined

常见误区提醒

  • 不要认为this指向函数定义时的上下文,它只和调用方式有关
  • 回调函数中的this很容易丢失隐式绑定,必要时可以用bind提前绑定
  • 箭头函数不能用call、apply、bind修改this指向,这是很多开发者容易踩的坑

掌握this的指向规则后,就能在开发中准确判断this的指向,避免因为this指向错误导致的逻辑bug,写出更符合预期的JavaScript代码。

JavaScriptthis上下文绑定规则箭头函数修改时间:2026-06-05 01:58:51

免责声明:​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰,观点力求客观中立。本站旨在免费分享,内容仅供个人学习、研究或参考使用。若引用了第三方作品,版权归原作者所有。如内容涉及您的权益,请联系我们处理。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。