ES6箭头函数的this指向

最近一直在用ES6的箭头函数,也在网上看了很多博客介绍箭头函数this的指向,觉得很多博主都把这个问题给复杂化了,给初用者一种云里雾里的感觉,下面就简单总结一下箭头函数this的指向,废话少说,下面直接代码演示

    let obj = {
        name: 'jack',
        age: 18,
        sayHi: function () {
            console.log(this);
            //这个this指向的是obj
            setTimeout(function () {
                console.log(this);
                //这个this指向的是obj             
            }, 10);
    }
    obj.sayHi();

控制台输入结果

这里很明显可以看出两个打印结果的this指向不一样,因为定时器是window调用的,所以指向是window,
如果要改变它的this指向很简单,只要把函数改成箭头函数即可

	 let obj = {
        name: 'jack',
        age: 18,
        sayHi: function () {
            console.log(this);
            //这个this指向的是obj
            setTimeout( ()=> {
                console.log(this);
                //这个this指向的是obj             
            }, 10);
    }
    obj.sayHi();

这里可以看到把函数改成箭头函数之后两个打印的结果this指向都指向obj,这是为什么呢?

			因为箭头函数在创建的时候 会把内部的this 绑定到当前上下文中的this中.
			这句话最简单的理解就是定时器在箭头函数创建的时候就已经把this绑定到上面sayHi这个函数的this中
			如果还不理解的话下面还有一段代码可以让你看的更简单明了

	   let obj = {
        name: 'jack',
        age: 18,
        sayHi: function () {
            console.log(this);            
            setTimeout( ()=> {
                console.log(this);               
            }, 10);
            // 箭头函数在创建的时候 会把内部的this 绑定到当前上下文中的this       
            setTimeout(() => {
                console.log(this);
                setTimeout(() => {
                    console.log(this);
                }, 10);
            }, 10);          
        }
    }
    obj.sayHi();

可以看到只要是在sayHi这个函数里面的定时器的this指向都是指向了obj,也可以理解成箭头函数的this指向是
根据它上一级的this指向来绑定的,它上一级this指向是谁它的this就是谁