this指向不正确的问题

有时候es6设置的this指向有好处，在函数里面每一层的this都有不同的指向，所以我们每次都需要保存一次this，如下面的绑定1，但是用了es6的=>后就可以满足这类问题。
同样的问题在vue项目和小程序项目中都是很重要的。

下面需求：点击div2秒后颜色变成粉色

方法1：在改变作用域this指向之前，用一个值保存好this的值。

let ad=document.getElementById('ad');
//绑定1
ad,addEventListener("click",function(){
    //定时器
    //保存this的值，不然this指向会不清楚
    let _this=this;

    setTimeout(function(){
        //修改背景颜色
        _this.style.background='pink';
        // 这里用_this的缘故是若是这一层this指向的对象不正确，就可以跑到上一层去查看
        //这一层的this指向window,用_this保存了上一层的指向
    },2000);
});

方法2：将函数形式改为箭头形式()=>

let ad=document.getElementById('ad');
//绑定2
ad,addEventListener("click",function(){
    //定时器
    //保存this的值，不然this指向会不清楚
    setTimeout(()=>{
        //修改背景颜色
        this.style.background='pink';
        // 箭头函数()=>指向外层的this指向的位置,即指向事件源ad
    },2000);
});