こんにちは、エンジニアのワカツキです！
今回は、JavaScriptのbindメソッドの基本と、具体的な使い方をサンプルコードを交えて解説していきます。
この記事で解説する内容は、
・bindメソッドとは
・bindメソッドの使い方（サンプル付き）
などのbindに関する内容から、
・call、applyとの違い
など、類似メソッドとの違いについても解説していきます！
bindメソッドとは
bindメソッドは、定義された関数に対して、thisを代入できるメソッドです。また、その名の通り関数などをbind（紐づけ）することができます。
JavaScriptでは、関数内のthisは関数自体を指します。また、そのthisに値を設定することで、関数のプロパティ（関数に関する情報）を設定できます。
そして、今回解説する「bindメソッド」では、そのthisを書き換えることによって、参照するプロパティを変更できます。
説明だとわかりづらいと思いますので、実際のサンプルコードを見ながら理解していきましょう！
bindメソッドの使い方
thisを指定する方法
まずは、「自己紹介文する”ヒト”」というクラス（型）を定義して、そのインスタンス（型からできた実物）として「太郎」というユーザーに自己紹介してもらいましょう。
function Person(name, age) {
// thisでこの関数のプロパティ（ユーザーの情報）を定義
this.name = name;
this.age = age;
// self_introduction（自己紹介）メソッド
this.self_introduction = function() {
console.log('こんにちは、' + this.name + 'です。年齢は、' + this.age + '歳です。');
}
}
var taro = new Person('太郎', 23);
taro.self_introduction();
実行結果：
> "こんにちは、太郎です。年齢は、23歳です。"
自己紹介を行うPersonを生成できました。
ではこの関数を、bindを使って、全く別のクラスのインスタンスと紐づけて実行して見ましょう。
function Person(name, age) {
this.name = name;
this.age = age;
this.self_introduction = function() {
console.log('こんにちは、' + this.name + 'です。年齢は、' + this.age + '歳です。');
}
}
function Dog(name, age) {
this.name = name;
this.age = age;
}
var taro = new Person('太郎', 23); // 太郎という人間
var hachi = new Dog('ハチ', 5); // ハチというイヌ
taro.self_introduction.bind(hachi)();
実行結果：
> "こんにちは、ハチです。年齢は、5歳です。"
これは、本来Dogクラスが持っていない自己紹介のメソッドを、Dogの情報（年齢と名前）を代入することでPersonクラスから呼び出しています。
taro.self_introduction.bind(hachi)();
このようにカッコが重複しているのは、bindが関数を返しているからです。後ほど説明しますが、callメソッドを使うと以下のように書けます。
taro.self_introduction.call(hachi);
引数を指定する方法
bindメソッドでは、第一引数にnullを指定すると、thisはそのままで、さらに第二引数以降が、もとの関数の引数として引き継がれます。
わかりやすい計算のサンプルコードを実行してみましょう。
function calc(a, b, c) {
return a + b + c;
}
// 第一引数が100で固定される
var calc100 = calc.bind(null, 100);
console.log(calc100(30, 50));
実行結果：
> 180
「calc.bind(null, 100)」の処理で第一引数が100に固定されるため、
a = 100
b = 30
c = 50
の値が引数としてcalc100が実行され、合計結果180を出力しています。
少しわかりにくいかもしれませんが、宣言時に引数を固定することができると覚えておくと良いでしょう！
bind・apply・callについて
bind・apply・callの違いについて解説
類似メソッドとして、call/applyというメソッドがあります。
先ほど紹介したように、bindメソッドは新たな関数を生成して返しますが、callメソッドではそのまま実行されます。
また、applyメソッドは第二引数以降の指定を配列で行わなければいけない、という違いがあります。
以下のように、定義した配列を引数に使う場合、appleメソッドが役に立ちます。
function multipleAll(a,b,c,d,e,f,g,h,i,j) {
return a*b*c*d*e*f*g*h*i*j;
}
var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var result = multipleAll.apply(null, nums);
console.log(result);
実行結果：
> 3628800
このように配列を第二引数以降に設定したい場合はapplyを使うとこのようにすっきりと書けます。
まとめ
いかがでしたか？今回はJavaScriptのbindメソッドについて学びました。今回押さえておくべき点は以下の通りです。
・bindメソッドを使って他の関数とのbind（結びつけ）が可能
・第一引数はthis、第二引数以降は関数の引数として引き継がれる
・類似のcallメソッドはそのまま関数を実行する
・applyは第二引数以降を配列で渡す
少し踏み込んだ内容ではありましたが、知っておくと便利なので覚えておきましょう！
