JavaScriptのプロトタイプ関数NANを返します

Question

私はこのlinkからES6の注釈に従っていて、再生するための小さなコードスニペットを作成しました。

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 

私はこれを行うまでとても幸せです。

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

バズ（）ははNaNを印刷しているのはなぜ？

Answer 1

bar.fooに影響を与えると、関数はそのコンテキスト（this）を失います。それでは、これ以上はありません..xとthis.y.ブレークポイントでチェックすると、両方が未定義であることがわかります。

したがって、未定義の2つを加算すると、NaNが生成されます。

お使いのブラウザでチェックあまりにもこれを試してみてください：

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

そのコンテキストを定義し、それを呼び出すようにしてください。それを行う3つの方法：

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

bar.foo.call(bar); 

bar.foo.apply(bar); 

Answer 2

オブジェクトから別の機能を使用し、thisが不足しています。その作業を行うには、関数へのオブジェクトbindが必要です。

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