矢印関数を使用して「正しい」を返すようにしたい場合

Question

矢印関数を使用して「正しい」を返すようにしたいですか？

let mama2 = { 

    children:12, 
    surname: true, 
    town: 'umuadi', 
    school:'imo state university', 
    mamaChild:() => { 
     if (this.surname){ 
      return 'correct' 
     }else{ 
      return 'failed' 
     } 
    } 
} 




let mama3 = { 

    children:12, 
    surname: true, 
    town: 'umuadi', 
    school:'imo state university', 
    mamaChild:function() { 
     if (this.surname){ 
      return 'correct' 
     }else{ 
      return 'failed' 
     } 
    } 
} 

この2つのコードの違いを知りたいのはなぜ私に違う結果がもたらされるかです。

このコードをコンソールで実行すると、最初のコードは「失敗」の結果を、2番目のコードは「正しい」結果を返します。

Answer 1

矢印内にthisを使用すると、windowオブジェクトが参照されます。 thisを通常の関数の中に使用すると、現在のオブジェクトを参照します。

いずれの場合もコンソールログthisを使用してその違いを確認できます。

let mama2 = { 
 
    children: 12, 
 
    surname: true, 
 
    town: 'umuadi', 
 
    school: 'imo state university', 
 
    mamaChild:() => { 
 
     console.log(this); // window object 
 
     if (this.surname) { 
 
      return 'correct' 
 
     } else { 
 
      return 'failed' 
 
     } 
 
    } 
 
} 
 

 
mama2.mamaChild();

let mama3 = { 
 
    children: 12, 
 
    surname: true, 
 
    town: 'umuadi', 
 
    school: 'imo state university', 
 
    mamaChild: function() { 
 
     console.log(this); // mama3 object 
 
     if (this.surname) { 
 
      return 'correct' 
 
     } else { 
 
      return 'failed' 
 
     } 
 
    } 
 
} 
 

 
mama3.mamaChild();

Answer 2

アロー機能は、この場合には、あなたが参照しようとしているオブジェクトではありません外側のスコープにthisのコンテキストをバインドします。 function()のプレーンを使用する場合、thisは、チェックしている値を持つオブジェクトを参照します。