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

javascript中的this指向什么_如何避免this指向的常见错误【教程】

落瑶小哥_4919

落瑶小哥_4919

发布时间:2026-01-19 21:34:02

|

310人浏览过

|

来源于php中文网

原创

普通函数调用时this指向全局对象(非严格模式)或undefined(严格模式),易致“Cannot read property”错误;应优先用箭头函数、初始化绑定或call/apply临时绑定,避免bind滥用。

javascript中的this指向什么_如何避免this指向的常见错误【教程】

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

这是最常被误判的场景。在全局作用域或普通函数中直接调用 foo(),this 不指向函数自身,也不指向调用者,而是取决于执行上下文:
非严格模式下是 window(浏览器)或 global(Node.js);严格模式下就是 undefined。

常见错误现象:在事件回调、定时器或异步回调里访问 this.name 报 Cannot read property 'name' of undefined。

  • 避免方式:显式绑定 —— 用 .bind(this)、箭头函数(继承外层 this)、或把方法提前绑定到对象上(如构造函数中 this.handleClick = this.handleClick.bind(this))
  • 注意:箭头函数没有自己的 this,它会沿作用域链向上找,所以不能用在需要动态 this 的场景(比如 Vue 或 React 类组件的生命周期钩子中需访问实例,但箭头函数写法会导致 this 绑定失效)
  • 性能影响:频繁使用 .bind() 会创建新函数,若在 render 中调用,可能触发不必要的重渲染(React)或内存开销

对象方法中 this 指向调用该方法的对象(但容易被“割裂”)

当写成 obj.method() 时,this 是 obj;但一旦把方法单独提取出来,比如 const fn = obj.method; fn();,就退化为上一条的普通函数调用,this 失控。

JS X Monitor
JS X Monitor

X.com (Twitter) 账号监控自动化:定时抓取指定账号最新推文,发现新内容即时推送通知。

下载
const obj = {
  name: 'Alice',
  sayName() {
    console.log(this.name); // 正常输出 'Alice'
  }
};
const say = obj.sayName;
say(); // undefined(严格模式)或报错
  • 解决办法优先级建议:① 箭头函数赋值(sayName = () => console.log(this.name));② 在构造/初始化阶段绑定(this.sayName = this.sayName.bind(this));③ 调用时临时绑定(say.call(obj) 或 say.apply(obj))
  • Vue 2 Options API 中,methods 会被自动绑定,但 computed 和 watch 的回调函数不会 —— 这里容易漏掉 this 绑定

class 中的 this 默认不自动绑定(尤其在事件监听和 setTimeout 中)

TypeScript 或 Babel 编译后的 class 并不改变 JavaScript 原生行为:类方法不是自动绑定的。哪怕写在 class A { handleClick() {} } 里,传给 addEventListener 或 setTimeout 后,this 依然会丢失。

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

class Counter {
  constructor() {
    this.count = 0;
  }
  increment() {
    this.count++; // this 是 undefined,报错
  }
  init() {
    document.getElementById('btn').addEventListener('click', this.increment);
  }
}
  • 推荐做法:在 class 字段中用箭头函数定义方法(increment = () => { this.count++; }),它天然绑定当前实例
  • 不推荐:在 init() 中每次调用都 this.increment.bind(this) —— 每次新建函数,且若多次调用 init(),会重复绑定
  • 注意:React 函数组件 + Hooks 场景下,不存在 this,所以这个问题自然消失;但 class 组件仍需警惕

call / apply / bind 显式控制 this,但 bind 返回的是新函数

call 和 apply 是立即执行,bind 是预设参数并返回一个新函数。很多人混淆三者行为,尤其在事件系统中误用 bind 导致重复绑定或内存泄漏。

  • fn.call(obj, a, b) → 立即以 obj 为 this 执行,参数逐个传入
  • fn.apply(obj, [a, b]) → 同上,但参数以数组形式传入
  • const boundFn = fn.bind(obj, a) → 返回新函数,后续调用时 this 固定为 obj,且第一个参数永远是 a
  • 坑点:多次 bind 不会覆盖前一次绑定 —— fn.bind(obj1).bind(obj2),最终 this 仍是 obj1;bind 无法被后续的 call 覆盖(除非原函数本身用了 Reflect.apply 等底层机制)
真正麻烦的不是记规则,而是忘记「函数是一等公民」——它随时可以脱离原始上下文被传递、存储、延迟执行。只要出现 this 报错,先问一句:这个函数是在哪被调用的?是谁调用的?有没有中间变量承接?

相关文章

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

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

下载

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

热门AI工具

更多
DeepSeek

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

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

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

立刻MV
立刻MV Hot

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

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

WorkBuddy

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

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

豆包大模型

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

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

312

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

520

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

371

2026.03.13

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

286

2026.06.03

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

658

2026.06.16

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3368

2023.11.20

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

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

2278

2023.09.20

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

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

4096

2024.01.03

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.3万人学习

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

共26课时 | 2.5万人学习

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

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