Javascript的箭头功能

Question

我在铬选项卡控制台中运行的代码块，但我不能
明白为什么是第二个块的输出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

（）方法调用一个函数在给定单独设置这个值和参数。

而不是使用调用，你可以直接返回f（a，n）;

Answer 3

正常功能的问题在你的代码的第二部分：

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); 
    }