javascript：调试器和实际结果之间的“this”值不同

Question

在一个仅限客户端的应用程序中，我正在加载两个带有脚本标签的 js 文件，一个接一个，并得到如下 cmets 中出现的错误：

obj.js

'use strict';

let obj = {};

obj.func1 = () => {
  return 'stuff';
}

obj.func2 = (arr) => {
  debugger; // in devtools, value of 'this' is obj, as expected
  console.log(this); // clicking 'next' button in devtools,
                     // the object that is actually being printed to
                     // console is the window object!!!
                     // javascript, wtf?!?!
  debugger;

  let myStuff = this.func1(); // fails because window has no 'func1' property

  ...
  ...
}

window.obj = obj;

script.js

'use strict';

obj.func2()
// Uncaught TypeError: this.func1 is not a function

到底为什么会发生这种情况？为什么 devtools 调试器和浏览器中的实际结果之间的 'this' 值存在差异？

编辑：

请参阅下面的屏幕截图，当我在控制台中自己执行 console.log(this) 并被 debugger 断点暂停时，'this' is Object() 和一个下一步（相信我，这正是下一步），窗口对象正在打印到控制台。

Answer 1

箭头函数中this 的值在创建点被隐式绑定。无论this 在创建函数的上下文中是什么，都将是调用函数时this 的值。

obj.func2 = (arr) => {
  // ...
};

基本上等价于

obj.func2 = function(arr) {
  // ...
}.bind(this);