0

0

javascript中的this指向_如何正确掌握其动态特性?

夢幻星辰

夢幻星辰

发布时间:2026-01-04 22:05:09

|

420人浏览过

|

来源于php中文网

原创

javascript中this在调用时动态绑定:普通函数直接调用时非严格模式指向window、严格模式为undefined;对象方法需obj.fn()形式调用才绑定obj;箭头函数无this,继承定义时外层this;call/apply/bind可显式指定this。

javascript中的this指向_如何正确掌握其动态特性?

JavaScript 中的 this 不是定义时决定的,而是调用时动态绑定的——你写的函数里写的是 this,但真正指向谁,得看它「怎么被调用」。

普通函数调用时的 this 指向全局或 undefined

在非严格模式下,直接调用函数(如 foo()),this 指向全局对象(浏览器中是 window);严格模式下是 undefined。这个行为和函数在哪定义、是否嵌套完全无关。

  • 容易误以为「写在对象方法里,this 就一定指向该对象」——其实只要把方法单独拿出来调用,就失效了
  • setTimeout(obj.method, 100)button.addEventListener('click', obj.handleClick) 都属于这种丢失场景
  • 解决方式不是「记住规则」,而是主动控制:用 .bind(obj)、箭头函数(仅限定义时捕获外层 this)、或包装成 () => obj.method()

对象方法调用时的 this 指向调用者

只有形如 obj.fn() 这种「点号加括号」的调用方式,this 才绑定到点号前的对象。注意:这个对象必须是「调用时实际存在的引用值」,不是「看起来像」。

  • const fn = obj.method; fn();this 不再是 obj
  • (obj.method)();obj?.method?.(); 在可选链下,如果中间为 null/undefined,会报错而非静默绑定到全局
  • 箭头函数不能用作对象方法来“修复”this,因为它根本不会创建自己的 this,只沿作用域链向上找——所以 obj = { fn: () => this } 中的 this 是定义时外层的,不是 obj

call / apply / bind 如何强制指定 this

这三个 API 是唯一能显式覆盖默认绑定规则的方法。它们的区别只在参数传递形式,核心都是「把第一个参数设为本次执行的 this 值」。

一帧秒创
一帧秒创

基于秒创AIGC引擎的AI内容生成平台,图文转视频,无需剪辑,一键成片,零门槛创作视频。

下载

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

  • fn.call(obj, a, b):传参用逗号分隔
  • fn.apply(obj, [a, b]):传参用数组
  • const bound = fn.bind(obj, a); bound(b);:返回新函数,预设 this 和部分参数
  • 注意:bind 返回的函数无法再被 callapply 改变 this(除非用 new,但那会忽略绑定的 this

箭头函数没有自己的 this,但容易被误用

箭头函数不绑定 this,也不支持 call/apply/bind 修改它。它的 this 值由词法作用域决定——即函数定义时所在上下文的 this

const obj = {
  name: 'test',
  regular() {
    return this.name; // 'test'
  },
  arrow: () => {
    return this.name; // 全局中是 undefined(严格模式)
  },
  wrapper() {
    const inner = () => this.name;
    return inner(); // 这里 this 是 obj,因为 wrapper 的 this 是 obj
  }
};
  • 不要在需要动态 this 的地方(比如 Vue/React 类组件的方法)滥用箭头函数声明实例方法
  • 在事件回调、定时器、Promise 回调中用箭头函数,通常是为了避免手动 bind,前提是外层函数的 this 已正确绑定
  • 构造函数不能是箭头函数——它没有 this 绑定机制,也没有 prototype

真正卡住人的从来不是「规则有多少条」,而是调用链中某一层悄悄改变了上下文,比如解构赋值、事件监听器传参、高阶函数返回、Proxy 包裹对象……盯住「谁在调用」比背绑定优先级更可靠。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

254

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1089

2024.03.01

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

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

562

2023.09.20

undefined是什么
undefined是什么

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

6467

2023.07.31

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

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

3335

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

1664

2025.12.25

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

336

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

427

2023.10.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

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

精品课程

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

共42课时 | 9.4万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号