非同期処理で取得したデータをクラスのプロパティに入れたいです

Question

質問させてください。
下のようなコードを作成しまして、C クラスには外部から json データを取得するメソッドがあり、`new A()`を実行したときに、そこで取得したデータを C クラスのプロパティに格納したいと思っております。
しかし下のコードだと`fecth()`が原因のためか中身が空の状態になってしまいます。

```javascript
class A {
  constructor() {
    this.b = new B();
  }
}

class B {
  constructor() {
    this.c = new C();
  }
}

class C {
  constructor() {
    this.data = this.fetchData(); // ← ここのプロパティに取得したデータを入れたいです
    console.log(this.data); // undefined
  }
  
  // json からデータを取得
  fetchData() {
    fetch('sample.json')
      .then(res => {
        return res.json();
      })
  }
}

const a = new A();
```
そこで下のように非同期処理が終わるのを待つために`await`を使おうと思ったのですが、コンストラクターには`async`が使えないらしく、エラーになってしまいます。
```javascript
async constructor() {
  this.data = await this.fetchData();
}
```
[こちら](https://qiita.com/flasksrw/items/4f62a35bdb52e57643e1)のページを参考に `init()` を作ってみてもうまくいきませんでした・・・
```javascript
class C {
  constructor() {
    this.init();
  }

  async init() {
    this.data = await this.fetchData();
    console.log(this.data);
  }

  fetchData() {
    fetch('sample.json')
      .then(res => {
        return res.json();
      })
  }
}
```
もし解決方法をご存じの方がいらっしゃいましたらご教授いただけると助かります。
よろしくお願いいたします。

### 追記
gentaro様からのアドバイスをもとに修正しました。
```javascript
class A {
  constructor(data) {
    this.b = new B(data);
  }

  start() {
    this.b.active();
  }
}

class B {
  constructor(data) {
    this.c = new C(data);
  }

  active() {
    this.c.hoge();
  }
}

class C {
  constructor(data) {
    this.data = data;
    console.log(this.data);
  }
  
  hoge() {
    // このメソッドで取得したデータを使います
  }
}

// json からデータを取得
fetch('sample.json')
  .then(res => {
    return res.json();
  })
  .then(data => {
    // Aクラスのインスタンスを生成
    const a = new A(data);

    // ゲームをスタート
    a.start();
  });
```

Accepted Answer

[fetch](https://www.google.co.jp/search?q=MDN+fetch) をclassブロックのメソッドの中で使う場合、アロー関数（this は宣言したスコープになる）を使い、適切にコールバック内でプロパティに値を格納するだけです。


```json
{"sample":"SAMPLE"}
```

```javascript
/* omitted  class A{}, class B{} */

class C {
  constructor() {
    this.fetchData();
    console.log(this.data); // undefined
  }

  // json からデータを取得
  fetchData() {
    fetch('sample.json')
      .then( res => res.json() )
      .then( json => {
        this.data = json
      })
  }
}

const a = new A();
console.log( a.b.c );
/*
// fetch によるsample.json 読み込み完了後:
C {}
    data: 
        sample: "SAMPLE" <---- data プロパティに入っています。
        __proto__: Object
    __proto__: Object
 */
console.log( a.b.c.data )
// => {sample: "SAMPLE"}
```
追記）

fetch の遅延を考える

```javascript
/* omitted */
  fetchData() {
    fetch('sample.json')
      .then(res => res.json())
      .then( json => {
        this.data = json;
        if( "function" === typeof this.onload ) {
          this.onload(this);
        }
      })
  }
/* omitted */
const a = new A();
a.b.c.onload = function(c){
  alert(JSON.stringify(c.data)); 
}
```

Answer

こんなのはどうでしょうか？コンストラクタはどうしても非同期にできないので、ファクトリーを作るか、作った後から初期化する必要がありますね。 ```HTML Document ``` ```JSON { "name": "John" } ```

追記

関連した質問