【JavaScript入門】bindメソッドの使い方をわかりやすく解説！

2024年3月1日

ワカツキヒロアキ

こんにちは、エンジニアのワカツキです！

今回は、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);

実行結果：