Javascript Prototyp Funktion zurück NAN

Question

Ich verfolge die Hinweise auf ES6 von diesem link und erstellt einen kleinen Code-Schnipsel zum Spielen.

class Bar{ 
    constructor(x,y){ 
     this.x = x; 
     this.y = y; 
    } 
} 
let bar = new Bar(12,10); 
Bar.prototype.foo =function(){ 
    return this.x + this.y; 
} 
bar.foo() // 22 correct 

Ich bin so glücklich, bis ich das mache.

let baz = bar.foo 
baz(); // NaN 

Warum baz() druckt NaN?

Answer 1

Wenn Sie bar.foo auf baz beeinflussen, verliert die Funktion ihren Kontext (dies). Also nicht mehr this.x und this.y. Überprüfen Sie mit Haltepunkten, dass beide nicht definiert sind.

Wenn man also zwei undefinierte zusammen addiert, entsteht ein NaN.

mit diesem Versuchen in Ihrem Browser zu überprüfen:

class Bar{ 
    constructor(x,y){ 
     this.x = x; 
     this.y = y; 
    } 
} 
let bar = new Bar(12,10); 
Bar.prototype.foo =function(){ 
    debugger; 
    return this.x + this.y; 
} 

versuchen, es zu nennen mit seinem Kontext zu definieren. 3 Möglichkeiten, es zu tun:

let baz = bar.foo.bind(bar); 
baz(); 

bar.foo.call(bar); 

bar.foo.apply(bar); 

Answer 2

Sie nahm eine separate Funktion von einem Objekt und Sie verpassen this. Um das zu erledigen, müssen Sie das Objekt bind an die Funktion übergeben.

class Bar{ 
 
    constructor(x,y){ 
 
     this.x = x; 
 
     this.y = y; 
 
    } 
 
} 
 
let bar = new Bar(12,10); 
 
Bar.prototype.foo =function(){ 
 
    return this.x + this.y; 
 
} 
 
console.log(bar.foo()) // 22 correct 
 

 
let baz = bar.foo.bind(bar); // bind innstance 
 

 
console.log(baz()); // 22