es6箭头函数注意哪些,es6箭头函数详解
本教程运行环境:windows7系统,ECMAScript版本6,Dell G3电脑。
ES6标准中增加了一个新功能:箭头功能。
基础语法
常用函数的定义方法
var fn1=函数(a,b) {
返回a b
}
函数fn2(a,b) {
返回a b
}使用ES6箭头函数语法定义函数,将原函数的“function”关键字和函数名都删掉,并使用“=”连接参数列表和函数体。
var fn1=(a,b)={
返回a b
}
(a,b)={
返回a b
}当函数参数只有一个,括号可以省略;但是没有参数时,括号不可以省略。
//没有参数
var fn1=function() {}
var fn1=()={}
//单参数
var fn2=函数(a) {}
var fn2=a={}
//多个参数
var fn3=函数(a,b) {}
var fn3=(a,b)={}
//可变参数
var fn4=函数(a,b,args) {}
var fn4=(a,b,args)={}箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,省略掉了{ ... }和return。还有一种可以包含多条语句,这时候就不能省略{ ... }和return
()=返回“你好”
(a,b)=a b(a)={
a=a 1
返回a
}如果返回一个对象,需要特别注意,如果是单表达式要返回自定义对象,如果不写括号就会报错,因为与{.}的函数体。
注意,用小括号包含大括号则是对象的定义,而非函数主体
X={key: x} //报告错误
X=({key: x}) //正确的箭头函数看起来是匿名函数的缩写,但实际上箭头函数和匿名函数有一个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。(词法范围是词法阶段定义的范围。换句话说,词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的,所以当词法分析器处理代码时,范围将保持不变。)
非箭头函数
现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者Person
由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略
非箭头函数,调用call()时打印的数据
用了箭头函数之后,就不用再写之前的hack了,var那个=这个。但是不能盲目使用ES6箭头功能。请看下一节《正确使用箭头函数——什么时候不该用ES6箭头函数》。
总结
类似于匿名函数,在某些情况下可以用来减少代码量。
代码很简洁,这是预先定义的
代码过于简洁,很难读懂。
这是事先定义好的,这使得在ES5中无法使用js来执行一些看起来很正常的操作(如果使用arrow函数,那么在监控click事件的回调函数中就无法获取当前被点击的元素。详见《正确使用箭头函数——什么时候不该用ES6箭头函数》)。
总的来说,箭头函数只是一个函数的简写,有利有弊。可以用也可以不用,看大家的心情了。当然,一定要正确使用。
【推荐学习:javascript高级教程】以上是es6箭头是什么意思的详细内容。更多请关注我们的其他相关文章!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。