箭头函数的this指向究竟如何

1:最普通的一种，只有一层

let obj = {
    data:["数据1","数据2"],
    init:function(){
        //给 document 对象的  ondblclick  属性绑定一个箭头函数
        document.ondblclick = ()=>{
            console.log("箭头函数")
            console.log(this)  //指向  obj  这个对象
        },
        //给 document 对象的  onclick  属性绑定一个普通函数
        document.onclick = function(){
            console.log("非箭头函数")
            console.log(this)  //指向  document  这个对象
        }
    }
}
//初始化
obj.init();

运行结果截图：

2：在document对象后面的箭头函数中再次嵌套一层

let obj = {
    data:["数据1","数据2"],
    init:function(){
        //给 document 对象的  ondblclick  属性绑定一个箭头函数
        document.ondblclick = ()=>{
            console.log("document.ondblclick 绑定的箭头函数的this指向")
            console.log(this)  //指向  obj  这个对象
            let newObj = {
                    name:"小花",
                    sayName:function(){
                        console.log("这是小花的里面普通函数的this指向")
                        console.log(this)   //这个 this 指向的对象是小花
                    },
                    sayhello:()=>{
                        console.log("这是小花里面的箭头函数的this指向")
                        console.log(this)   //这个 this 指向的对象和上一层中的document对象后面的箭头函数内部的this指向的对象是同一个对象，指向的都是是 obj 对象
                    }
            }
            newObj.sayName()
            newObj.sayhello()
        },
        //给 document 对象的  onclick  属性绑定一个普通函数
        document.onclick = function(){
            console.log("document.onclick 绑定的普通函数的指向")
            console.log(this)  //指向  document  这个对象
        }
    }
}
//初始化
obj.init();

运行结果截图：

3：在document对象后面的普通函数中再次嵌套一层

let obj = {
    data:["数据1","数据2"],
    init:function(){
        //给 document 对象的  ondblclick  属性绑定一个箭头函数
        document.ondblclick = ()=>{
            console.log("document.ondblclick 绑定的箭头函数的this指向")
            console.log(this)  //指向  obj  这个对象
            let newObj = {
                    name:"小花",
                    sayName:function(){
                        console.log("这是小花的里面普通函数的this指向")
                        console.log(this)   //这个 this 指向的对象是小花
                    },
                    sayhello:()=>{
                        console.log("这是小花里面的箭头函数的this指向")
                        console.log(this)   //这个 this 指向的对象和上一层中的document对象后面的箭头函数内部的this指向的对象是同一个对象，指向的都是是 obj 对象
                    }
            }
            newObj.sayName()
            newObj.sayhello()
        },
        //给 document 对象的  onclick  属性绑定一个普通函数
        document.onclick = function(){
            console.log("document.onclick 绑定的普通函数的指向")
            console.log(this)  //指向  document  这个对象
            let newObj = {
                name:"小小黑",
                sayName:function(){
                    console.log("这是小小黑的里面普通函数的this指向")
                    console.log(this)   //这个 this 指向的对象是 小小黑
                },
                sayhello:()=>{
                    console.log("这是小小黑里面的箭头函数的this指向")
                    console.log(this)   //这个 this 指向的对象和上一层中的document对象中的this指向的对象是同一个对象，指向的都是 document 对象
                }
        }
        newObj.sayName()
        newObj.sayhello()
        }
    }
}
//初始化
obj.init();

运行结果截图：

结论：一个箭头函数内部的this，指向的对象是这个箭头函数所处的环境的的父级环境中的那个this指向的对,而且不用管他带的父级是不是另外一个箭头函数。