Javascript Arrow Funktion

Question

Ich bin sowohl die Code-Blöcke in der Chrom-Registerkarte Konsole ausgeführt, aber ich bin nicht in der Lage zu
verstehen, warum die Ausgabe von zweiten Block NaN ist. Die Werte sollten im zweiten Fall nicht enthalten b, die Egal was ich denke ist egal.

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 

Aber wenn ich

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 als erstes Argument akzeptiert Wert, der als this (genannt context) in aufgerufenen Funktion verwendet wird. So in zweiten Beispiel (f.call(a,n)) a gilt als Kontextargument und n gilt als f Funktion erstes Argument - so als Ergebnis Ihre f Funktion wird eigentlich mit nur einem einzigen Argument aufgerufen, so das zweite Argument ist undefined - es entspricht dem Aufruf f(n) aber f Funktion erwartet zwei Argumente. Als Ergebnis innerhalb der Funktion fügen Sie die Nummer undefined, die Sie NaN gibt.

Eine weitere Sache zu klären:

seit this nicht in Pfeil Funktionen gebunden ist, wenn call Methode auf Pfeil Funktion erstes Argumente (Kontext) ignoriert ruft und es wird nicht als this Wert innerhalb Pfeil-Funktion verwendet werden aber in Ihrem zweiten Beispiel wird dazu führen, dass nicht Ihre probem und selbst wenn Sie normale Funktion Problem verwendet würde noch

Answer 2

Telefonieren() -Methode ruft eine Funktion mit einem gegebenen diesem Wert und Argumenten individuell zur Verfügung gestellt.

Anstatt Anruf zu verwenden, können Sie direkt f (a, n) zurückgeben;

Answer 3

im zweiten Teil des Codes bestehen:

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

Wenn Sie konzentrieren sich auf die console.log(adder.addThruCall(3,4)) es tut:

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

das heißt, Sie genannt,

f(4, undefined) // called with 4 

Nicht nur das, Sie kehren zurück:

v + n + this.base 

so jetzt,

Diese

Das NaN

---

Zur besseren Visualisierung Einsatz ist:

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

---

Lösung:

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

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