call（）在其自身上下文中的函数

Question

var f = function() {
  this.x = 5;
  (function() {
    this.x = 3;
  })();
  console.log(this.x);
};

f.call(f);

f();

f.call();

var f作为f.call(f)输出运行5。当作为f()或f.call()输出运行时3。

在每种情况下会发生什么？内部功能this指的是什么？

Answer 1

第一种情况：

首先，您要调用该函数。在函数内部，函数本身即被f设置为this。因此，在第一个示例中，在函数上this.x = 5;设置属性x。

调用内部函数时，将this引用window对象，从而this.x = 3;更改x窗口对象的属性。

在console.log(this.x);此处记录时，将记录x设置为功能属性的相同属性。

第二种情况：

在第二个示例中this，外部函数是指window这样，当this.x = 3;被评估时，window.x变为3。如this指window在外部函数这样 console.log(this.x);的日志window.x这是3

结论：

整个讨论的结论是，如果没有参数传递给对象，call()则window对象将自动绑定。根据MDN

thisArg

可选。此值提供给函数调用。请注意，这可能不是该方法看到的实际值：如果该方法是非严格模式下的函数，则将null和undefined替换为全局对象，并将原始值转换为对象。

请参见下面的代码段。

function foo(){
  console.log(this);
}
foo.call(foo); //foo function
foo.call(); //window object

Answer 2

如果没有特定的上下文，this将为window。您的内部函数始终在没有上下文的情况下运行，因此它将设置window.x为3。如果调用f()，它将也this正在运行，window因此将其记录为3。

但是f.call(f)，如果这样做，this将是f函数对象，并且其x属性将设置为5。

  f.call(f)
  console.log(
    f.x, // 5
    window.x // 3
  );

如果尚不清楚，建议您使用调试器逐步解决。