JavaScriptのメソッドで自身のクラスの他のメソッドを呼び出したい

タイトルが長ったらしいですが、実際に自分が詰まったので、このタイトルで書くことにしました。

例えば、Hogeクラス内に、hogeメソッド、hogehogeメソッド、piyopiyoメソッドを定義し、hogeメソッドから3秒カウントダウンする間にhogehogeメソッドを呼び出し、時間切れでpiyopiyoメソッドを呼び出す場合を考えます。以下は正しく動作しないプログラムです。

function Hoge() {
  var hoge = function() {
    var sec = 3;
    var countdown = function() {
      if(sec-- > 0) {
        this.hogehoge();
        setTimeout(arguments.callee, 1000);
      } else {
        this.piyopiyo();
      }
    }
  }
  
  var hogehoge = function() {
    console.log("hogehoge");
  }
  
  var piyopiyo = function() {
    console.log("piyopiyo");
  }
}

var h = new Hoge();
h.hoge();

コンソールを開いたFirefoxでこのコードを実行したところ、

TypeError: This.hogehoge is not a function

と出力されました。

解決方法

結論から書きますと、Hogeクラス内のthisを他の変数に保存し、必要に応じて呼び出せば実行出来ます。

例えば、上で述べた、正しくないコードを動作するように書き換えると、以下のようになります。(修正はHogeクラスのみ)

function Hoge() {
  // thisを変数selfに代入
  var self = this;
  
  var hoge = function() {
    var sec = 3;
    var countdown = function() {
      if(sec-- > 0) {
        // thisからselfに変更
        self.hogehoge();
        setTimeout(arguments.callee, 1000);
      } else {
        // thisからselfに変更
        self.piyopiyo();
      }
    }
  }
  
  var hogehoge = function() {
    console.log("hogehoge");
  }
  
  var piyopiyo = function() {
    console.log("piyopiyo");
  }
}

これでコンソールでは、hogehogeメソッドが3回、1秒毎に実行された後、piyopiyoメソッドが1回実行されます。 まだ、JavaScriptにおけるthisの挙動を理解し切れていないので、ちょっとずつ勉強していけたらとは思っています。(まだちゃんとは理解していません...)

所感

JavaScriptでクラスのようなコードを記述しようとすると、Javaのようにクラスが定義出来ないので、ややこしく感じます。 正直、JavaScriptが余計に嫌いになりました...

自分の勉強不足もあって、内容がいまいちかもしれませんが、とりあえず書きたいことを書けたので、今回はここまで

参考文献

• javascriptでクラスのメソッド内の関数から自身のメソッドを呼ぶには？ (´・ω・`)｜杏z 学習帳