【JavaScript】bind, call, applyメソッド

JavaScript

2019.06.132020.03.25

ここではJavaScriptのメソッドのbind、call、applyについて扱います。

これらは関数を呼び出すことができるメソッドといったところでしょう。

これらbind、call、applyの使い方をそれぞれ具体的なコードで見ていくことにしましょう。

call／applyメソッド
bindメソッド
まとめ

call／applyメソッド

では、callメソッドとapplyメソッドから見て行きます。

次のような2つの辞書型のオブジェクトのコードを用意します。

var edward = {
    name: 'エドワード・エルリック',
    age: 16,
    job: '国家錬金術師',
    presentation: function(feeling, dayTimeZone) {
        if (feeling === 'normal') {
            console.log('Good ' + dayTimeZone + '! 私は' +  this.name + '。' + this.age + '歳です。アメストリス国の' + this.job + 'です。');
        } else if (feeling === 'angry') {
            console.log('はぁ？ ' +  this.name + 'の名を知らないって？アメストリス国で' + this.age + '歳の天才' + this.job + 'と言ったら私だ。よく覚えとけ。Good ' + dayTimeZone + '! じゃあな！');
        }
    }
};

var winry = {
    name: 'ウインリィ・ロックベル',
    age: 15,
    job: '機械鎧技師'
};

edward.presentation('normal', 'morning');

それぞれ変数名を指定して、中にname、age、jobをキー値にしたデータが格納されています。

違いは、上側のedwardオブジェクトに、presentationをキーとした匿名関数をデータとして定義しているところです。この匿名関数は2つの引数を持ち、第１引数の値を使ってif-else文で条件判定して、結果をconsole.logで表示するという処理になっています。この時、関数内の処理にthisキーワードを使って、キー値を指定していること注意です。

最後の行で、edwardにドット（.）接続でpresentation()を呼び出しています。引数に合わせて次のようにJavaScriptコンソールには表示されます。

ここまでは通常の呼び出しです。

callメソッドとapplyメソッドは、このコードに続けて次のようにして呼び出します。

edward.presentation.call(winry, 'angry', 'night');

edward.presentation.apply(winry, ['normal', 'afternoon']);

edwardのpresentationを呼び出すのに、それぞれさらにcall()、apply()を接続して呼び出しています。第1引数には、もう一つのオブジェクトであるwinryを渡し、続けてfeeling、dayTimeZoneを渡しています。applyの方はここを配列で渡すという違いがありますが、やっていることは同じです。

こうすることで、thisキーワードが新しく渡したオブジェクトのキーを指定してデータを読みに行くことになります。

実行してJavaScriptコンソールに表示してみましょう。

最初のコードと一緒に処理していますが、それぞれの処理をcallメソッドとapplyメソッドで実行しているのがわかります。

bindメソッド

次はbindメソッドを見ていきましょう。

上のコードに続けて次のようにbindのコードを書いてみました。

var edwardAngry = edward.presentation.bind(edward, 'angry');

edwardAngry('morning');
edwardAngry('night');

var winryNormal = edward.presentation.bind(winry, 'normal');
winryNormal('afternoon');

edwardのpresentationをドット接続で呼び出して、さらにbind()を繋げます。第1引数にオブジェクトを指定して、ここでは第2引数にはここでのfeelingの値を渡しています。

どのオブジェクトのどのfeelingの操作かわかるように、ここでは変数としてedwardAngryとしています。上側ではedwardをオブジェクトに渡しています。

edwardAngry()として引数を’morning’、’night’を渡して呼び出しています。

同様にwinryをオブジェクトとしたものをwinryNormalとして、’afternoon’で呼び出しています。

実行してJavaScriptコンソールに表示させると次のようになります。