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; 更改window对象的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
  );

如果还不清楚，我建议使用调试器逐步执行它。

Answer 3

当你调用f与对自身的引用，它设置x属性5功能和内部匿名函数有this指的是窗口，所以它window.x设置为3以外的匿名函数， this还是指到函数f ，所以console.log（this.x）输出5。

当您使用f()或f.call()调用f时，函数f和其中的匿名函数this引用设置为window （默认值），因此在匿名函数内部或外部更改this.x的值影响输出结果。

如果你CONSOLE.LOG的值，你可以清楚地看到这this函数f内部和内部匿名函数内部。

 var f = function() { console.log("This inside function f:", this.toString()); this.x = 5; (function() { console.log("This inside anonymous inner function:", this.toString()); this.x = 3; })(); console.log(this.x); }; console.log("calling function x with this set to itself"); f.call(f); console.log("---------------") console.log("invoking function x with brackets ()") f(); console.log("---------------") console.log("calling function x without setting this context") f.call(); console.log("---------------") 

Answer 4

除了其他答案之外，如果您想要可预测的行为，您至少可以使用2种方法。

方法1 :(关闭）

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

f.call(f); // 3

f(); // 3

f.call(); // 3

方法2 :(箭头功能）

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

f.call(f); // 3

f(); // 3

f.call(); // 3

Answer 5

'this'关键字指的是当前代码正在执行的上下文对象。 在任何函数之外，这指的是全局对象。

通过使用call() ， apply()函数，this的值可以从一个上下文传递到另一个上下文。

• 所以在第一种情况下[ f.call（f） ]通过调用call函数并将第一个参数赋予f ， this.x引用5.因此，答案打印为5。
• 第二种情况[ f（） ]它在不使用调用函数的情况下调用函数。 因此，它是指的执行上下文this为3。因此，作为打印3。
• 在第三种情况[ f.call（） ]中，在调用函数内部没有提到参数。 所以它引用全局对象并打印3作为输出。