简单总结一下箭头函数、展开运输符以及this

箭头函数

ES5函数的写法：

function fn(){

}

箭头函数的语法

ES6新增箭头函数：可以简化函数的写法

()=>{}

1、箭头前面是函数的参数，只有一个参数时可以省去（）

2、当函数只有一条return时{}可以省略

3、当只有一条语句时且返回的是一个对象要用（）包起来

箭头函数this问题

箭头函数本身没有this，它的this是看它处在什么函数的定义域内就是这个函数的定义域

展开运输符

语法

...

作用

可以合并数组、对象 、接收剩余参数

案例：

// ...展开运算符 可以合并数组 对象
        let arr = [1, 2, 3]
        let arr2 = [4, 5, 6]
        let arr3 = arr.concat(arr2)
        console.log(arr3);
​
        let arr4 = [...arr, ...arr2]
        console.log(arr4);
        let obj = { a: 1, b: 2 }
        let o = { ...obj }
        // let o =obj//true
        console.log(o);
        console.log(o === obj);//false
​
​
        // 求数组最大值
​
        console.log(Math.max(...arr2));
        console.log(Math.max.apply(null, arr));
        // 函数名.apply()调运函数 并且接受数组作为参数
​
​
        function fn() {
            //伪数组
            console.log(arguments);
            console.log([...arguments].pop());
            // 可以把 arguments 转成真正的数组
        }
        fn(1)
        fn(2)
        fn(3)
​
        // 剩余参数 写在最后
        function f(a, ...b) {
            // b是一个数组
            console.log(a,b);
        }
        f(1,2,3)
       // ...出现在函数参数或者赋值号左边时一般是剩余参数

this

this指向问题

1.this在构造函数中指向new出来的对象

2.普通函数直接调用this指向window， 全局环境下this指向window，定时器中this指向window

3.普通函数中谁调用函数 this就指向谁

4.箭头函数本身没有this，它的this是看它处在什么函数的定义域内就是这个函数的定义域

this改变问题

call apply bind可以改变this指向 箭头函数不能使用

call

call(this指向，参数1，参数2)

this指向 函数立即调用 this改变

apply

apply(this指向，[参数1，参数2])

this指向 函数立即调用 this改变

bind

不会立即调用函数 返回一个改变this改变之后的函数,需要再次调用

bind(this指向，参数1，参数2)

案例

let o = { a: 1 }
        function fn() {
            console.log(this);
        }
        fn()//this指向window
        fn.call(o)
        //this指向o  函数立即调用 this改变
        fn.apply(o)
        //this指向o  函数立即调用 this改变
        let fn1 = fn.bind(o, 1, 2)
        //不会立即调用函数 返回一个改变this改变之后的函数
        fn1()