JavaScriptであまり使わなかった関数のひとつでもある「bond」を調査してみました。
前回の
「call」も、頻度高く使うイメージは無いですが、この辺の関数を熟知しているかどうかがJavaScriptを理解できているかのポイントだと思いましたね。
事前知識
bindでもcall関数に引き続いてthisの事を熟知しておきましょう。
this
thisを指定しているトコロの上位階層の事を指すと考えるのが一番分かりやすい。
下のサンプルでは「aaa」の下位階層に「bbb」と「ccc」がいて、それぞれ、タイプは違うが、「bbb」と「ccc」のthisは親階層である「aaa」であるという事。
var aaa = {
bbb:"type-b"
ccc:function(){
alert(this.bbb);
}
};
aaa.ccc();
あとprototypeとnew宣言も理解しておかないと厳しいかも・・・
サンプル
通常使用方法
var a = function(){
this.name = "michel";
this.view = function(){
console.log(this.name);
};
};
var b = function(){
this.name = "shelly"
};
//1:通常関数
var aa = new a();
aa.view();
//2:thisを別の関数に紐付ける
aa.view.bind(bb)()
//3:関数に代入すると扱いやすくなる。
var bb = new b();
var cc = aa.view.bind(bb);
cc();
受け渡し値を固定化する
var a = function(){
this.name = "michel";
this.view = function(a,b,c){
console.log(this.name+"/"+a+"/"+b+"/"+c);
};
};
var b = function(){
this.name = "shelly"
};
//1:通常関数
var aa = new a();
aa.view(1,2,3);
//2:thisを別の関数に紐付ける
var bb = new b();
var cc = aa.view.bind(bb,"a");
cc("b","c");
//3:関数に代入すると扱いやすくなる。
aa.view.bind(bb,"A","B")("C");
**.bind(this対象関数,引数)
とすると、引数を固定化することが可能になる。
結論
bindは、内部関数におけるthisの扱いを別関数に移譲することができるという点と、変数の固定化をすることにより
関数の引き渡し値を少しだけ効率的に個別設置できるというメソッドなのですね。
便利に使いこなせるといいかもしれないけど、多用すると、callと同じようにコードレビューがやりずらくなる可能性はありますね。
コメントで回避しましょう。
参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
