javascript中箭头函数的this指向问题

Question

var obj = {
        say: function () {
          var f1 = () => {
            console.log('1111', this)
          }
          f1()
        },
        pro: {
          getPro: () => {
            console.log(this)
          },
        }
      }
      obj.pro.getPro()

请问这个输出为什么是window呀?箭头函数指向不是父程序的指向吗，应该是obj呀，百思不得其解，求解，感恩

Answer 1

chatgpt
在这个代码中，箭头函数是在 obj 对象字面量中被定义的，而 obj 对象是在全局作用域中被定义的。因为箭头函数的 this 值是在定义时就绑定的，而不是在运行时绑定的，所以在 getPro 方法中使用箭头函数时，this 始终指向的是全局对象 window。

如果想要在 getPro 方法中访问 obj 对象，可以改用普通函数，这样函数的 this 值会在运行时动态绑定到调用对象（也就是 pro 属性所在的对象 obj）上，代码如下所示：

var obj = {
  say: function () {
    var f1 = () => {
      console.log('1111', this)
    }
    f1()
  },
  pro: {
    getPro: function () {
      console.log(this)
    },
  }
}
obj.pro.getPro() // 输出: {getPro: ƒ}，即 pro 对象

注意，在这种情况下，如果使用 obj.pro.getPro.bind(obj) 将 this 强制绑定到 obj 上，仍然会输出 obj.pro 对象，因为 getPro 方法是在 obj.pro 对象中定义的，而不是在 obj 对象中定义的。