【JavaScript】箭头函数

具体讲解

之前写 this 的指向时就提到过箭头函数,但是由于其比较复杂,还是单独开一篇来讲箭头函数。

箭头函数,箭头函数不能作为构造函数,没有原型 prototype,不能 new。

在箭头函数中,this 关键字指向的是外层函数定义时所在的对象,⽽不是执⾏时所在的对象。这个特性有助于避免 this 的指向问题,使得代码更加简洁易读。

let obj = {fn: function () {console.log("我是普通函数", this === obj); // truereturn () => {console.log("我是箭头函数", this === obj); // true};},
};
obj.fn()() 
let obj = {fn: () => {console.log(this === window) // trueconsole.log(globalThis)},
};
obj.fn(); 

之所以设计箭头函数,仅仅是为了实现⼀种简洁的函数定义语法,⽆需考虑与函数(对象)相关的东⻄,所以箭头函数没有原型,即没有 prototype 属性,也没有相关的 super、new.target,没有 arguments 对象 等。

箭头函数没有⾃⼰的 arguments 对象,所以⽆法通过它获取参数。如果要获取,可以⽤ rest 参数代替:let arguments = (…args) => args;。与 this、 super、new.target ⼀样,arguments 的值由最近⼀层⾮箭头函数决定:

在这里插入图片描述

不能通过 new 关键字调⽤:JS 的函数有两个内部⽅法:[[Call]] 和 [[Construct]]。当通过 new 调⽤普通函数时,执⾏ [[Construct]] ⽅法,创建⼀个实例对象,然后再执⾏函数体,将 this 绑定到实例上。当直接调⽤的时候,执⾏ [[Call]] ⽅法,直接执⾏函数体。⽽由于箭头函数并没有 [[Construct]] ⽅法,不能被⽤作构造函数,如果通过 new 的⽅式调⽤,会报错。

箭头函数不绑定arguments,取⽽代之⽤rest参数解决,同时没有super和new.target。箭头函数没有arguments、super、new.target的绑定,这些值由外围最近⼀层⾮箭头函数决定。

这个函数会报错,在浏览器环境下:

// let f = () => console.log(arguments);
// //报错
// f(); // arguments is not defined

下面箭头函数不会报错,因为 arguments 是外面函数的:

function fn() {let f = () => {console.log(arguments)}f();
}
fn(1, 2, 3) // [1,2,3]

箭头函数可以通过拓展运算符获取传⼊的参数。

当对箭头函数使⽤call或apply⽅法时,只会传⼊参数并调⽤函数,并不会改变箭头函数中this的指向。 当对箭头函数使⽤bind⽅法时,只会返回⼀个预设参数的新函数,并不会改变这个新函数的this指向。

window.name = "window_name";
let f1 = function () {return this.name;
};
let f2 = () => this.name;
let obj = { name: "obj_name" };
console.log(f1.call(obj)); // obj_name
console.log(f2.call(obj)); // window_name
console.log(f1.apply(obj)); // obj_name
console.log(f2.apply(obj)); // window_name
console.log(f1.bind(obj)()); // obj_name
console.log(f2.bind(obj)()); // window_name

总结

  1. 相⽐普通函数,箭头函数有更加简洁的语法
  2. 箭头函数不绑定this,会捕获其所在上下⽂的this,作为⾃⼰的this
  3. 箭头函数不绑定arguments,取⽽代之⽤rest参数解决,同时没有super和new.target
  4. 使⽤call,apply,bind并不会改变箭头函数中的this指向
  5. 箭头函数没有原型对象prototype这个属性

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

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

相关文章

代码随想录Day15|| 110平衡二叉树 257二叉树的所有路径 404左叶子之和 222完全二叉树的节点个数

110平衡二叉树 力扣题目链接 题目描述 给定一个二叉树,判断它是否是 平衡二叉树 示例 1: 输入:root [3,9,20,null,null,15,7] 输出:true示例 2: 输入:root [1,2,2,3,3,null,null,4,4] 输出&#xff…

.NET Core异步编程与多线程解析:提升性能与响应能力的关键技术

在.NET Core中,异步编程和多线程是构建高性能应用程序的核心技能。理解这两个概念不仅可以提升应用程序的响应能力,还能优化资源使用。本文将深入剖析异步编程和多线程的关键知识点,提供代码示例,并附上步骤以帮助理解。 1. 异步…

深入浅出WebRTC—GCC

GoogCcNetworkController 是 GCC 的控制中心,它由 RtpTransportControllerSend 通过定时器和 TransportFeedback 来驱动。GoogCcNetworkController 不断更新内部各个组件的状态,并协调组件之间相互配合,向外输出目标码率等重要参数&#xff0…

高级java每日一道面试题-2024年7月24日-你对ReadWriteLock和StampedLock了解多少?

面试官: 你对ConcurrentHashMap了解多少? 我回答: ReadWriteLock和StampedLock都是Java并发库中提供的锁机制,它们各自针对不同场景提供了灵活性和性能优势。 ReadWriteLock ReadWriteLock是Java并发包中的一个接口,它提供了一种读写锁的实现&#…

昇思25天学习打卡营第17天|计算机视觉

昇思25天学习打卡营第17天 文章目录 昇思25天学习打卡营第17天ShuffleNet图像分类ShuffleNet网络介绍模型架构Pointwise Group ConvolutionChannel ShuffleShuffleNet模块构建ShuffleNet网络 模型训练和评估训练集准备与加载模型训练模型评估模型预测 打卡记录 ShuffleNet图像分…

2023 N1CTF-n1proxy

文章目录 参考rsa握手rust_proxy源码公匙交换和签名会话钥匙后续通信生命周期和裸指针代码审计漏洞点 libc-2.27.so大致思路(exp还有变化)调试exp泄露libc写free_hook执行命令exp 参考 https://github.com/Nu1LCTF/n1ctf-2023/tree/main/pwn/n1proxy ht…

JVM从1%到99%【精选】-运行时数据区

目录 1.运行时数据区概括 2.什么是内存溢出 3..程序计数器 4.Java虚拟机栈 5.本地方法栈 6.堆 7.方法区 8.直接内存 1.运行时数据区概括 Java虚拟机在运行Java程序过程中管理的内存区域,称之为运行时数据区。主要分为两大类:线程不共享、线程共享线程不共…

14 B端产品的运营管理

通过运营找到需求并通过交换价值提供供给,再逐步扩大规模、站稳脚跟,辅助产品在商业竞争中获胜。 B端产品运营框架 1. 打通渠道 目的:触达客户。 环节:文案策划、活动策划→广告渠道推广→线下BD。 线下BD:通过见面…

2024华为OD机试真题- 亲子游戏-(C++/Java/Python)-C卷D卷-200分

2024华为OD机试题库-(C卷+D卷)-(JAVA、Python、C++) 题目描述 宝宝和妈妈参加亲子游戏,在一个二维矩阵(N*N)的格子地图上,宝宝和妈妈抽签决定各自的位置,地图上每个格子有不同的糖果数量,部分格子有障碍物。 游戏规则是妈妈必须在最短的时间(每个单位时间只能走一步)…

TypeScript中Interface接口的深度探索与实践

定义接口 在TypeScript中,interface是一个强有力的概念,它用于定义类型签名,特别是对象的结构。接口可以用来描述对象应该有哪些属性、方法,以及这些成员的类型。它们是实现类型系统中“鸭子类型”(duck typing&#…

typescript中type和interface有什么区别,如何选择?

定义: interface Users {name: string;age: number;getName: () > string; } type UsersType {name: string;age: number;getName: () > string; }使用: const user: Users {name: 张三,age: 18,getName() {return this.name} }class Person i…

Python基础知识—一文了解numpy

目录 导入和使用 多维数组 多维数组的基本操作 数组的算数运算 数组的自身运算 随机数组 导入和使用 安装完成后,可以在Python中使用以下代码来验证NumPy是否已经正确安装: import numpy as np a np.array([1, 2, 3])print(a) 多维数组 ⚪️ …

【22】Android高级知识之Window(三) -WMS

一、概述 这次开始到了WindowManagerService(WMS),你可以把它看做一个WindowManager,只不过呢,属于系统服务进程(system_server)中的一员,和应用不在同一进程,所以涉及了…

CSS(二)——CSS 背景

CSS 背景 CSS 背景属性用于定义HTML元素的背景。 CSS 背景属性 Property描述background简写属性,作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把…

C# 设计模式分类

栏目总目录 1. 创建型模式(Creational Patterns) 创建型模式主要关注对象的创建过程,包括如何实例化对象,并隐藏实例化的细节。 单例模式(Singleton):确保一个类只有一个实例,并提…

go使用gjson操作json数据

gjson使用 gjson介绍安装gjson库解析 JSON 字符串路径语法复杂查询遍历和修改结论 gjson介绍 gjson 是一个 Go 语言库,用于快速解析 JSON 数据。它提供了非常简洁的 API 来查询 JSON 数据,无需预先定义 Go 结构体或映射(map)来匹…

《程序猿学会 Vue · 基础与实战篇》

📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗 🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数…

数据结构(二叉树-1)

文章目录 一、树 1.1 树的概念与结构 1.2 树的相关术语 1.3 树的表示 二、二叉树 2.1 二叉树的概念与结构 2.2特殊的二叉树 满二叉树 完全二叉树 2.3 二叉树的存储结构 三、实现顺序结构二叉树 3.1 堆的概念与结构 3.2 堆的实现 Heap.h Heap.c 默认初始化堆 堆的销毁 堆的插入 …

Python--Pandas基础------1

Pandas 是一个基于 Python 编程语言的开源数据分析工具,专注于提供快速、灵活且高效的数据结构和数据操作工具。Pandas 提供了丰富的功能,包括数据清洗、数据转换、数据分组、数据合并等。它能够轻松处理各种数据源的数据导入和导出,如CSV、E…

2024100读书笔记|《飞花令·夏》——鲜鲫银丝脍,香芹碧涧羹,人皆苦炎热,我爱夏日长

2024100读书笔记|《飞花令夏》——鲜鲫银丝脍,香芹碧涧羹,人皆苦炎热,我爱夏日长 《飞花令夏(中国文化古典诗词品鉴)》素心落雪 编著,飞花令得名于唐代诗人韩翃《寒食》中的名句“春城无处不飞花”&#xf…