时间:2021-05-28
前言
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。
为什么叫Arrow Function?因为它的定义用的就是一个箭头:
x => x * x上面的箭头函数相当于:
function (x) {return x * x;}但箭头函数带来了些许问题,下面来一起看看吧。
关于{}
第一个问题是关于箭头函数与{}。
箭头函数,乍一看,用法似乎很简单,比如像下面这样用来给数组每一项乘以2:
const numbers = [1, 2, 3]; const result = numbers.map(n => n * 2); // produces [2,4,6]但是,如果使用不当,可能会引发意想不到的问题。比如下面,尝试为数组中每一项去产生对象字面量,看上去挺简单的map操作,还是引发了意外。
const numbers = [1, 2, 3]; const result = numbers.map(n => { value: n }); // produces [undefined], [undefined], [undefined]什么原因造成的呢?
稍微分析可知,引起上面问题在于,箭头函数内部包裹在花括号之间的代码,被认为是一段独立的代码块而不是对象字面量,因此其单独执行,显然得到的结果就是一个全为undefined的数组。
于是,在这种情况下,其中的代码就必须有明确的返回语句或者用圆括号()包括对象字面量。
关于this
第二个问题是关于箭头函数与this。
使用箭头函数,你可以像下面这样写代码而不用额外在局部作用域中去暂存this:
const adder = { sum: 0, add(numbers) { numbers.forEach(n => { this.sum += n; }); } }; adder.add([1, 2, 3]); // adder.sum === 6然而,很多时候你可能会自以为是的在不经意间写错。正如下面的代码所示,this并不指向”adder”对象,而指向”adder”对象所在的作用域:
const adder = { sum: 0, add: (numbers) => { // scope here is important numbers.forEach(n => { this.sum += n; }); } }; adder.add([1, 2, 3]); // adder.sum === 0最后请记住一点:箭头函数中的this继承自外围作用域的值,因此我们不能改变其指向。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不仅更加简洁,而且在this方面进行了改进。this作为JavaScript中比较
本文主要介绍的是关于ES6箭头函数的定义与调用方式的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:基本用法:ES6中允许使用“箭头”(=>)定义函数v
本文实例讲述了ES6中的箭头函数。分享给大家供大家参考,具体如下:语法我们先来看看箭头函数的语法:([param][,param])=>{statements}
胖箭头函数(Fatarrowfunctions),又称箭头函数,是一个来自ECMAScript2015(又称ES6)的全新特性。有传闻说,箭头函数的语法=>,是
本文实例讲述了ES6箭头函数和扩展。分享给大家供大家参考,具体如下:1.默认值在ES6中给我们增加了默认值的操作相关代码如下:functionadd(a,b=1