无法理解带有 "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

正如预期的那样，控制台 returns 正确。但是，这是我的第一个疑问，我不明白为什么当我将 obj 直接与 obj.bar() 进行比较时它 returns 为假，因为我假设 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

您正在查看的是 obj.bar() 返回一个分配给变量 fn 的函数，然后调用 fn fn()

所以

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

console.log(obj.bar()() === obj); //should give you true

Answer 2

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

否，obj.bar() returns 函数 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()

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

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

Can't understand the behaviour of functions with "this" keyword

javascript

this