箭头函数

介绍:箭头函数实际上是匿名函数的语法糖,用于简化函数写法(匿名函数与java匿名方法类似,都是没有对象声明的)
使用:=> 即为箭头 箭头左边为形参列表(),如果只有一个参数则可以不要小括号,如果有多个参数,则需要小括号,并且形参以逗号隔开,箭头右边为函数返回值 (即return),若外部函数能自动传参进入匿名函数则可以使用箭头函数简化匿名函数的写法,如果匿名函数方法体较为复杂,还是不建议用箭头。
实例:改写链式调用中的代码,使其为箭头函数。

  1. //箭头函数,改写上述代码
  2. let arr6 = arr.filter(n => n>4).map(n => n*2).reduce((preValue,n) => preValue+n);
  3. //这里的reduce不需要第二个参数的原因是,该数组元素是整形可以直接计算,但如果数组元素是对象,则默认值就是数组中的第一个对象,如果不手动赋予初始值,则直接使用是会报错,或者NaN未找到。

箭头函数中的this指向问题(非常重要)

在JS中函数,循环,对象中拥有自己的作用域,而不再这些独立作用域的函数和变量都归于window对象下,window对象是浏览器最顶级的对象。而箭头函数是没有自己的作用域的

1.普通函数中的this

普通的函数一般来说是谁调用this就指向谁,比如 一个对象 obj 调用方法 b,则方法b中的this 指向的就是对象 a

  1. const obj = {
  2. b(){
  3. console.log(this) //打印obj
  4. }
  5. }

2.箭头函数中的this

箭头函数中没有自己的作用域,也就没有this,箭头函数中使用this会一级一级向上找,直到找到最近的作用域,然后指向这个作用域所属的对象。

  1. //setTimeout()是window对象的方法,正常调用时this都指向window
  2. const obj = {
  3. aaa(){
  4. // 1.function中有作用域,它指向调用自己的对象,即window对象
  5. setTimeout(function (){
  6. console.log(this) //打印window
  7. })
  8. // 2.箭头函数中没有作用域,this指向离自己最近的上一级作用域的对象,即函数aaa,而aaa的this指向obj,所以this指向obj
  9. setTimeout(() => {
  10. console.log(this) //打印obj
  11. })
  12. }
  13. }