【ES6】箭头函数详解

一、定义

1、箭头函数是es6语法中针对函数表达式的一种简写形式

2、函数的定义有两种常用方法

        == 声明式 -无法用箭头函数简写

        == 赋值式 -可以用箭头函数简写

3、语法:(形参)=>{要执行的代码}

4、函数调用 函数名()

5、箭头函数没有自己的this,他的this就是所处环境的this

 6、箭头函数里面没有arguments,普通函数里有

二、用箭头函数简写赋值式函数

        function fn(){
            console.log(111)
        }

        // 2 赋值式 可以改
        var fun = function fn(a,b){
            console.log(a,b)
        }

        // 改成箭头函数
        var fun = (a,b)=>{
            console.log(a,b)
        }
        fun(1,2)

三、箭头函数继续简写

1、形参只有一个的时候，可以继续缩写（把包裹形参的（）去掉）

        // 箭头函数
         var obj ={
            name:'海绵宝宝',
            sayHello:(a)=>{
                console.log(a,'海绵宝宝')
            }
        }
        obj.sayHello(1)

        // 形参只有一个的时候 可以继续缩写（把包裹形参的（）去掉）
        var obj = {
            name: '海绵宝宝',
            sayHello: a => {
                console.log(a, '海绵宝宝')
            }
        }
        obj.sayHello(1)

2、当箭头函数的函数执行空间只有return的时候，可以继续简写

        // 箭头函数
        var fun1 = a=>{return a-1}
        console.log(fun1(7))

        // 当箭头函数的函数执行空间只有return的时候，可以继续简写
        var fun1 = a=>a-1
        console.log(fun1(7))

四、箭头函数里面没有自己的this，而是引用外层的this。

不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。

        document.onclick = function () {
            console.log(this)
        }
        // 当箭头函数的没带参数的时候，可以继续简写
        document.onclick = () => {
            console.log(this)
        }

五、箭头函数没有arguments（可以用 rest 参数代替）

        // 普通函数
        function fn() {
            console.log(arguments)
        }
        fn('hello', 123, [1, 2])
        // 箭头函数
        var fn = () => { console.log(arguments) }
        fn('hello', 123, [1, 2])