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