javascript：＆＃39;这个＆＃39;的价值调试器和实际结果之间有所不同

Question

在仅限客户端的应用中，我将依次加载带有脚本标记的两个js文件，并收到错误，如以下评论中所示：

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

为什么世界会发生这种情况？为什么这个＆＃39;这有什么不同呢？ devtools调试器和浏览器中的实际结果之间的值？

编辑：

在下面的screentshot中看到，当我在console.log(this)断点处暂停时，我在控制台中执行debugger时，＆＃39;这个＆＃39; 是对象（），接下来迈出一步（相信我接下来就是一步），窗口对象正在打印到控制台。

Answer 1

箭头函数中this的值在创建时隐式绑定。在调用函数时，创建函数的上下文中的任何this都将是this的值。

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

基本等同于

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