サラリーマンIT技術者の調査レポート

日々の業務で気付いた当たり障りのない技術的なあれこれを綴ります。

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

ネストした関数の内部でthisが使えないなど、JavaScriptthisは使い方が難しいです。 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は使えませんでした。

結論

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