【Javascript】クラス内でsetIntervalを使うときの書き方について

Question

JSのクラスで、メソッドの中でsetIntervalを使う場合、

class HogeClass {
    constructor() {
        this.hoge = 1;
    }
    fooFunc() {
        console.log(this.hoge);
    }

    hogeFunc() {
        setInterval(this.fooFunc, 1000);
    }
}

では想定通りの動きをしない（1秒毎にthis.hogeの値がコンソールに出力されるはずが、1秒毎に「undefined」が出力される）のですが、

class HogeClass {
    constructor() {
        this.hoge = 1;
    }
    hogeFunc() {
        var f = this;
        return setInterval(
            function() {
                console.log(f.hoge);
            },
            1000
        )
    }
}

と書くとちゃんと1秒毎にthis.hogeの値である1が出力されます。

・「var f = this;」では何をやっているのか
・どうして上のコードでは「1」ではなく「undefined」が出力されるのか

がわかりません。教えて下さい。

Comments

[m.ts10806]

this　をconsole.log()などで見てみれば良いのでは。

[kay-ws]

手元で実行すると、下のコードでもundefinedが出力されるのですが。
再現しますか？

[osen_eng]

申し訳ありません。下のコードに間違いがありました。
正しくは
（×）console.log(this.hoge);
（○）console.log(f.hoge);
でした。

Answer 1

ちゃんと1秒毎にthis.hogeの値である1が出力されます。

されません（jsFiddle）。

---

これは、コールバック内でthisが変化してしまうことによって起きる現象です。対応策としては、

• thisを使わない（var f = this;のようにしてfの方を参照する）
• bindでthisを固定してしまう（setTimeout(this.fooFunc.bind(this))のようにする、あるいはコンストラクタでbindしたものを代入する）
• メンバ変数定義＋Arrow Functionを使う（Reactのクラスコンポーネントでよく行われます）

などがあります。

Comments

[osen_eng]

申し訳ありません。質問文の下のコードに間違いがありました。
正しく動く例では、教えていただいた通り
（×）console.log(this.hoge);
（○）console.log(f.hoge);
としていました。

なぜこのような書き方をするのか（this.hoge ではなぜダメなのか）を聞きたかったのですが、こちらのミスにより意味のわからない質問になってしまいました。ごめんなさい。

他の対応策も教えていただきありがとうございます。教えていただいた対応策をもとに、詳しく調べてみます。

[maisumakun]

> なぜこのような書き方をするのか（this.hoge ではなぜダメなのか）を聞きたかったのですが

そこにも回答したかと思います。

Answer 2

どうして上のコードでは「1」ではなく「undefined」が出力されるのか

前者の書き方だとsetIntervalから実行されたfooFunc()内のthisがwindowを参照しており、this.hogeが存在しないためです。

前者の書き方もsetIntervalにthis.fooFuncを渡す際にbind(this)することで、thisがwindowでなくHogeClassのインスタンスとなるので動作すると思います(下記参照)。

class HogeClass {
    constructor() {
        this.hoge = 1;
    }
    fooFunc() {
        console.log(this.hoge);
    }

    hogeFunc() {
        console.log(this);
        setInterval(this.fooFunc.bind(this), 1000);
    }
}

Javascriptのthisについては下記記事がわかりやすいです。

• JavaScript の this を理解する多分一番分かりやすい説明

「var f = this;」では何をやっているのか

結果的にこの行自体の意味はないのですが、グローバル変数のfにthisここでいうところのHogeClassを入れています。

Answer 3

setIntervalは第3引数でコールバックに変数を引き継ぐことができます

    fooFunc(x) {
        console.log(x.hoge);
    }
    hogeFunc() {
        setInterval(this.fooFunc,1000,this);
    }

Comments

[osen_eng]

知りませんでした。ありがとうございます。教えていただいた内容をもとに、自分でも調べてみます。

Answer 4

thisの参照が変わり、undefinedになる原因は他の回答者さんが、言われている通りなので、
setIntervalの少し柔軟な使い方を紹介します。

class HogeClass {
  constructor() {
    this.hoge = 1;
  }
  fooFunc() {
    console.log(this.hoge);
  }

  hogeFunc() {
    setInterval(() => {
      this.fooFunc();
    }, 1000);
  }
}

というように、コールバックにクロージャーを使う方法です。
これならば、thisの参照は、クラスインスタンスを指すことができるので、
その領域内で、様々処理を行うことが可能になります。
ただし、今のままだと、setIntervalの処理を止めることは、ほぼほぼ不可能になりますので、
注意しましょう。
（止め方に関しては、本質問から逸脱するため割愛）