对象中的箭头函数this指向问题

Question

代码如下

const obj = {
    id : "obj",
    getId : function () {
        console.log(this.id);
    },
    getId2 : () => {
        console.log(this.id);
    }
};

const obj2 = {
    sub : {
        map: new Map(),
        getId : () => {
            console.log(this.id)
        }
    },
    id : "obj2",
};

obj2.sub.map.set("getId", () => {console.log(this.id)});

const obj3 = {
    obj : obj2.sub.map.get("getId"),
    id : "obj3"
};

var id = "window";  //只有var声明的变量才会同时创建为window的属性

obj.getId(); //obj
obj.getId2(); //window
obj2.sub.map.get("getId")(); //window
obj2.sub.getId(); //window
obj3.obj(); //window

根据以上代码,是否可以理解为对象中以属性方式定义的箭头函数,运行时总是指向window?

在代码中obj2里的嵌套对象中,

如果用普通函数的话能是指向sub本身的作用域,

但用箭头函数时,如果按箭头函数体内的this对象是定义时所在的对象而不是使用时所在的对象这个思路应该是指向sub对象的上一级obj2的作用域,但最后却指向了window

主要是这部分有点不明白

Answer 1

---------------------------------以下是暂时想到的答案,如有错漏欢迎指出---------------------------------

因为我看阮一峰老师的es6标准入门时,上面说的解释是:

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

因为这样,一直想不明白为什么会出现运行上面代码时的结果

刚刚翻了下John Resig的JavaScript忍者秘籍(第2版),解释是:

由于箭头函数是作为对象字面量的属性定义的,对象字面量在全局代码中定义,因此,箭头函数内部的this值与全局函数的this值相同

另外翻了Nicholas C.Zakes的深入理解es6,里面的解释是:

如果箭头函数被非箭头函数包含,则this绑定指向的是最近一层非箭头函数的this;否则,this的值会被设置为全局对象

因为如果用普通函数的话,每一层嵌套对象各自都有作用域(如图)

但综合几本书和评论里观点,那么就是说无论对象嵌套有多深,因为作为对象的方法箭头函数不是被普通函数包含,那么this可以理解为总是指向window对象(如图)

至于浏览器跟node输出不一致,是因为node环境下和浏览器的全局对象不同而造成,不在讨论范围

果然将箭头函数作为对象方法会引起混乱啊

Answer 2

箭头函数绑定的是当前块级作用域中的this就像楼上所说的上一层作用域，

Answer 3

箭头函数没有自己的this值，它的this值来自其所在的词法作用域

Answer 4

箭头函数里的this是指向上一层作用域，在上面你可以认为是指向window

Answer 5

this和箭头函数的值可以一言以蔽之：
箭头函数：this等同于上一层非箭头的函数的this值或全局对象（window或undefined）
this：谁调用归谁

Answer 6

谢谢，学习了