挙動としては以下と似ています
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はメンバを一つずつ生成している最中なのでまだ存在しないアロー関数を認識できないのでしょう
と想像しました
正直正確な設計は分かりません