ES6的箭头函数介绍

箭头函数

介绍

• 作用：定义匿名函数
• 箭头函数相当于匿名函数，并且简化了函数定义。

基本用法

• 箭头函数的常见写法

let fn = ()=>{表达式或语句}；//箭头左边如果不省略的话就是一个小括号，用来写形参的地方；//箭头的右边就是写表达式或者语句的地方

• 左边小括号的用法

  • 没有参数: () => console.log(‘xxxx’)
  • 一个参数: i => i+2
  • 大于一个参数: (i,j) => i+j
    

    //箭头左边的括号问题//没有参数的时候：()是不能省略的let fn = () => {    console.log(123);}fn();//只有一个参数的时候:()可以省略let fn1 = a =>{    console.log(a);}fn1(3);//两个或两个以上的参数时,()不能省略let fn2 = (a,b) =>{    console.log(a,b);}fn2(4,5);//4,5

• 右边函数体的用法

  • 函数体不用大括号: 默认返回结果；
  • 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回；
    

    //箭头右边的表达式语句// 当只有一条语句或者是表达式时，{}可以省略不写，省略不写的时候，会自动返回结果let fn3 = (a,b) => a+b;console.log(fn3(6,7));//13//当函数体不止一条语句或者表达式的时候，{}不能省略，手动返回想要的结果let fn4 =  (a,b) => {return a*b};console.log(fn4(3,5));//15

• 箭头函数的this

  • 箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
  • 扩展理解：
    
    • 箭头函数的this看外层的是否有函数，
    • 如果有，外层函数的this就是内部箭头函数的this；如果没有，则this是window。

let obj = {username :'kobe',    getName1: function () {        btn1.onclick = () =>{            console.log(this);//obj        }    },    getName2:  () => {        btn2.onclick = () =>{            console.log(this);        }    }}/*等价的理解；* obj.getName1 = function () {             btn1.onclick = () =>{             console.log(this);//obj         }     }* obj.getName2 = () => {             btn2.onclick = () =>{             console.log(this);//window         }     }* */obj.getName1();obj.getName2();