JavaScriptのcall, apply, bindについて

cab.js

//JavaScriptのcallとapplyとbindについて
//JavaScriptのthisの指すオブジェクトでハマったので書き残しておきます

//まずこれを理解するにはJavaScriptのthisのついてある程度理解しておく必要があります
//また解説にプロトタイプも使用しますので悪しからず
//まずこれを見てください

var _foo = function(){
	this.name = "FOO";
};

_foo.prototype = {
	method : function(str, age){
		console.log(str + this.name + " : " + age);
	}
};

var foo = new _foo();
foo.method("Mr.", 40);//result Mr.FOO : 40

//これを見ればわかるようにthisはコンストラクタとして呼び出されたオブジェクトを指します
//この場合 foo がthisになります
// _foo にはthis.nameが定義されておりますこれは
//コンストラクタ呼び出しされた場合に限り
// コンストラクタ.name と同義です

//では実際にcallを使ってみましょう

var _foo = function(){
	this.name = "FOO";
};

_foo.prototype = {
	method : function(str, age){
		console.log(str + this.name + " : " + age);
	}
};

var _bar = function(){
	this.name = "BAR";
};

_bar.prototype = {
	method : function(str, age){
		console.log(str + this.name + " : " + age);
	}
};

var foo = new _foo();
var bar = new _bar();

foo.method("Mr.", 40);//result Mr.FOO : 40
bar.method("Ms.", 12);//result Ms.BAR : 12

//このようなコードがあります
//あたりまえですが _bar のthisは bar を指します
//しかし foo をthisにして

bar.method("Ms.", 12);//result Ms.FOO : 12

//としたいときはどうすればいいのでしょうか？
//そう call, apply, bind の出番です

// call 編
//callはthisを指定して関数を実行できるものです
//関数の引数は第一引数以降に書きます

bar.method.call(foo, "Ms.", 12);//result Ms.FOO : 12

//このようにすることでthisを foo にして実行できます

// apply 編
// apply は call とほとんど同義です
//しかし引数の指定方法が変わります
// apply では配列で引数を指定します

//↑省略↑

_bar.prototype = {
	method : function(){
		console.log(arguments[0] + this.name + " : " + arguments[1]);
	}
};

//↓省略↓

var bar = new _bar();

var arg = ["Ms.", 12];
bar.method.apply(foo, arg);//result Ms.FOO : 12

//渡された引数は関数内で arguments に格納されていきます
//こちらは引数がたくさんのときや配列で処理すべきコードのときに使います

// bind 編
//bindはcallに近いものです
//しかし引数を指定することはできません
//bindは指定されたobjectをthisとする
// 新しい関数 を生成し返すのです

var bindBar = bar.method.bind(foo);
bindBar("Ms.", 12);//Ms.FOO : 12

//このようにします
//bindは関数をすぐには実行しないで場合
//例えばイベントリスナに登録する場合などに使います
//すぐに実行したい場合は

(bar.method.bind(foo))("Ms.", 12);//result Ms.FOO : 12

//のようにすればいいですが可読性が悪いので
// call を使いましょう

// call も apply も bind も
//全てthisを指定して処理するものでしたが
//それぞれ働きが違います使いどころも変わってきます
//適した場所で使用するようにしましょう