javascript - 无法理解带有 "this"关键字的函数的行为

Question

我试图找出 JavaScript 中“this”关键字的行为。总的来说，我理解它在函数调用的不同上下文中的行为方式，但是当它是箭头函数的一部分时我遇到了一些麻烦。

我使用 MDN 作为信息来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#Arrow_functions .我已经掌握了一般概念，即在箭头函数的情况下，“this”保留了与函数定义的上下文相对应的值，但是在玩该部分的最后一个示例时我开始遇到麻烦。

例子是这样的:

var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  }
};

var fn = obj.bar();

console.log(fn() === obj); //true

正如预期的那样，控制台返回 true。然而，这是我的第一个疑问，我不明白为什么当我将 obj 直接与 obj.bar() 进行比较时它返回 false，因为我假设 obj.bar() 和 fn() 调用相同的函数:

var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  }
};

console.log(obj.bar() === obj); //false

我开始研究代码，试图找到更多意想不到的行为，但也有更多疑问。第二个:当我更改 bar 的定义类型时，函数中的“this”显然开始引用全局对象，尽管我认为该函数是作为 obj 的方法被调用的。 ¿结果不应该相反吗？ ¿是因为现在“this”指的是 fn 的上下文吗？

var obj = {
  bar: function() {
    var x = function() {
      return this;
    };
    return x;
  }
};

var fn = obj.bar();

console.log(fn() === obj); //false
console.log(fn() === this); //true

第三个疑点:如果我再次省略fn，直接使用obj.bar()进行比较，结果又是意想不到的。在这种情况下，函数中的“this”既不指全局对象也不指 obj(我期望是第二个，因为 bar() 是作为 obj 的方法调用的)。

var obj = {
  bar: function() {
    var x = function() {
      return this;
    };
    return x;
  }
};

console.log(obj.bar() === obj); //false
console.log(obj.bar() === this); //false

当我尝试直接查看 obj.bar() 返回的值时，我无法从控制台获得太多帮助:

console.log(obj.bar());
//With arrow definition: () => { length:0
//                               name:x }
//With the second definition: f() => { length:0
//                                     name:"bar"
//                                     prototype: bar}

我希望这里有人可以帮助我了解发生了什么，或者至少向我推荐一个更完整的资源。提前致谢!

Answer 1

I asume that obj.bar() and fn() invoke the same function

不，obj.bar() 返回函数 x。它正在创建一个闭包。

"this" in the function apparently starts referring to the global object, although I thought the function was being called as a method of obj

不，fn 没有作为 obj 上的方法调用，只有 bar 是。 fn() 作为普通函数调用。

if I omit fn again and use directly obj.bar() in the comparison, "this" in the function refers neither to the global object nor to obj

没有。函数中的 this 从未被计算过，函数也从未被调用过。您只调用了 bar，然后将返回的函数与 obj 进行了比较。

When I try to see directly the value returned by obj.bar()

...然后控制台会显示一个函数对象!