bindを使った値の受け渡しは引数の順番に要注意!

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

javascriptのbind機能はインスタンスを利用する時にキチンと理解しておかなければいけません。
 

単なるthisの受け渡しだけであれば、そんなに難しくはないのですが、bindを通して値を受け渡したい時に、その引数の順番に注意しなければいけないという事がわかったので、その理解するプロセスを紹介しておきます。
 

ちなみに、以前にもbindの記事を書いているのですが、引数についてほとんど触れていなかったので今回はその記事の続きです。
 

http://wordpress.ideacompo.com/?p=4919

サンプルソースコード

 

上記プログラムをブラウザのデバッグコンソールに貼り付けて実行(enter)すると、画面をクリックする度にコンソールログが表示されるようになります。
 

解説

その際にクリックごとに送り込む値を変更するようにしているのですが、重要なのはbind(…)で受け渡している値と、function(…)で受け取っている引数に注目してみましょう。
 

今回はわかりやすいようにリクエストとレスポンスの値を合わせておいたので若干分かりやすくしているつもりです。
 

bind

bindで受け渡しの値を記述する場合に、先頭の値は、インスタンス(内部でthisに当たるobject)でその次の値からが受け渡しの値になります。

function

一方、functionで受け取り引数をセットする場合に、bindの2番めからの値が受け取れる状態になります。
 

なので、以下のような構造になることに注意してください。

bind(a,b,c) -> function(b,c){this…}

 

応用編

上記はaddEventListenerに直接書き込みましたが、setTimeoutや、その他イベント時に便利に値受け渡しが可能になります。
 

基本的に無名関数&インスタンス処理で構成するのがメモリ状態や周辺関数を汚さない状態になるので、今どきのプログラム構造の書き方としてbindをうまく活用しましょう。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です