讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript的this关键字指向谁_不同场景下有区别吗

胖枫吖_6664

胖枫吖_6664

发布时间:2026-01-13 20:21:29

|

972人浏览过

|

来源于php中文网

原创

this指向完全取决于函数如何被调用:普通调用时非严格模式指向全局对象、严格模式为undefined;对象方法调用时指向点号左边的对象;new调用时指向新实例;call/apply/bind可显式绑定且优先级最高;箭头函数不绑定this,沿作用域链查找。

javascript的this关键字指向谁_不同场景下有区别吗

this 指向谁,完全取决于函数**怎么被调用**,而不是怎么被定义。没有“默认指向”,也没有“固定归属”,只看调用时的上下文。

普通函数调用:this 指向全局对象(非严格模式)或 undefined(严格模式)

这是最容易踩坑的场景。函数独立调用时,this 和定义位置无关:

function foo() {
  console.log(this);
}
foo(); // 非严格模式下是 window(浏览器),严格模式下是 undefined
  • Node 环境中对应的是 global 对象
  • 箭头函数不绑定 this,会沿作用域链向上找,但普通函数不会
  • 如果在模块顶层(ESM)运行,即使非严格模式,this 也是 undefined(ESM 默认严格)

对象方法调用:this 指向调用它的那个对象

关键看“点号左边是谁”:

const obj = {
  name: 'alice',
  say() {
    console.log(this.name); // 'alice'
  }
};
obj.say(); // this → obj
  • 如果把方法赋值给变量再调用,this 就丢了:const fn = obj.say; fn(); → this 不再是 obj
  • 嵌套对象也一样:obj.nested.method() 中 this 指向 obj.nested,不是 obj

构造函数与 new 调用:this 指向新创建的实例

只要函数被 new 调用,this 就绑定为即将返回的新对象:

React Wrap
React Wrap

React UI?—— JavaScript?

下载

立即学习“Java免费学习笔记(深入)”;

function Person(name) {
  this.name = name; // this → 新实例
}
const p = new Person('bob');
  • 即使函数名不叫大驼峰,new Foo() 也会触发该行为
  • 如果构造函数显式返回一个对象,this 仍指向实例,但最终返回的是那个显式对象(不常见,慎用)
  • 箭头函数不能用 new,会直接报错 TypeError: xxx is not a constructor

显式绑定:call、apply、bind 直接指定 this

它们优先级高于隐式绑定(如对象方法调用):

function greet() {
  console.log(`Hello, ${this.name}`);
}
const user = { name: 'carol' };
greet.call(user); // 'Hello, carol'
  • bind 返回新函数,this 被永久锁定,后续再用 call 也无法覆盖(除非是箭头函数——但它根本不受影响)
  • ES6 的 class 方法内部默认不绑定 this,所以 React 类组件中常需在 constructor 里 bind(this) 或改用箭头函数
  • 事件回调中,原生 DOM 事件处理器的 this 默认指向触发事件的元素,但用 addEventListener 传箭头函数时,this 是外层作用域的值

真正难的不是记规则,而是识别调用链是否被切断——比如解构赋值、作为参数传入、setTimeout 回调、Promise.then 回调,都会让原本的对象方法丢失 this。遇到 this 不对,先检查函数是不是“裸奔”调用了。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

285

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

375

2025.12.24

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2318

2023.09.20

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

4196

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

306

2025.12.06

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

12145

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

5527

2024.08.14

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

60

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 12.4万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn