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

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

その３が最後です。
今回のパターンは、thisへ自由なオブジェクトを代入できるパターンを説明してみます。

function で宣言した関数　全てで使えるメソッド callメソッドとapplyメソッドを使用します。

まずcallメソッドとapplyメソッドについて分かりやすく説明していたブログがあるのでご参考に。
参考 : applyとcallの使い方を丁寧に説明してみる - あと味

簡単に説明すると、すべての関数は callメソッドとapplyメソッドを使うことができる。
この二つのメソッドを使うと thisに自由なオブジェクトを代入できるようになる。
と、簡単に説明しておきます。

では、プログラムを通して説明しますね。

// 引数の値をthis.a,bに代入する関数
var test = function(param1,param2){
	this.a = param1;
	this.b = param2;
}

// hogeオブジェクト作成
var hoge = {};
// hogeをthisキーワードに代入して test関数を呼び出す。
test.call(hoge,"aaa","bbb");

// hogeオブジェクトのプロパティを列挙する。
ShowProperties(hoge);

function ShowProperties( object ){
	var property = [];
	for( var propertyName in object ){
		var propertyValue = object[ propertyName ];
		property.push( propertyName + ' : ' + propertyValue );
	}
	window.alert( property.join( '\n' ) );
}

上記の実行結果で、表示されているのはhogeプロパティの一覧になります。

これで、thisには好きなオブジェクトを設定することが出来ると分かります。
callメソッドを使わずに実行すると、thisにはグローバルオブジェクトが代入されていて、window.a,bに代入されることになりますね。

ちなみに applyメソッドでやる場合は

test.call(hoge,"aaa","bbb");
// ↓↓↓
test.apply(hoge,["aaa","bbb"]);

というように渡したい引数を配列で渡します。
callとapplyの違いは、引数をそのまま渡すか、配列で渡すかの違いです。

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

JavaScriptの「this」は「4種類」？？ - Qiita [キータ]

このサイトでの説明では

apply,call呼び出しパターン

と同じ内容を説明しています。

まとめ

内容は薄いですが、簡単にthisについてお分かりになれたでしょうか？
JavaScriptのthisについてあやふやに理解していた人のために少しでも参考になれば幸いです。