箭头函数中this指向的困惑:为什么有时指向window,有时指向调用它的对象?

箭头函数中this指向的困惑:为什么有时指向window,有时指向调用它的对象?

箭头函数中this的指向疑惑

在箭头函数中,this的指向一直是一个比较容易混淆的问题。以下示例代码意在说明箭头函数中this的指向问题:

function foo() {    const test = () => {        console.log(this)    }    test()}foo()let obj = {    a: 1,}obj.foo = fooobj.foo()

按理来说,此代码应当打印两次window,但意外的是,它打印了一次window和一次obj。

这种现象可以归因于箭头函数的特性。在箭头函数中,this并不存在。当箭头函数内部访问this时,它实际上是在访问一个变量。在这个示例中,test内部没有this,因此它会向上层作用域查找this。

单独运行foo时,foo的this指向window,因此test打印window。而当通过obj.foo调用foo时,foo的this指向obj,因此test打印obj。

以上就是箭头函数中this指向的困惑:为什么有时指向window,有时指向调用它的对象?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1498235.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:17:09
下一篇 2025年12月19日 20:17:19

相关推荐

  • jQuery中局部组件事件触发与全局类选择器优化指南

    本文探讨了在jQuery中处理多个具有相同类名的组件时,如何确保事件仅触发特定组件而非所有组件的问题。通过利用$(this)在each循环中创建局部作用域变量,并结合find()方法精确选择当前组件内部的元素,实现了事件的局部化触发。文章还进一步介绍了优化类操作的链式调用技巧,以提升代码的健壮性和可…

    2025年12月20日
    000
  • 构建带验证功能的表单与弹出框:JavaScript事件处理最佳实践

    本文详细介绍了如何在HTML表单中实现客户端验证,并在验证成功后通过JavaScript控制一个弹出框的显示。核心内容包括表单元素动态加载、CSS样式定义、以及关键的JavaScript事件处理优化,特别是如何正确地初始化弹出框的事件监听器,避免重复绑定和逻辑错误,确保弹出框在表单验证通过后准确无误…

    2025年12月20日
    000
  • HTML表单验证后模态框(Modal)的实现与常见问题解决

    本教程详细阐述了如何在HTML表单中实现数据验证后显示自定义模态框的功能。文章涵盖了HTML结构、CSS样式和JavaScript逻辑的协同工作,重点解决了将事件监听器正确放置以及阻止表单默认提交行为的关键问题,确保模态框在验证成功后能按预期弹出,并提供返回主页的链接。 在现代web开发中,表单提交…

    2025年12月20日
    000
  • jQuery中如何精准控制共享类组件的独立事件

    本文探讨在jQuery中,当多个组件共享相同类名时,如何确保事件触发仅作用于当前操作的组件,而非所有同类组件。通过在each循环中利用局部变量或$(this)来限定选择器范围,并优化类名操作链式调用,实现组件间的独立行为,避免全局选择器带来的副作用。 问题背景:共享类组件的事件联动困境 在前端开发中…

    2025年12月20日
    000
  • 在JavaScript中打印包含转义序列的原始字符串

    本文旨在解决在JavaScript中如何以“原始”格式打印字符串,即显示其内部的转义序列(如、等),而非将其解释为特殊字符。核心方法是利用JSON.stringify()函数,它能将字符串中的转义序列转换为其字面量表示,从而在输出时清晰地展示这些特殊字符。 引言:理解字符串的“原始”打印需求 在Ja…

    2025年12月20日
    000
  • 实现表单验证后显示弹出框:HTML、CSS与JavaScript实践指南

    本文详细指导如何在HTML表单成功验证后,使用JavaScript和CSS显示一个弹出框。文章将通过一个实际案例,演示如何正确组织JavaScript代码,确保弹出框的事件监听器在页面加载时即已设置,并在表单验证通过后准确触发弹出框显示,同时避免表单默认提交导致页面刷新。 在现代web应用中,表单验…

    2025年12月20日
    000
  • 表单验证后弹出框实现教程:HTML与JavaScript实践

    本教程详细指导如何在HTML表单中实现客户端验证,并在验证成功后通过JavaScript显示一个自定义弹出框(modal)。文章将分析常见错误,并提供一套完整的HTML、CSS和JavaScript解决方案,确保弹出框正确显示且表单不会意外提交,同时包含动态下拉列表的实现。 在web开发中,表单是用…

    2025年12月20日
    000
  • 如何利用JavaScript的Proxy实现自动错误重试机制,以及它在网络请求容错中的实现原理?

    答案:JavaScript的Proxy机制可非侵入式地为网络请求添加自动重试功能,通过代理拦截函数调用,在不修改原逻辑的前提下实现错误重试、指数退避与错误过滤,提升系统韧性与用户体验。 JavaScript的Proxy机制提供了一种非常优雅且非侵入性的方式来为函数或对象添加横切关注点,比如我们今天要…

    2025年12月20日
    000
  • HTML/JavaScript表单验证与条件弹窗显示教程

    本教程详细讲解如何在HTML表单中实现客户端验证,并在验证成功后通过JavaScript动态显示一个模态弹窗。文章将分析常见错误,并提供一套优化后的代码方案,确保弹窗功能在表单验证通过后正确触发,并有效阻止表单的默认提交行为,提升用户体验。 在现代web开发中,表单是用户与网站交互的重要组成部分。为…

    2025年12月20日
    000
  • JavaScript箭头函数与普通函数的区别

    箭头函数与普通函数的核心区别在于this指向、arguments对象和构造函数能力。1. 箭头函数没有自己的this,继承外层作用域的this,适合回调函数;2. 普通函数的this根据调用方式动态绑定;3. 箭头函数无arguments对象,但可用剩余参数替代;4. 箭头函数不能作为构造函数使用,…

    2025年12月20日
    000
  • Postman教程:遍历JSON响应并根据条件设置全局变量

    本文档旨在指导Postman用户如何遍历JSON响应中的数组对象,并根据特定条件(例如,isRetail字段的值)将相应的id存储到全局变量中。我们将通过一个实际示例,详细讲解如何编写Postman测试脚本来实现这一目标,并避免常见的错误。 遍历JSON响应并设置全局变量 在Postman中,经常需…

    2025年12月20日
    000
  • 为什么说JavaScript中的闭包是函数式编程的基石?

    闭包是JavaScript实现函数式编程的核心机制,它使函数能捕获并访问其词法作用域中的变量,即使在外层函数执行后仍可访问。这种能力支撑了纯函数、高阶函数、柯里化和模块化等FP关键概念。通过闭包,函数可封装私有状态,如计数器或配置参数,确保外部无法直接访问,从而避免副作用,提升代码的可预测性和可测试…

    2025年12月20日
    000
  • Postman中基于条件迭代JSON响应并存储全局变量的教程

    本教程详细讲解如何在Postman中处理复杂的JSON响应。我们将学习如何安全地迭代JSON数组,根据特定条件(例如布尔值)筛选数据,并将匹配项的关键信息(如ID)动态存储到Postman的全局变量中。文章将通过一个实际示例,纠正常见的循环边界错误和类型比较问题,确保您的Postman测试脚本能够准…

    2025年12月20日
    000
  • Postman脚本:迭代JSON响应并根据条件动态设置全局变量

    本教程详细讲解如何在Postman中编写Pre-request或Test脚本,以迭代处理复杂的JSON响应数据。我们将重点介绍如何遍历JSON数组,根据特定布尔条件(如isRetail)动态提取数据(如id),并将其存储到Postman全局变量中。文章将指出常见的循环边界错误和类型比较陷阱,并提供修…

    2025年12月20日
    000
  • Postman脚本:根据JSON响应条件动态设置全局变量

    本教程详细讲解如何在Postman测试脚本中,高效地遍历JSON响应中的数组对象。我们将重点介绍如何根据特定字段(如布尔值)的条件判断,动态地将数组元素的ID存储到Postman全局变量中。文章还将指出常见的编码错误,如循环边界和类型比较问题,并提供正确的解决方案,帮助用户避免运行时错误,确保脚本的…

    2025年12月20日
    000
  • Postman响应JSON数据迭代与条件存储全局变量教程

    本教程详细介绍了如何在Postman中解析JSON响应数据,通过循环遍历数组并结合条件判断,将特定字段的值存储到全局变量中。文章重点纠正了常见的编程错误,如数组越界访问和布尔类型与字符串类型的混淆,并提供了正确的实现代码和最佳实践,旨在帮助用户高效、准确地处理Postman API响应数据。 在po…

    2025年12月20日
    000
  • JS 原型链继承详解 – 探索对象间隐藏的 [[Prototype]] 连接机制

    原型链继承通过[[Prototype]]链接实现,子对象可访问父对象属性方法。使用Object.create()设置原型避免共享问题,constructor需手动修正。原型链顶端为Object.prototype,其[[Prototype]]为null。用hasOwnProperty()判断属性是否…

    2025年12月20日
    000
  • JavaScript模板引擎的实现原理

    <blockquote>JavaScript模板引擎的核心原理是将含标记的字符串转换为可接收数据并生成HTML的函数。它通过正则解析模板中的占位符与逻辑语句,生成拼接HTML的函数体,利用new Function()创建渲染函数,实现数据与视图的高效结合,提升开发效率与代…

    好文分享 2025年12月20日
    000
  • React组件间事件处理器与状态传递:从父组件到多级子组件的实践指南

    本文探讨在React中如何高效地将事件处理器或其产生的状态从父组件传递给子组件,特别是涉及多级嵌套的情况。文章将详细阐述直接传递事件处理函数和通过状态管理传递事件结果的两种核心模式,并提供清晰的代码示例与注意事项,帮助开发者构建响应式用户界面。 理解React组件通信基础:Props 在React中…

    2025年12月20日
    000
  • 如何设计一个支持撤销重做的状态管理系统?

    答案:设计撤销重做系统需选择状态快照或命令模式,结合历史栈管理,限制深度、合并操作,并与Redux/Vuex集成。 设计一个支持撤销重做的状态管理系统,核心在于维护一套状态或操作的历史记录,并能灵活地在这些记录间穿梭。这听起来有点像时间旅行,但本质上就是把每一次关键的状态变更都“存档”起来,需要的时…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信