Javascript Arrow函数

Question

我在chrome选项卡控制台中运行这两个代码块，但是我无法

理解为什么在第二种情况下传递的第二个块NaN.The值的输出不应该包括b，我认为这并不重要。

var adder = {
  base: 1,

  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a,n) {
    var f = (v,n) => v + n + this.base;
    var b = {
      base: 2
    };         
   return f.call(b,a,n);
  }
};
console.log(adder.addThruCall(3,4)); // output: 8

但当我做的时候

var adder = {
 base: 1,

 add: function(a) {
   var f = v => v + this.base;
   return f(a);
 },

 addThruCall: function(a,n) {
   var f = (v,n) => v + n + this.base;
   var b = {
     base: 2
   };         
   return f.call(a,n);
 }
};
console.log(adder.addThruCall(3,4)); //output: NaN

Answer 1

call作为第一个参数接受将用作被调用函数中的this (称为context)的值。因此，在第二个例子(f.call(a,n))中，a被认为是上下文参数，而n被认为是f函数的第一个参数-因此，实际上只用单个参数调用了f函数，所以第二个参数是undefined -这相当于调用f(n)，但f函数需要两个参数。因此，在函数内部，您要向undefined添加数字，这将为您提供NaN。

还有一件事要澄清：

由于this在对箭头函数调用call方法时没有绑定，因此忽略了第一个参数(上下文)，并且它不会用作箭头函数中的this值，但在第二个示例中，它不是导致probem的原因，即使使用了正常函数问题也仍然存在。

Answer 2

在代码的第二部分中：

var adder = {
 base: 1,

 add: function(a) {
   var f = v => v + this.base;
   return f(a);
 },

 addThruCall: function(a,n) {
   var f = (v,n) => v + n + this.base;
   var b = {
     base: 2
   };         
   return f.call(a,n);
 }
};
console.log(adder.addThruCall(3,4));  

如果您关注的是console.log(adder.addThruCall(3,4))，那么它会：

return f.call(3, 4) // where 3 is the context specified and 4 is the argument 

也就是说你打电话来了

f(4, undefined) // called with 4

不仅如此，你还会回来：

v + n + this.base

所以现在，

4 + undefined + 1

那是NaN

为了更好地可视化，请使用以下内容：

addThruCall: function(a,n) {
 var f = (v,n) => {
   console.log(v, n, this.base)
   return v + n + this.base;
 }
 var b = {
   base: 2
 };         
 return f.call(a,n);
}

解决方案：

addThruCall: function(a,n) {
  var f = (v=0,n=0) => v + n + this.base;

    var b = {
      base: 2
    };         
   return f.call(a,v,n);
  }

Answer 3

调用()方法调用具有给定值的函数和单独提供的参数。

不使用调用，您可以直接返回f(a，n)；