位置: 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)

  • 过了纳税期没有申报
  • 如何合理把公司的钱拿出来
  • 应付账款对方不催款怎么办
  • 中小企业所得税优惠政策有哪些
  • 企业亏损法定盈亏是什么
  • 税控服务费的账务处理
  • 研发加计扣除税率
  • 企业购买国债逆回购需要缴纳增值税吗
  • 贸易公司购买汽车的发票可以用抵公司的税吗
  • 天猫企业支付宝怎么提现
  • 一般纳税人企业所得税计算公式
  • 个人年终奖如何交税
  • 有单位购买我公司开发的房产作为“投资性房地产”,该单位需要缴纳房产税吗?
  • 物业公司停车费怎么开票
  • 教学用品采购
  • 财务审核火车票真伪辨别
  • 房地产企业预缴增值税什么时候结转
  • 企业购买理财产品的会计分录
  • 善意取得虚开增值税专用发票追征期
  • win10系统下怎么安装Java JDK及配置环境变量
  • mac dash
  • 2022年最新cpu天梯图手机
  • 个税代扣代缴手续费返还增值税税率
  • 其他货币资金包括哪些内容
  • win10粘贴复制无效
  • 融资租赁业务的操作程序
  • php
  • springboot+vue+elementsUI 实现分角色注册登录界面
  • php extract函数
  • 一般纳税人企业所得税如何计算
  • 购买电脑如何入账
  • 开发票的零税率和免税有什么区别
  • 增值税纳税申报操作流程
  • 公司赎回股票
  • 公司的实收资本是什么意思
  • dede标签的使用
  • 非盈利企业怎么做账
  • 财政总预算会计的特点
  • 代收代付的会计分录
  • 物流公司卖车合法么
  • 生活垃圾处理费合法吗
  • 企业现金规模的影响因素
  • 固定资产提前报废当月计提折旧吗
  • 退货对方不开具红字发票怎么办
  • 投资性房地产与持有待售资产的区别
  • 债券票面利率与期限成正比
  • 没有销售怎么写总结
  • 天猫佣金是啥
  • 一般纳税人的发票抵扣有效期多久
  • 用友t6生成常用凭证
  • 期间费用明细表在哪里找
  • 备查账簿有没有固定的格式
  • SQLServer 通用的分区增加和删除的算法
  • kvm虚拟机性能调优
  • big是什么文件格式
  • win7计算机怎么设置开机密码
  • win8找不到恢复环境怎么恢复出厂设置
  • win8系统打开浏览器
  • win8.1如何更新到win10
  • win 10系统怎么查看网络连接
  • javascript 基础
  • text date excel
  • 游戏输入法安卓
  • ini文件编辑
  • cocos2d-js游戏开发
  • unity 3a游戏
  • js设置窗口大小
  • shell脚本运行linux命令
  • flask开发实例
  • 范冰冰魔范学院杂志可爱公主风
  • js的实现原理
  • jquery获取某个属性的值
  • 实例分析法名词解释
  • js验证码代码怎么写
  • 医保所属期起和所属期止
  • 上海买房退税政策2020
  • 出口退税的管理办法
  • 不能抵扣消费税口诀
  • 放管服中的服的深层含义
  • 国家税务总局组建千户集团税收风险分析专业团队
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设