javascriptのbind機能はインスタンスを利用する時にキチンと理解しておかなければいけません。
単なるthisの受け渡しだけであれば、そんなに難しくはないのですが、bindを通して値を受け渡したい時に、その引数の順番に注意しなければいけないという事がわかったので、その理解するプロセスを紹介しておきます。
ちなみに、以前にもbindの記事を書いているのですが、引数についてほとんど触れていなかったので今回はその記事の続きです。
[JavaScript] あまり使わないbind関数調査
サンプルソースコード
var a = function(){
this.name = "a";
this.type = "b";
this.value = "c";
};
a.prototype.view = function(str1,str2,str3){
this.name = str1;
this.type = str2;
this.value = str3;
console.log(this.name +","+ this.type +","+ this.value);
};
var b = new a;
var c = "ccc";
var d = "ddd";
window.addEventListener("click" , (function(c,d,e){
this.view(c + String(+new Date()) , d + String(+new Date()) , e + String(+new Date()) );
}).bind(b,c,d) , false);
# 画面をクリックした結果
> ccc1555977643826,ddd1555977643826,[object MouseEvent]1555977643826
上記プログラムをブラウザのデバッグコンソールに貼り付けて実行（enter）すると、画面をクリックする度にコンソールログが表示されるようになります。
解説
その際にクリックごとに送り込む値を変更するようにしているのですが、重要なのはbind(...)で受け渡している値と、function(...)で受け取っている引数に注目してみましょう。
今回はわかりやすいようにリクエストとレスポンスの値を合わせておいたので若干分かりやすくしているつもりです。
bind
bindで受け渡しの値を記述する場合に、先頭の値は、インスタンス（内部でthisに当たるobject）でその次の値からが受け渡しの値になります。
function
functionで受け取り引数をセットする場合に、bindの2番めからの値が受け取れる状態になります。
なので、以下のような構造になることに注意してください。
bind(a,b,c) -> function(b,c){this...}
応用編
上記はaddEventListenerに直接書き込みましたが、setTimeoutや、その他イベント時に便利に値受け渡しが可能になります。
基本的に無名関数＆インスタンス処理で構成するのがメモリ状態や周辺関数を汚さない状態になるので、今どきのプログラム構造の書き方としてbindをうまく活用しましょう。
0 件のコメント:
コメントを投稿