es6箭头函数注意哪些,es6箭头函数详解

  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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: