ES6中对箭头函数的理解

基本使用：

 const fun = (a, b) => {
        console.log(a + b);
    }
    fun(1, 2)

1. 箭头函数内的this是静态的，总是指向定义时所在的对象，而不是调用时，并且this指向是不可改变的；

    var name = "张三";
    var obj = {
        name: "李四"
    }

    function fun() {
        console.log(this.name);
    }

    const fun2 = () => {
        //在定义时，this指向的是window
        console.log(this);
        console.log(this.name);

    }

    fun();//张三----通过window在全局调用这个方法，所以this指向的是window
    fun2();//张三
    fun.call(obj);//李四----将this指向obj
    fun2.call(obj);//张三----this指向是不可修改的，不可变的

2. this始终指向函数声明时所在作用域下的this的值

    var name = "张三";
    var obj = {
        name: "李四"
    }

    function fun() {
        var name = "王五";
        console.log(this.name);
    }

    function fun1() {//fun1的中的this指向window
        var name = "赵六";
        //fun2函数声明时是在fun1这个函数作用域下进行的，所以fun2的this指向的是fun1的this
        const fun2 = () => {
            console.log(this);
            //在定义时，this指向的是window
            console.log(this.name);
        }
        fun2()
    }

    fun();//张三
    fun1();//张三
    //通过修改箭头函数所在作用域下的函数中的this，来达到修改箭头函数的this指向
    fun1.call(obj);//李四

3. 箭头函数不能当做构造函数，也就是不可以用new命令，否则报错；

const Person = (name, age) => {
        this.name = name;
        this.age = age;
    }
    const p = new Person("张三", 18);

4. 箭头函数不存在arguments对象，即不能使用伪数组去接收参数，可以使用rest参数代替；

const getSrg = () => {
        console.log(arguments)
    }
    getSrg(1, 2, 3)

使用rest参数来接收；

const getSrg = (...b) => {
        console.log(b);//[1,2,3]
    }
    getSrg(1, 2, 3)

箭头函数的应用：

.box {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
        }

        .newBox {
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
        

<div class="box">我是box</div>


const box=document.querySelector(".box");
 /*   box.addEventListener("click",function (){
        this.className="newBox"
    })*/
    //不适用的场景：与this有关的回调，事件回调，对象的方法回调
    /*box.addEventListener("click",()=>{
        console.log(this);//指向window
    })*/
    //适用场景：与this无关的回调，定时器，数组的方法回调
    box.addEventListener("click",function (){
        console.log(this);//this指向#box这个div节点
        setTimeout(()=>{
            //this始终指向函数声明时所在作用域下的this的值
            this.className="newBox";
        },1000)
    })