javascript勉強中なのですが、thisの扱いがよくわかりません。。。

thisが何をどう参照しているのかよく分からない

今まで避けていたのですが、理解を深めようとJavaScrpt勉強中です。
thisで躓くといったような記事は散々見かけましたが・・・
自分も例に漏れず躓いてしまいました；；
どうかお力をお貸しください宜しくお願いします。

発生している問題・エラーメッセージ

出力結果がundefinedになる

該当のソースコード

js
1let People = {};
2
3class Human{
4    constructor(){
5        if(this === People.TANAKA){
6            this.value = 'TANAKA';
7        }else if(this === People.YAMADA){
8            this.value = 'YAMADA';
9        }
10    }
11    get name(){ return this.value }
12}
13
14People = {
15	TANAKA : new Human(),
16	YAMADA : new Human()
17}
18console.log(People.TANAKA.name); //=> undefined

new Human()でそれを指してるはず・・・？

自分の理解では

js
1People = { 
2    TANAKA : new Human() //この場合

js
1if(this === People.TANAKA) //thisがPeople.TANAKAになるので

js
1this.value = 'TANAKA'; //this.valueはTANAKAになる

と思っていたんですがどうやら違うようです。
この場合、thisは何を参照しているのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

constructorの中のコードが動いているタイミングではまだインスタンスが出来ていません。

js
1let People = {};
2
3class Human{
4    constructor(){}
5    get name(){
6        if(this === People.TANAKA){
7            this.value = 'TANAKA';
8        }else if(this === People.YAMADA){
9            this.value = 'YAMADA';
10        }
11    return this.value;
12    }
13}
14
15People = {
16    TANAKA : new Human(),
17    YAMADA : new Human()
18}
19console.log(People.TANAKA.name); //=> TANAKA
20```**動くサンプル：**[https://jsfiddle.net/65x7unom/](https://jsfiddle.net/65x7unom/)