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

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

今回は、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は第二引数以降を配列で渡す

少し踏み込んだ内容ではありましたが、知っておくと便利なので覚えておきましょう!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

目黒のベンチャー企業ででフルスタックエンジニアをやっています!今はWEB・スマホアプリ開発をメインに、毎日、仕事+アウトプットを目標に日々過ごしています。