ひよっこPGのブログ

主に、技術メモや英語たまにギター関連のことも書いているブログです。

JavaScriptのthisについて自分なりの解釈 その1

JavaScriptでプログラムを書いていると、thisというキーワードを見たことがあると思います。

そのthisについて自分なりの解釈を説明してみたいと思います。

thisは、実行呼び出し元のオブジェクトを表す変数だと、解釈しています。

いくつかプログラムを通して説明してみます。

何も考えずに 関数を宣言して実行した場合

function test(){
  alert(this);
}

test();

f:id:buzzword111:20140110163001p:plain

上記は実行呼び出し元のオブジェクトが省略されています。
省略されているのは、グローバルオブジェクト = windowオブジェクトです。
なので、windowオブジェクト内にある test()関数を実行しています。という意味になります。

省略せずに書くと。

window.test = function(){
  alert(this);
}

window.test();

自作オブジェクトを作って関数を宣言した場合

自分でオブジェクトを作成後、そのオブジェクトに関数を入れると、thisには作成オブジェクトが代入されます。
下記では、自分で testオブジェクトを作成後 hoge関数を設定しています。
hoge関数内で、thisの中身を見ると、testオブジェクト

var test = {};
test.hoge = function(){
  alert(this);
}

test.hoge();

f:id:buzzword111:20140110163950p:plain

testという名前は表示されていません。
オブジェクト名を表示させる方法を調べたのですが、よく分からなかったので
オブジェクト内のプロパティを列挙させて確認してみます。

参考 : オブジェクト - JavaScript プログラミング解説

var test = {};
test.hoge = function(){
  ShowProperties(this);
}

test.hoge();

// 引数で渡したオブジェクトのプロパティを列挙する関数
function ShowProperties( object ){
	var property = [];
	for( var propertyName in object ){
		var propertyValue = object[ propertyName ];
		property.push( propertyName + ' : ' + propertyValue );
	}
	window.alert( property.join( '\n' ) );
}

f:id:buzzword111:20140110165547p:plain
実行結果を見ると
hogeプロパティに、ShowProperties()を実行する関数が代入されていますね。
これで、testオブジェクトだということが確認できます。

他サイトでの説明と関連づける

JavaScriptの「this」は「4種類」?? - Qiita [キータ]
こちらのサイトでは、thisは4パターンあると説明されています。

自分が上記で説明したthisの説明は、サイト内の

1:メソッド呼び出しパターン
2:関数呼び出しパターン

にあたると思われます。
どちらも、呼び出し元のオブジェクトを参照していると解釈して問題ないと思ったからです。


他にもthisを表すパターンがあるので、その2で説明したいと思います。

JavaScriptのthisについて自分なりの解釈 その2 - ひよっこPGの技術メモ・英語・ギターのブログ。