ES6箭头函数的使用

使用箭头函数的目的：引入箭头函数目的是更加更加简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更加简洁

使用场景：箭头函数更加适用于哪些本来需要匿名函数的地方

•  定义语法：

const fn = () => {

}

• 使用方式一：括号里面加形参

 // 箭头函数
    const fn = (x) => {
        console.log(x);
    }
    fn(1)

•  使用方式二：如果只有一个形参，那么括号可以省略

const fn1 = x => {
    console.log(x);
}

fn1(88)

• 使用方式三：只有一行代码的时候，我们可以省略大括号

const fn2 = x => x+x;
console.log(fn2(9))

• 使用方式四：箭头函数直接返回一个对象

const fn3 = (uname) => ({
     name:uname
})
console.log(fn3('成龙'));

  注意：返回一个对象需要用需要用括号将{}包起来。

• 应用一：利用剩余变量传参的方式进行箭头函数求和

    // 箭头函数的参数：
    // 利用箭头函数求和，我们并不知道参数几个，所以用剩余参数的写法,它将所有的参数变成一个数组
    const getSum = (...arr) => {
        console.log('剩余参数的值为', arr);
        let sum = 0;
        for (let i=0; i< arr.length; i++) {
            sum +=arr[i]
        }
        return sum;
    }

    console.log(getSum(2, 3)); 
    console.log(getSum(2, 3, 4)); 

•  箭头函数this的用法：箭头函数不会创建自己的this，他只会从自己的作用域链的上一层沿用this。

例：

//箭头函数内部this  是上一层this的指向，所以这个this输出的是window
    const fn4 = () => {
        console.log(this);
    }
    fn4()

 对象方法箭头函数this

    // 对象方法箭头函数this  对象没有作用域，所以对象中的箭头方法指向的还是window
    const obj = {
        name:"yansunda",
        sayHi: () => {
            console.log(22);
            console.log(this);
        }
    }
    obj.sayHi();

    // 对象方法的函数里面再写箭头函数的this
    //只有函数里面才有this，然后箭头函数里面的this指的是上一层的this，所以sayHi的调用者是obj1，所以this指向obj1
    const obj1 = {
        name:'yansunda',
        sayHi:function(){
            console.log(this);
            let fn = () => {
                console.log(333);
                console.log(this);///箭头函数指的是sayHi中的this，而sayHi的调用者是obj1，所以this指向obj1
                console.log(this.name);
            }
            fn()
        }
    }
    obj1.sayHi()