0

0

如何在回调中访问正确的“this”?

WBOY

WBOY

发布时间:2023-08-24 09:53:09

|

1057人浏览过

|

来源于tutorialspoint

转载

如何在回调中访问正确的“this”?

在本教程中,我们将了解如何在回调中访问正确的“this”。

“这个”关键字

每个函数都包含一个名为 this 的关键字,也称为“上下文”,其值由函数的调用方式决定,而不是由函数的定义方式、时间或位置决定。与其他变量不同,它不受词法作用域的影响。与其他语言相比,当使用函数的“this”关键字时,JavaScript 的行为略有不同。在严格模式和非严格模式之间,还有一些进一步的变化。

函数最常被调用的方式决定了“this”的值(运行时绑定)。每次调用该函数时它都可能会发生变化,并且在执行时不能通过赋值来更改。函数被调用的次数,bind() 方法可以设置该值,因为箭头函数不提供自己的“this”绑定(它保留封闭词法上下文的“this”值)。

什么叫回调?

从另一个函数接收参数的函数称为回调,通常在稍后的外部函数中使用。高阶函数是一个术语,用于描述接受回调的外部函数。

回调有自己的一组方法和属性,因为函数是 JavaScript 中的对象。在高阶函数内执行时分配给回调的“this”属性完全取决于回调的制作方式,而不是定义的位置、方式或时间。

通过检查调用回调的高阶函数,我们可以确定回调中的“this”值。封闭函数的实际定义可能包括本地范围的属性,这是回调中 this 问题的主要原因。但是,由于回调的上下文根据其调用方式而动态变化,因此当通过回调中的“this”绑定访问该属性时,它不存在。

现在我们将学习在回调中访问正确的“this”的方法。

LongShot
LongShot

LongShot 是一款 AI 写作助手,可帮助您生成针对搜索引擎优化的内容博客。

下载

使用“self”模式

创建一个名为 self 的变量,并在声明函数的范围内为其赋予 this 值是一种典型的模式。我们可以通过创建一个名为 self 的新变量(或任何其他有效的变量名称都可以)并为其赋予“this”值来实现所需的行为。

示例



   

'this' Inside a Callback using the 'self' pattern

Welcome to Tutorialspoint!

使用箭头函数

ECMAScript 6 见证了 JavaScript 箭头函数的首次亮相。它们没有自己的绑定,是传统函数表达式的更简洁的替代方案。这确保了如果在箭头函数内部引用 this,它会作为常规变量在范围内进行搜索。

示例



   

'this' Inside a Callback using the arrow function

Welcome to Tutorialspoint!

使用另一个变量来存储“this”对象

该对象链接到它,这通常是当我们尝试在回调中访问它时真正想要访问的对象。创建变量并在回调作用域之前存储其值是实现此目的的一种方法(尽管有些程序员不愿意这样做,因为它看起来很混乱)。

有些人将其称为“that”或“self”,但只要术语明确,就没有关系。此解决方法非常有效,因为该变量符合词法范围要求,因此可在回调中使用。您仍然可以访问回调的动态 this 绑定,这是这种方式的另一个好处。

示例



   

'this' Inside a Callback using the another variable to store the 'this' object

Welcome to Tutorialspoint!

使用显式地将 this 绑定到对象

当我们定义回调时,我们可以声明我们想要什么。我们可以使用bind()方法设置“this”值,并确保它在整个函数执行过程中保持这种状态,无论它是如何或在哪里调用或传递的。

bind() 方法在每个函数中都可用,并使用连接到给定对象的“this”属性创建一个新函数。返回函数和原始函数之间的唯一区别是您可以完全控制“this”属性指向的内容。

示例



   

'this' Inside a Callback using explicitly binding this to an object

Welcome to Tutorialspoint!

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

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

43

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

35

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

41

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

204

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

9

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

8

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

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

精品课程

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

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