【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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説