挙動としては以下と似ています ``` b={}; b.x=0; b.y=function (){return 0;} b.a=()=>{return this.y();} console.log(b.a()); ``` ``` b.a=()=>{return this.y();} ^ TypeError: this.y is not a function ``` ここで、```b.a=()=>{return this.y();}```を以下のように変えます (←Rookieさんより承認を得て編集。編集6文字以上制限より記載) ``` b={}; b.x=0; b.y=function (){return 0;} b.a=function(){return this.y();} console.log(b.a()); ``` ``` 0 ``` 件のコードも同じようにfunctionに変えます ``` const person = { name: 'Bob', hello: function(greeting) { console.log(greeting + ' ' + this.name); return greeting + ' ' + this.name; }, hello1s: function(){ console.log(this); setTimeout(()=>{this.hello('hello');}, 1000); } } person.hello1s() ``` ``` { name: 'Bob', hello: [Function: hello], hello1s: [Function: hello1s] } 0 hello Bob ``` 結果が一致しました 普段あまり意識はしませんが、アロー関数は関数という”値”です 一方でfunctionは関数という”型”です JavaScriptではこのような型定義も変数で束縛することができます 例えば**class**も代入できます ``` const cls=class Class{} ``` personに匿名オブジェクトを代入した時点では内部にどんなメンバが定義されるか分かりません 関数型はメタデータの一種なのでコードの実行時に解釈できますが、アロー関数は値なので実行中に動的に生成されます その時点でオブジェクト自身を指すthisはメンバを一つずつ生成している最中なのでまだ存在しないアロー関数を認識できないのでしょう と想像しました 正直正確な設計は分かりません