位置: IT常识 - 正文

ES6中的箭头函数详细梳理(es6箭头函数写法)

编辑:rootadmin
ES6中的箭头函数详细梳理 一、箭头函数的介绍1.1 什么是箭头函数

推荐整理分享ES6中的箭头函数详细梳理(es6箭头函数写法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:es6的箭头函数解决了什么问题,es6 箭头函数 阮一峰,es6箭头函数的理解,es6箭头函数详解,es6箭头函数写法,es6箭头函数写法,es6的箭头函数解决了什么问题,es6的箭头函数解决了什么问题,内容如对您有帮助,希望把文章链接给更多的朋友!

ES6中允许使用=>来定义函数。箭头函数相当于匿名函数,并简化了函数定义。

1.2 基本语法// 箭头函数let fn = (name) => { // 函数体 return `Hello ${name} !`;};// 等同于let fn = function (name) { // 函数体 return `Hello ${name} !`;};

箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数,省去关键字function。

函数的参数放在=>前面的括号中,函数体跟在=>后的花括号中

1.3 箭头函数的参数

①如果箭头函数没有参数,写空括号

//没有参数,写空括号 let fn = () => { console.log('hello'); };

②如果箭头函数有一个参数,也可以省去包裹参数的括号

//只有一个参数,可以省去参数括号 let fn = name => { console.log(`hello ${name}!`) };

③如果箭头函数有多个参数,将参数依次用逗号(,)分隔,包裹在括号中。

let fn = (val1, val2, val3, val4) => { return [val1, val2, val3, val4]; }1.4 箭头函数的函数体

①如果箭头函数的函数体只有一句执行代码,简单返回某个变量或者返回一个简单的js表达式,可以省去函数体花括号{ }

//返回某个简单变量vallet f = val => val;// 等同于let f = function (val) { return val };//返回一个简单的js表达式num1+num2let sum = (num1, num2) => num1 + num2;// 等同于let sum = function(num1, num2) { return num1 + num2;};

②如果箭头函数的函数体只有一句代码,返回的不是变量和简单的js表达式,而是一个对象。

//错误写法—花括号会被解释为函数体 let getItem = id => { id: id, name: 'gaby' };//正确写法 let getItem = id => ({ id: id, name: 'gaby' });

③如果箭头函数的函数体只有一条语句且不需要返回值(最常用于回调函数),加上void关键字

let fn = () => void doesNotReturn();

箭头函数用于回调函数,常见简洁

//栗子1//普通函数 [1, 2, 3].map(function (x) { return x + x; });//ES6箭头函数[1, 2, 3].map(x => x + x);//栗子2//普通函数 var result = [2, 4, 5, 1, 6].sort(function (a, b) { return a - b; });//ES6箭头函数var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);二、箭头函数的this指向规则2.1 箭头函数没有原型prototype,因此箭头函数没有this指向 let fn = () => { console.log('Hello World !') }; console.log(fn.prototype); // undefined

2.2 箭头函数不会创建自己的this,如果存在外层第一个普通函数,在定义的时候会继承它的this

箭头函数没有自己的this指向,它会捕获自己定义所处的外层执行环境,并且继承这个this值。箭头函数的this指向在被定义的时候就确定了,之后永远都不会改变。(!永远)

(1)栗子1 var id = 'Global'; //普通函数 function fn1() { setTimeout(function () { console.log(this.id) }, 1000); } //箭头函数 function fn2() { setTimeout(() => { console.log(this.id) }, 1000); } fn1.call({ id: 'obj' });//Global fn2.call({ id: 'obj' });//obj

解析:普通函数的setTimeout 一秒后执行是在全局作用域,所有this指向window对象,this.id指向了全局变量id,输出Golbal。箭头函数的this在定义的时候就确定了,继承fn2的执行环境中的this,fn2的this指向被call方法改变绑定到obj这个对象

(2)栗子2 var id = 'Global'; var obj = { id: 'OBJ', a: function () { console.log(this.id) },//方法a普通函数定义 b: () => { console.log(this.id) }//方法b用箭头函数定义 }; obj.a();//OBJ obj.b();//Global

解析:普通函数作为对象的方法调用,this指向所属的对象(谁调用它就指向谁),this.id 就是obj.id;箭头函数继承定义它的执行环境的this,指向window对象,指向全局变量,输出Global。花括号{}无法形成一个单独的执行环境,所有它依然在全局中。

2.3 箭头函数的this是继承而来的永远不会变,call/apply/bind也无法改变ES6中的箭头函数详细梳理(es6箭头函数写法)

.call()/.apply()/.bind()方法可以用来动态修改函数执行时this的指向,但由于箭头函数的this定义时就已经确定且永远不会改变

var name = 'gaby' var person = { name: 'gabrielle', say: function () { console.log('say hello', this.name) }, //普通函数 say2: () => { console.log('say2 hello', this.name) } //箭头函数 } person.say.call({ name: 'Mike' }) person.say2.call({ name: 'Amy' })

解析:say的普通函数通过call调用已经改变this指向。say2箭头函数调用call绑定尝试改变this指向,但是仍然打印出外一层普通函数的this指向,window对象的全局变量name。

2.4 箭头函数this指向只能间接修改

间接修改:修改被继承的普通函数的this指向,箭头函数的this指向也会跟着改变。

箭头函数的this指向定义时所在的外层第一个普通函数,跟使用的位置没有关系。

let al let aObj = { msg: 'a的this指向' }; bObj = { msg: 'b的this指向' }; a.call(aObj); //将a的this指向aObj b.call(bObj); //将b普通函数的this指向bObj 箭头函数内部的this指向也会指向bObj function b() { al(); } function a() { al = () => { console.log(this, 'this指向定义时外层第一个普通函数 ') }; }

2.5 箭头函数外层没有函数,严格模式和非严格模式下它的this都会指向window全局对象

箭头函数的this指向继承自外层第一个普通函数的this,那么如果没有外层函数,它的this指向哪里?

this的绑定规则:非严格模式下,默认绑定的this指向全局对象,严格模式下this指向undefined。

如果箭头函数外层没有普通函数继承,箭头函数在全局作用域下,严格模式和非严格模式下它的this都会指向window(全局对象)

2.6 多层嵌套函数this指向

箭头函数中的this引用的是最近作用域中的this,是向外层作用域中,一层层查找this,直到有this的定义。

2.7 箭头函数不能作为构造函数使用new

构造函数做了什么?

①JS内部首先会先生成一个对象

②再把函数中的this指向该对象

③然后执行构造函数中的语句

④最终返回该对象实例

箭头函数没有自己的this,this继承外层执行环境中的this,且this永远不会改变。new会报错

let fn = (name, age) => { this.name = name; this.age = age; }; let person = new fn('gaby', 20)

2.8 箭头函数不支持new.target

ES6新引入的属性,普通函数可以通过new调用,new.target返回该函数的引用。用于确定构造函数是否为new调用。箭头函数并不能作为构造函数使用new,自然也不支持new.targer。

(1)箭头函数的this指向全局对象,在箭头函数中使用箭头函数会报错 let fn = () => { console.log(new.target) }; fn()

(2)箭头函数的this指向普通函数,它的new.target就是指向该普通函数的引用 new fn2(); function fn2() { let fn = () => { console.log(new.target) }; fn(); }

三、箭头函数的arguments规则3.1 箭头函数没有自己的arguments(1)箭头函数处于全局作用域中

箭头函数的this指向全局对象,会报arguments未

本文链接地址:https://www.jiuchutong.com/zhishi/300580.html 转载请保留说明!

上一篇:【年终总结】我的前端之行,回顾2022,展望2023(我的年终总结怎么写)

下一篇:【TypeScript】TS条件类型(十)(typescript some)

  • 内容营销到底是什么?(内容营销指什么)

    内容营销到底是什么?(内容营销指什么)

  • 小米8se屏幕刷新率(小米8se屏幕刷新率多少)

    小米8se屏幕刷新率(小米8se屏幕刷新率多少)

  • 苹果x摄像头有个小孔(苹果x摄像头有时候可以用有时候用不了)

    苹果x摄像头有个小孔(苹果x摄像头有时候可以用有时候用不了)

  • 微信怎样申请抖音号(微信怎么申请抖音号呢)

    微信怎样申请抖音号(微信怎么申请抖音号呢)

  • 抖音怎么显示在线状态(抖音怎么显示在线状态设置)

    抖音怎么显示在线状态(抖音怎么显示在线状态设置)

  • qq头像换了没反应(为什么qq头像明明换了可是显示不出来)

    qq头像换了没反应(为什么qq头像明明换了可是显示不出来)

  • 感应充电器怎么充电(感应充电器怎么检测好坏)

    感应充电器怎么充电(感应充电器怎么检测好坏)

  • 6s是a几处理器(苹果12用的什么处理器)

    6s是a几处理器(苹果12用的什么处理器)

  • 华为电脑死机了怎么办(华为电脑死机了按哪个键恢复)

    华为电脑死机了怎么办(华为电脑死机了按哪个键恢复)

  • 标题上空两行怎么弄(标题上空两行怎么去掉)

    标题上空两行怎么弄(标题上空两行怎么去掉)

  • 小米10信号不好是怎么回事(国产什么手机信号最好最强)

    小米10信号不好是怎么回事(国产什么手机信号最好最强)

  • 惠普1112打印机加墨水(惠普1112打印机怎么安装驱动)

    惠普1112打印机加墨水(惠普1112打印机怎么安装驱动)

  • 把手机恢复出厂设置会怎样(把手机恢复出厂设置怎么弄)

    把手机恢复出厂设置会怎样(把手机恢复出厂设置怎么弄)

  • 鼠标不灵敏是什么原因(鼠标不灵敏是鼠标的问题还是电脑的问题)

    鼠标不灵敏是什么原因(鼠标不灵敏是鼠标的问题还是电脑的问题)

  • 西瓜视频上传视频比例是多少

    西瓜视频上传视频比例是多少

  • m1804c3de是小米几(m1803e1a是小米几)

    m1804c3de是小米几(m1803e1a是小米几)

  • 咪咕音乐电脑版有吗(咪咕音乐电脑版下载官网)

    咪咕音乐电脑版有吗(咪咕音乐电脑版下载官网)

  • 手机怎么更换接入点(手机怎么换接电话方式)

    手机怎么更换接入点(手机怎么换接电话方式)

  • 微信购票补贴怎么提现(微信车票补贴怎么领取)

    微信购票补贴怎么提现(微信车票补贴怎么领取)

  • 华为mate30有nfc功能吗(华为mate30带nfc)

    华为mate30有nfc功能吗(华为mate30带nfc)

  • 微博怎么发长文(微博怎么发长文字)

    微博怎么发长文(微博怎么发长文字)

  • 拼多多到货会提醒吗(拼多多到货会提醒收货吗)

    拼多多到货会提醒吗(拼多多到货会提醒收货吗)

  • 中国卖家如何在亚马逊全球开店(中国卖家如何在国外销售)

    中国卖家如何在亚马逊全球开店(中国卖家如何在国外销售)

  • command.exe是病毒进程吗 command进程安全吗(cmt.exe病毒)

    command.exe是病毒进程吗 command进程安全吗(cmt.exe病毒)

  • 评价类模型---TOPSIS法(评价类模型topsis)

    评价类模型---TOPSIS法(评价类模型topsis)

  • 没有固定金额的合同叫什么合同
  • 税务师考试报名
  • 用于员工福利的会计分录
  • 购买网银盾计入什么科目
  • 电子发票错误怎么重开
  • 其他应收和其他应付怎么调账
  • 搭赠的商品怎么开票
  • 技术服务出口免关税政策
  • 小微企业增值税优惠政策最新2023
  • 怎么才算小企业
  • 房地产企业广告费扣除基数
  • 营改增之后建筑企业哪些税可以抵扣
  • 什么是税收筹划风险?税收筹划风险的种类有哪些?
  • 无形资产报废的例题
  • 金税三期实收资本的印花税在哪缴?
  • 公司筹建期间
  • 收到工程施工进度款如何记账
  • 私车公用产生的过路费怎么开发票
  • 支付劳务报酬怎么做账
  • 3%小规模纳税人开出的发票 农产品成本如何计算
  • 购买防疫物资计划
  • 普通发票税收
  • 购买免税苗木抵税分录
  • 代开专票不满10万的要交附加吗?
  • xp系统咋样
  • 暂估入库入库单范本
  • 餐饮业会计做账技巧
  • php源码怎么上传到服务器
  • 怎么隐藏权限
  • kb4580419更新
  • 破产资产拍卖
  • 会计分录的基本构成要素
  • HBuilderX uni-app简单实现静态登录页面(实例)
  • 增值税达不到起征点账务处理
  • 蒙特城堡干红葡萄酒价格
  • 建行E信通贴现需要发票吗
  • typescript和javascript那个更高级
  • cp命令复制系统文件/etc/profile
  • html中写php
  • 单位多缴个人社保证明
  • 增值税在纳税申报表中怎么得出
  • 公司5个印章都刻错了
  • python中insert函数怎么用
  • Ficstar Software � Web Data Extraction Tools
  • centos下编写贪吃蛇吗
  • 工程咨询服务发展的指导意见有哪些
  • 长期待摊费用如何做分录
  • 购买净资产为负数怎么办
  • 固定资产改良支出
  • 已认证未申报抵扣怎么办
  • 暂估成本的账务处理分录
  • 外币投资计入什么科目
  • 学校收到学生的礼物
  • 什么叫做差旅费
  • 附加税减免需要转营业外收入吗
  • 应付职工薪酬如何进行会计处理
  • 坏账准备计入营业外支出什么明细
  • 存货周转率 高
  • 企业公司制改建的有关规定
  • 旅游饮食服务企业会计核算的特点包括
  • sql中的非逻辑
  • mysql转换数据类型
  • linux计划任务怎么写
  • Linux Mint Cinnamon中安装MATE桌面详细步骤
  • win8鼠标右键无法弹出菜单
  • rotation 与vector3乘积关系
  • set命令应用
  • for语句中的++i
  • android中启动service的方法有
  • Unity3D游戏开发引擎
  • android设计模式的应用场景
  • Javascript字符串出现次数
  • jQuery+ajax简单实现文件上传的方法
  • 金税三期是什么内容
  • 车没交车船税上路什么后果
  • 国家税务总局风险识别报告
  • 企业所得税年报怎么填
  • 税收优惠与政府补助对于企业研发来说哪个优惠力度大
  • 审计现金盘点表怎么填
  • 深圳国税申报系统恢复数据
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设