理解 JavaScript 对象和函数中的“this”

理解 javascript 对象和函数中的“this”

js 对象作用域中的 this 关键字

在 javascript 中,了解 this 关键字的内容、方式和位置可能是编写实际有效的代码和在编码时抓狂的区别。

这个关键字

在javascript中,这是一个关键字(保留字),也就是说,它不能用作变量名。

在 javascript 代码中,这用于表示范围。简而言之,作用域是包含一行或多行代码的代码块。它可以表示整个代码(全局范围)或大括号内的代码行 {…}

    var a = 1;    //varaible "a" can be accessed any where within the global scope    function sayhello(){        var message = "hello";        console.log(message);    };    //the variable "message" is not accessible in the global scope    //varaible "a" can be accessed any where within the global scope

这在行动中

    var a = 1;    console.log(this.a); // output is 1; this refers to the global scope here, the variable "a" is in the global scope.    function sayhello(){        var message = "hello";        console.log(this.message);    };    sayhello(); // undefined

您可能想知道为什么上面代码片段中的 sayhello() 函数返回未定义,因为 this 引用了 sayhello() 函数作用域。在你急于说之前,这是 javascript 的另一个怪癖。让我们深入探讨一下。

    var a = 1;    console.log(this.a); // output is 1; this refers to the global scope here, the variable "a" is in the global scope.    function sayhello(){        var message = "hello";        console.log(this.message);    };    sayhello(); // undefined

sayhello() 函数在全局范围内执行,这意味着 sayhello() 的执行会将其解析为全局范围(window 对象;更像是 window.message)。全局作用域中没有名为 message 的变量,因此它返回 undefined (您可以尝试将名为 message 的变量添加到全局作用域中,看看会发生什么。)。可能的解决方案如下所示:

    var person = {        message: "hello",        sayhello: function(){            console.log(this.message);        }    };    person.sayhello(); // hello

这里,sayhello() 函数是 person 对象中的一个属性,执行该函数会将其解析为 person 对象的范围,而不是 window 对象。 message 是 person 对象中的一个变量(对象属性),因此它返回分配给它的值。

虽然上述情况在现实场景中可能没有必要,但这只是对其底层工作原理的基本解释。

让我们看另一个例子:

    const obj = {        a: 1,        b: function() {            return this.a;        },        c: () => {            return this.a;        }    };    // Output 1: 1    console.log(obj.b());      // Output 2: undefined    console.log(obj.c());      const test = obj.b;    // Output 3: undefined    console.log(test());        const testArrow = obj.c;    // Output 4: undefined    console.log(testArrow());

输出1

obj.b() 执行函数,this 解析为 obj 对象范围并返回 a

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

的值

输出2

箭头函数将其解析为全局范围,即使它们是在对象内声明的。这里,this 解析为全局作用域(窗口),变量 a 不存在于全局作用域中,因此返回 undefined。

输出3

obj.b从obj对象返回一个函数(它不执行它;函数调用中的括号表示执行),返回的函数被分配给测试变量,并且该函数在全局范围(窗口)中执行,变量 a 在全局作用域中不存在,因此返回 undefined。

输出4

obj.c从obj对象返回一个函数(它不执行它;函数调用中的括号表示执行),返回的函数被分配给testarrow变量,并且该函数在全局范围(窗口)中执行,箭头函数通常会将 this 解析到全局作用域,变量 a 不存在于全局作用域中,因此返回 undefined。

好了,伙计们。我希望您已经了解 javascript 中的工作原理的基础知识。不再在箭头函数中使用 this,对吗?就范围内的使用而言,我们也不应该失眠。

以上就是理解 JavaScript 对象和函数中的“this”的详细内容,更多请关注创想鸟其它相关文章!

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
从零到英雄:使用 React Hook Form 构建带有验证的 React Form 是的
上一篇 2025年12月19日 15:38:39
你应该知道的 Javascript 特性
下一篇 2025年12月19日 15:38:48

相关推荐

  • 华为技术专家居然把JVM内存模型讲解这么细致「建议收藏」

    华为技术专家居然把JVM内存模型讲解这么细致「建议收藏」华为技术专家居然把JVM内存模型讲解这么细致「建议收藏」华为技术专家居然把JVM内存模型讲解这么细致「建议收藏」华为技术专家居然把JVM内存模型讲解这么细致「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。 内存是非常重要的系统资源,是硬盘和CPU的中间仓库及桥梁,承载着os和应用程序的实时运行。 JVM内存布局规定了Java在运行过程中内存申请、分配、管理的策略,保证了JVM高效稳定运行。不同JVM对于内存的划分方式和管理机制存在差异。结合JVM虚拟机规范,来…

    2026年9月28日 • 用户投稿
    200
  • 并发编程中Future对象使用不当及解决方案

    并发编程中Future对象使用不当及解决方案并发编程中Future对象使用不当及解决方案并发编程中Future对象使用不当及解决方案并发编程中Future对象使用不当及解决方案

    本文针对Java并发编程中常见的set<int, Future> is not applicable to arguments (int,int)错误,深入剖析了其产生的原因,即试图将整型值直接赋值给存储Future对象的集合。文章将详细阐述Future对象的特性,并提供正确的解决方案,…

    2026年9月28日 • 用户投稿
    100
  • 苹果16pro和max区别

    苹果16pro和max区别苹果16pro和max区别苹果16pro和max区别苹果16pro和max区别

    主要区别在于:尺寸和显示屏:16 Pro 为 6.1 英寸,而 16 Pro Max 为 6.7 英寸,均采用 ProMotion 显示屏。电池续航:16 Pro 可播放 23 小时视频,而 16 Pro Max 可播放 29 小时。摄像头:均拥有 48MP 主摄像头,但 16 Pro Max 具有…

    2026年9月27日 • 用户投稿
    200
  • DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议

    DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议

    deepseek和chatgpt的主要区别在于训练数据、模型架构、擅长领域及应用场景。1. deepseek侧重代码生成与数学推理,适合编程及逻辑任务;2. chatgpt擅长自然语言处理与文本生成,适用于对话、写作等场景;3. 选型应根据项目核心需求决定,若重代码理解选deepseek,若重语言表…

    2026年9月27日 • 用户投稿
    100
  • 【Linux/C++】Linux下C++命令行编译示例

    本文是关于c++++编程语言基础和linux系统操作基础的系列文章的第二部分。我们将详细介绍在linux环境下如何编译c++代码,并展示相关的编译示例和技巧。 文章目录 准备源代码编译实战引入目录进行编译使用-Wall、-std 参数进行编译生成库文件链接静态库生成可执行文件链接动态库生成可执行文件…

    2026年9月27日
    200
  • 解决Spring Boot与React应用在AWS部署中CORS错误的终极指南

    解决Spring Boot与React应用在AWS部署中CORS错误的终极指南解决Spring Boot与React应用在AWS部署中CORS错误的终极指南解决Spring Boot与React应用在AWS部署中CORS错误的终极指南解决Spring Boot与React应用在AWS部署中CORS错误的终极指南

    本文旨在解决在Spring Boot后端(AWS EC2)和React前端(AWS S3)部署时,即使服务器端已配置宽松的CORS策略,仍出现跨域资源共享(CORS)错误的问题。我们将深入探讨常见误区,并提供一个将CORS配置与Spring Security有效整合的专业解决方案,同时强调处理wit…

    2026年9月27日 • 用户投稿
    200
  • Java语法基础中++i和i++的区别

    答案:++i是先加后用,i++是先用后加。前者先将i加1再参与运算,后者先使用原值再加1,两者在赋值和表达式中结果不同。 在Java语法中,++i 和 i++ 都是自增操作符,作用是将变量 i 的值加1,但它们在使用时的执行时机和返回值有重要区别。 1. ++i(前置自增) 前置自增表示先将变量 i…

    2026年9月27日
    100
  • 《新VR战士》确定不采用客串角色 将强化剧情叙事

    《新VR战士》确定不采用客串角色 将强化剧情叙事《新VR战士》确定不采用客串角色 将强化剧情叙事《新VR战士》确定不采用客串角色 将强化剧情叙事《新VR战士》确定不采用客串角色 将强化剧情叙事

    近日,世嘉公开了《VR战士》系列新作的最新动态,明确表示这款正在开发中的格斗游戏将不会加入来自其他IP的跨界角色。在与Giant Bomb的访谈中,制作人山田精一强调,团队的核心目标是打造一个独立且完整的《VR战士》世界观,同时融入新颖设计以吸引新玩家并回馈长期支持的老粉丝。 谈及为何在系列沉寂多年…

    2026年9月27日 • 用户投稿
    100
  • sublime怎么查看当前文件的scope_sublime当前文件Scope查看方法

    sublime怎么查看当前文件的scope_sublime当前文件Scope查看方法sublime怎么查看当前文件的scope_sublime当前文件Scope查看方法sublime怎么查看当前文件的scope_sublime当前文件Scope查看方法sublime怎么查看当前文件的scope_sublime当前文件Scope查看方法

    使用“Show Scope Name”命令可查看Sublime Text中光标位置的语法作用域,通过Ctrl+Shift+P输入命令或菜单Tools→Developer→Show Scope Name打开,显示如source.python等层级信息,用于调试语法高亮和主题配色。 在 Sublime …

    2026年9月27日 • 用户投稿
    100
  • 详解:如何将抖音订单接口接入到小程序上

    详解:如何将抖音订单接口接入到小程序上详解:如何将抖音订单接口接入到小程序上详解:如何将抖音订单接口接入到小程序上详解:如何将抖音订单接口接入到小程序上

    前言 作为全球领先的短视频平台,抖音拥有庞大的用户群体和活跃的电商生态。与此同时,小程序凭借其轻便、即用即走的特性,成为移动应用的重要形态之一。本文将深入讲解如何将抖音的订单接口成功接入小程序,助力开发者融合两大平台优势,提升服务体验与商业转化能力。 步骤一:理解抖音订单接口与小程序基础 在实际接入…

    2026年9月27日 • 用户投稿
    100
  • 解决Kotlin中Gson与Reified泛型结合时的类型转换异常

    解决Kotlin中Gson与Reified泛型结合时的类型转换异常解决Kotlin中Gson与Reified泛型结合时的类型转换异常解决Kotlin中Gson与Reified泛型结合时的类型转换异常解决Kotlin中Gson与Reified泛型结合时的类型转换异常

    在kotlin开发中,结合gson库处理泛型数据反序列化是常见的场景。kotlin的reified泛型特性为我们提供了在运行时访问泛型类型信息的能力,这在与java互操作(如使用gson)时显得尤为重要。然而,如果未能正确理解和应用reified,便可能遭遇java.lang.classcastex…

    2026年9月27日 • 用户投稿
    100
  • CPU硅脂与钎焊散热工艺的性能差距有多大?

    钎焊导热远优于硅脂,因金属键合大幅降低界面热阻,使CPU温度更低、性能释放更强、超频潜力更大,尤其在高负载下优势明显。 CPU硅脂与钎焊散热工艺之间的性能差距,在我看来,通常能达到数度到十余度甚至更高的温差,这在高性能计算场景下,足以显著影响CPU的性能释放和稳定性。简单来说,钎焊在导热效率上有着硅…

    2026年9月27日
    100
  • Stripe Webhook签名验证错误解析与中间件顺序优化

    Stripe Webhook签名验证错误解析与中间件顺序优化Stripe Webhook签名验证错误解析与中间件顺序优化Stripe Webhook签名验证错误解析与中间件顺序优化Stripe Webhook签名验证错误解析与中间件顺序优化

    Stripe Webhook签名验证时出现”Payload must be provided as a string or a Buffer”错误,通常是由于Express应用中全局express.json()中间件过早解析了原始请求体。本文将深入解析此问题,并提供通过调整中…

    2026年9月27日 • 用户投稿
    100
  • JScrollPane滚动条自动更新行为的控制策略与实践

    JScrollPane滚动条自动更新行为的控制策略与实践JScrollPane滚动条自动更新行为的控制策略与实践JScrollPane滚动条自动更新行为的控制策略与实践JScrollPane滚动条自动更新行为的控制策略与实践

    本教程详细探讨如何有效控制JScrollPane的滚动条自动更新行为,特别是在内容重绘后避免意外滚动。文章重点介绍通过设置滚动条策略(如ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER)来禁用滚动条或其自动更新,并简要提及Viewport尺寸调整的替代方法…

    2026年9月27日 • 用户投稿
    100
  • 算法科普——运动学LMPC和动力学LMPC之间的区别与联系

    算法科普——运动学LMPC和动力学LMPC之间的区别与联系算法科普——运动学LMPC和动力学LMPC之间的区别与联系算法科普——运动学LMPC和动力学LMPC之间的区别与联系算法科普——运动学LMPC和动力学LMPC之间的区别与联系

    在上一期的算法科普中,我已经探讨了lmpc的发展历程。然而,上一期并未深入探讨lmpc的各种分支,因此本期将重点介绍两种运动学层面的lmpc控制器和一种动力学层面的lmpc控制器。 一种常见的运动学层面的LMPC控制器的预测模型是直接对运动学模型进行雅克比线性化处理,如[1]中所述: 另一种运动学层…

    2026年9月27日 • 用户投稿
    100
  • 告别繁琐构造函数:使用建造者模式优化Java对象创建

    告别繁琐构造函数:使用建造者模式优化Java对象创建告别繁琐构造函数:使用建造者模式优化Java对象创建告别繁琐构造函数:使用建造者模式优化Java对象创建告别繁琐构造函数:使用建造者模式优化Java对象创建

    本文针对Java中处理多个可选参数时,传统构造函数组合繁琐的问题,详细介绍了建造者模式(Builder Pattern)。该模式通过分阶段构建对象,避免了大量参数构造函数和重复组合,提升了代码的可读性和可维护性。文章将通过代码示例深入解析建造者模式的实现原理与优势,并提供实际应用指导。 传统构造函数…

    2026年9月27日 • 用户投稿
    200
  • Android非Activity类中Toast消息的正确管理与调用

    Android非Activity类中Toast消息的正确管理与调用Android非Activity类中Toast消息的正确管理与调用Android非Activity类中Toast消息的正确管理与调用Android非Activity类中Toast消息的正确管理与调用

    本文旨在解决在Android非Activity类中调用Toast消息时遇到的类型不匹配问题。通过详细阐述Toast.makeText()方法对Context参数的要求,并提供将Activity的Context正确传递给静态工具方法的解决方案,实现Toast消息的集中管理和复用,从而提升代码的健壮性和…

    2026年9月27日 • 用户投稿
    300
  • 文本动画的类选择器应用与优化

    文本动画的类选择器应用与优化文本动画的类选择器应用与优化文本动画的类选择器应用与优化文本动画的类选择器应用与优化

    本文详细介绍了如何将基于ID的文本动画转换为基于类的实现,以支持在多个HTML元素上复用同一动画效果。通过JavaScript动态生成带有自定义CSS变量的标签,并结合CSS @keyframes动画,实现了可灵活应用于页面中任意指定元素的波浪式文本动画,并提供了两种优化方案。 1. 问题背景与目标…

    2026年9月27日 • 用户投稿
    100
  • ChatGPT企业版如何管理用户权限 ChatGPT角色权限分配指南

    ChatGPT企业版如何管理用户权限 ChatGPT角色权限分配指南ChatGPT企业版如何管理用户权限 ChatGPT角色权限分配指南ChatGPT企业版如何管理用户权限 ChatGPT角色权限分配指南ChatGPT企业版如何管理用户权限 ChatGPT角色权限分配指南

    chatgpt企业版权限管理需明确角色分配与定期审查。其角色包括:组织管理员(最高权限)、团队管理员、成员和访客,各自对应不同操作权限。根据团队需求合理分配权限的要点是:技术人员建议“成员”以上权限或临时“团队管理员”;普通员工保持“成员”角色;外包人员设为“访客”。权限管理常见误区包括:权限设置后…

    2026年9月27日 • 用户投稿
    200
  • 淘宝等级心和钻有什么区别?详细介绍是什么?买家和卖家都应该了解的知识。

    淘宝等级心和钻有什么区别?详细介绍是什么?买家和卖家都应该了解的知识。淘宝等级心和钻有什么区别?详细介绍是什么?买家和卖家都应该了解的知识。淘宝等级心和钻有什么区别?详细介绍是什么?买家和卖家都应该了解的知识。淘宝等级心和钻有什么区别?详细介绍是什么?买家和卖家都应该了解的知识。

    在淘宝这个庞大的电商生态中,买家等级体系中的“心”与“钻”是衡量用户购物行为和信誉的重要标志。许多用户对这两个等级的具体差异感到困惑,而这些等级不仅反映了个人的消费积累,也为卖家评估客户信誉、消费能力提供了参考依据。接下来,我们将深入解析淘宝等级中心与钻之间的区别。 一、淘宝等级心的含义与特点 (一…

    2026年9月27日 • 用户投稿
    200

发表回复

登录后才能评论
关注微信