es6-箭头函数中的this使用

看网上资料对es6箭头函数中的this总结：箭头函数中的this指向的是定义时的this，而不是执行时的this。
刚开始不明白是什么意思 在项目中也是稀里糊涂的用，现在自己就总结一下。。。

来看看this的一个使用案例：

//定义一个对象
    var obj = {
        x:100, //属性x
        show(){
        //延迟500毫秒，输出x的值
            setTimeout(
               //匿名函数
               function(){console.log(this.x);},
               500
           );
        }
    };
    obj.show();//打印结果：undefined

为什么结果打印是undefined呢，问题出在了this上，当代码执行到了setTimeout( )的时候，此时的this已经变成了window对象（setTimeout( )是window对象的方法），已经不再是obj对象了，所以我们用this.x获取的时候，获取的不是obj.x的值，而是window.x的值，再加上window上没有定义属性x，所以得到的结果就是：undefined。

如果使用箭头函数来编写同样的一段代码，得到的this.x又是另一番景象。我们来试试看：

//定义一个对象
    var obj = {
        x:100,//属性x
        show(){
            //延迟500毫秒，输出x的值
            setTimeout(
               //不同处：箭头函数
               () => { console.log(this.x)},
               500
            );
        }
    };
    obj.show();//打印结果：100

同样的一段代码，唯一的不用就是setTimeout中，原本的匿名函数用箭头函数代替了，你可以往上翻，对比着看两段代码的不同之处。此外，最大的不同的是打印结果，用箭头函数编写的这段代码，成功地打印出了我们想要的结果：100。

为什么是这样？正如刚开始概况的：

箭头函数中的this指向的是定义时的this，而不是执行时的this

当定义obj的show( )方法的时候，我们在箭头函数编写this.x，此时的this是指的obj，所以this.x指的是obj.x。而在show()被调用的时候，this依然指向的是被定义时候所指向的对象，也就是obj对象，故打印出：100。

接下来看更复杂的情况—-多层嵌套的箭头函数

var obj1={  
    num:4,  
    fn:function(){  
        var f=() => {    //object，也就是指obj1  
            console.log(this);  
            setTimeout(() => {  
                console.log(this);// //object，也就是指obj1  
            });  
        }  
        f();  
    }  
}  
obj1.fn();  

假如我们改动两层箭头函数的其中一处，看会出现什么结果

var obj1={  
    num:4,  
    fn:function(){ 
    console.log(this)  //object 因为函数fn定义后被obj1对象调用了
        var f=function(){      
            console.log(this); //window,因为函数f定义后并没有对象调用，this直接绑定到最外层的window对象  
            setTimeout(() => {  
                console.log(this);//window，外层this绑定到了window,内层也相当于定义在window层（全局环境）  
            });  
        }  
        f();  
    }  
}  
obj1.fn();  

接下来改另一个

var obj1={  
    num:4,  
    fn:function(){  
        var f=() => {      
            console.log(this); //object,f()定义在obj1对象中，this就指向obj1,这就是箭头函数this指向的关键  
            setTimeout(function() {  
                console.log(this);//window，非箭头函数的情况下还是要看宿主对象是谁，如果没有被对象调用，函数体中的this就绑定的window上  
            });  
        }  
        f();  
    }  
}  
obj1.fn();  

总结 ：
1.箭头函数的this绑定看的是this所在的函数定义在哪个对象下，绑定到哪个对象则this就指向哪个对象
2.如果有对象嵌套的情况，则this绑定到最近的一层对象上