JavaScript进阶教程- 箭头函数和this关键字

在JavaScript中,箭头函数是ES6中引入的一种新的函数语法。它们提供了一种更简洁的方式来写函数,并且对 this 关键字的行为有特殊的处理。

箭头函数(Arrow Functions)

箭头函数使用一个“箭头”(=>)定义函数。与传统的函数表达式相比,它们有几个关键的区别:

  1. 更简洁的语法

    • 箭头函数允许更简洁的函数定义。
    • 例如,function(x) { return x * x; } 可以写成 x => x * x
  2. 没有自己的 this

    • 在箭头函数中,this 关键字指向的是定义函数时的上下文,而不是执行时的上下文。
    • 这意味着箭头函数不会创建自己的 this,它只是从自己的作用域链的上一层继承 this
  3. 没有 arguments 对象

    • 箭头函数没有自己的 arguments 对象,但可以访问外围函数的 arguments 对象。
  4. 不能用作构造函数

    • 箭头函数不能用 new 关键字调用,也就是说,它们不能作为构造函数使用。

this 关键字

在JavaScript中,this 关键字是一个特殊的变量,指向函数执行时的上下文对象。在箭头函数中,this 的行为与传统函数不同:

  • 传统函数中,this 的值取决于函数的调用方式。例如,在一个对象的方法中,this 指向调用该方法的对象。

  • 箭头函数中,this 被词法地绑定到它所在的上下文。换句话说,箭头函数不会创建自己的 this,它继承自父执行上下文。

示例

考虑以下代码:

function TraditionalFunction() {this.value = 20;setTimeout(function() {console.log(this.value); // undefined 或 报错,取决于严格模式}, 1000);
}const traditional = new TraditionalFunction();

在上面的传统函数中,setTimeout 中的匿名函数有自己的 this,它不是 TraditionalFunction 的实例。

function ArrowFunction() {this.value = 20;setTimeout(() => {console.log(this.value); // 20}, 1000);
}const arrow = new ArrowFunction();

在这个例子中,箭头函数没有自己的 this,所以它使用 ArrowFunctionthis

总结

箭头函数提供了一种更简洁的函数定义方式,并且它们的 this 行为使得编写涉及回调函数的代码(例如定时器、事件监听器等)变得更简单、更直观。然而,由于它们的 this 行为与传统函数不同,所以在某些情况下(如构造函数或需要动态上下文的函数)需要谨慎使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646052.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构之树

树 前面文章讲的线性表,不论数组还是链,都是“一对一”的关系,本文章节让我们来认识一下“一对多”关系的数据结构——树(Tree)。 树结构分为二叉树和三叉树等,如下图所示。常用的就是二叉树,因…

深度学习(5)--Keras实战

目录 一.Keras基础概念 二.如何跑通Keras项目 2.1.在cmd上跑通 2.2.在PyCharm上跑通 一.Keras基础概念 Keras是深度学习中的一个神经网络框架,是一个高级神经网络API,用Python编写,可以在TensorFlow,CNTK或Theano之上运行。 …

开发相关的工具及AI算法调研【降本增效】

前置说明: 看各个章节总结即可了解章节调研结果 开发降本增效调研可用工具参考以下几块: 总结 以下是实现软件开发降本增效的主要流程,将调研涉及该过程的可用工具或方法。 1、需求收集和分析 效率从软件项目的最初阶段开始——需求收集和分析阶段。这一阶段经常被忽视…

如何保护电脑数据?电脑数据怎么保护?

电脑会储存大量的重要数据,而为了避免数据泄露,必须要使用专业的方式进行保护。那么,要如何保护电脑数据呢?下面我们就来了解一下。 文件夹加密超级大师 文件夹加密超级大师是一款专业的电脑数据加密软件,拥有强大的文…

医疗天使禅道使用工作流程:优化医疗服务的必经之路

目录 博客前言 医疗天使禅道使用工作流程 一.使用最高管理员账号admin管理组织结构 1.新增用户 产品经理使用禅道 1.创建产品 2.添加产品模块​编辑 3.添加产品计划 4.添加产品需求 5.创建项目 6.设置团队 项目经理使用禅道 1.关联需求 2.分解任务 测试主管使用禅…

Swiper轮播图后端接口实现

mybatis-plus:global-config:db-config:id-type: auto #id生成规则:数据库id自增configuration:map-underscore-to-camel-case: false # 开启驼峰功能auto-mapping-behavior: full # 自动映射任何复杂的结果log-impl: org.apache.ibatis.logging.stdout.StdOutImpl…

200G数据中心:QSFP56和QSFP-DD光模块如何选择?

随着光通信与互联网技术的迅猛发展,网络数据流量的需求呈指数级增长,电信骨干网流量年均增速高达50%至80%。为了应对日益攀升的数据传输需求,光通信速率实现了从10G、25G、40G到当前主流的100G、200G、400G甚至更高规格的持续演进。 在此背景…

Flutter中状态管理选项的比较:利弊探索

Flutter 应用程序开发的一个关键方面是管理状态,这确保了整个应用程序的数据一致性和更新。然而,Flutter 提供了多种状态管理解决方案,每种解决方案都有自己的优缺点。在这篇博客中,我们将探讨 Flutter 中一些流行的状态管理选项&…

TestNG @BeforeClass 注解

目录 那么,这个带BeforeClass注释的方法什么时候执行呢? 如果我们在一个类中放置多个BeforeClass注释方法会发生什么? 在这篇文章中,我们将讨论TestNG中的BeforeClass注释。BeforeClass注释方法将在特定类的测试用例之前运行。…

Linux-共享内存

文章目录 前言一、system V共享内存申请共享内存挂载共享内存删除共享内存挂载删除共享内存 二、示例代码三.运行效果 前言 在这之前我们已经学习了两种进程间通信方式:匿名管道和命名管道。 从我们之前的学习已经知道,想让多个进程间进行通信就需要让他…

Spring框架--Spring入门实验二之依赖注入

目录 引言 1、依赖注入之setter注入 2、依赖注入之构造器注入 3、为类类型属性赋值(依赖注入之对象注入) 4、为数组类型属性赋值 引言 Spring框架中的依赖注入(Dependency Injection,DI)是一种设计模式和编程实践…

前端JavaScript篇之intanceof 操作符的实现原理及实现、为什么0.1+0.2 ! == 0.3,如何让其相等

目录 intanceof 操作符的实现原理及实现为什么0.10.2 ! 0.3,如何让其相等 intanceof 操作符的实现原理及实现 instanceof 是一个用于检查对象是否属于特定类的 JavaScript 操作符。它返回一个布尔值,指示对象是否是特定类的实例或者原型链中是否存在该…

Tensorflow 中的损失函数 —— loss 专题汇总

回归和分类是监督学习中的两个大类。自学过程中,阅读别人代码时经常看到不同种类的损失函数,到底 Tensorflow 中有多少自带的损失函数呢,什么情况下使用什么样的损失函数?这次就来汇总介绍一下。 一、处理回归问题 1. tf.losses…

Vue组件点击事件不触发的问题,添加事件修饰符native解决

目录 一、父组件在子组件上绑定方法,点击不触发 .native是什么? 二、其他事件修饰符 .stop .prevent .capture .self .once .passive 三、子组件触发父组件方法 四、父组件调用子组件方法 一、父组件在子组件上绑定方法,点击不触发…

常见の算法

前言本文主要使用Java 什么,是快乐星球#¥%……什么是算法? 算法是一组完成任务的指令。任何代码片段都可视为算法,但我们主要介绍常见算法 一、引入——二分查找 二分查找是一种算法,其输入是一个有序的元素列表。如…

java获取一段音频/mp3的时长

引言 在日常开发中&#xff0c;经常会遇到产品经理提出一个需求“上传音乐/音频”&#xff0c;而且还得显示出音频的播放时长。那我们直接世界上最简单的实现方案&#xff0c;必须是最简单&#xff0c;多一句啰嗦不准点赞。 How to do 1.提前引入包 <!--视频多媒体工具包…

浏览器实用:禁止浏览器http自动转成https

前言 因为有些网站支持http和https两种协议访问&#xff0c;有些只支持一种协议访问。但根据动态域名安全策略&#xff08;HSTS&#xff09;&#xff0c;只要该域名在浏览器中访问过一次https&#xff0c;那么浏览器将强制使http的请求变为https。 虽然这条浏览器的策略有利于提…

【oshi-core依赖】Java获取计算机的内存信息、磁盘信息、CPU信息

这篇文章,主要介绍Java如何获取计算机内存信息、磁盘信息、CPU信息【知识星球】。 目录 一、获取系统信息 1.1、引入依赖 1.2、SystemInfo类

Flink入门教程

使用flink时需要提前准备好scala环境 一、创建maven项目 二、添加pom依赖 <properties><scala.version>2.11.12</scala.version></properties><dependency><groupId>org.scala-lang</groupId><artifactId>scala-library<…

【蓝桥备赛】最大数组和——前缀和

题目链接 最大数组和 个人思路 一个需要简单操作的前缀和数组&#xff0c;因为需要对价值最大的宝石和价值最小的宝石进行操作&#xff0c;所以肯定少不了进行一个排序。然后&#xff0c;可能就有人想要不使用双指针进行处理&#xff0c;如果最小的两个数之和大于最大的数&a…