为何箭头函数方法中的this指向window而非其父对象？

这个问题正好戳中了箭头函数this绑定最容易被误解的点——很多开发者会默认箭头函数的this和普通函数一样跟着调用位置走，但事实完全相反！咱们一步步拆解你的代码来搞清楚：

核心规则：箭头函数的this是定义时绑定的 #

箭头函数没有自己独立的this，它会直接继承定义它时所处的词法作用域中的this，和调用它的上下文完全无关。这是箭头函数和普通函数最本质的区别之一。

分析你的代码场景 #

看你写的这段代码：

var obj = {
  fullname: 'Jack',
  prop: {
    fullname: 'John',
    getFullname: () => {
      return this.fullname;
    }
  }
};
console.log(obj.prop.getFullname()); // undefined
var test = obj.prop.getFullname;
console.log(test()); // undefined

关键点在这里：getFullname这个箭头函数是在全局作用域下定义的——虽然它写在obj.prop的对象字面量里，但对象字面量本身不会创建新的词法作用域！也就是说，当这个箭头函数被定义时，它所处的词法作用域就是全局环境，所以它的this直接绑定了全局对象window（浏览器环境中）。

那为什么不是obj或者prop？

• 对象字面量不是函数，无法形成独立的作用域，所以箭头函数不会继承obj或prop的上下文
• 如果把getFullname换成普通函数，调用obj.prop.getFullname()时，this才会指向调用它的prop对象，因为普通函数的this是调用时绑定的

修正方案：用普通函数实现预期效果 #

如果你的需求是让getFullname返回prop的fullname，直接把箭头函数换成普通函数即可：

var obj = {
  fullname: 'Jack',
  prop: {
    fullname: 'John',
    getFullname: function() {
      return this.fullname;
    }
  }
};
console.log(obj.prop.getFullname()); // 输出 "John"
var test = obj.prop.getFullname;
console.log(test()); // 输出 undefined（此时this指向window，和普通函数调用规则一致）

内容的提问来源于stack exchange，提问作者sushant ratnam