JavaScriptのthisで勘違いしていたパターン

ネストした関数の内部でthisが使えないなど、JavaScriptのthisは使い方が難しいです。 thisが使えないと思ったら実は正しく動いた、ということがあったので、そのコードを備忘録として残しておきます。

サンプルコード

勘違いしていたのは次のようなパターンです。

(function() {
  "use strict"

  var obj = function() {
    return {
      foo: function() {
        this.bar();
      },
      bar: function() {
        console.log("barが呼び出された!");
      }
    };
  }();
  obj.foo();
}());

オブジェクトを生成して返却する関数を定義します。 返却するオブジェクトは、オブジェクトリテラルで定義します。 そのオブジェクトリテラルにおいてfooメソッドとbarメソッドをメンバーとして定義します。 fooメソッドはbarメソッドを呼び出します。

これを実行すると

barが呼び出された!

となります。

fooメソッドからbarメソッドを呼び出すときのthisが、そのオブジェクト自身を指さないのではないか、と勘違いしていたのですが、実は正しく動作しました。

となると、次のようなパターンではどうでしょうか？

(function() {
  "use strict"

  var obj = function() {
    return {
      foo: function() {
        (function() {
          this.bar();
        }());
      },
      bar: function() {
        console.log("これはムリっぽい");
      }
    };
  }();
  obj.foo();
}());

無理やり関数をネストさせてみました。 これをChromeで実行すると

Uncaught TypeError: Cannot call method 'bar' of undefined

予想どおりやっぱりthisは使えませんでした。

結論

JavaScriptのthisは難しいです。いろいろ試行錯誤して覚えるしかないですね。