プロフィール
JavaScript PR

初心者でもわかるJavaScriptのbind(), call(), apply()の使い方と違いを徹底解説

 
記事内に商品プロモーションを含む場合があります

JavaScriptのbind(), call(), apply()は、関数のthisを制御したり、関数の動作を柔軟に変更するための重要なメソッドです。しかし、それぞれの使い方や違いが分かりにくいと感じる人も多いのではないでしょうか。本記事では、初心者でも理解できるよう、これらのメソッドを基礎から丁寧に解説します。

Contents
  1. bind(), call(), apply()とは？
  2. bind(), call(), apply()の違い
  3. bind(), call(), apply()の基本的な使い方
  4. bind()メソッドの応用
  5. call(), apply(), bind()を使う場面を選ぶポイント
  6. bind(), call(), apply()の「これじゃなきゃできない」使い所
  7. まとめ

bind(), call(), apply()とは？

bind()とは

bind()は、関数におけるthisを明示的に設定し、新しい関数を作成するメソッドです。関数をすぐには実行せず、後で呼び出せる形にするための仕組みと考えると分かりやすいです。

call()とは

call()は、関数を即座に実行しながら、thisを指定するためのメソッドです。引数は個別に渡します。

apply()とは

apply()もcall()と同じく関数を即座に実行しますが、引数を配列で渡す点が異なります。

bind(), call(), apply()の違い

bind()とcall()とapply()の共通点と違い
  • 共通点
    • thisのコンテキストを変更できる。
  • 違い
    • bind(): 関数を新しく生成。即座に実行しない。
    • call(): 関数を即座に実行。引数を個別に渡す。
    • apply(): 関数を即座に実行。引数を配列として渡す。
call()とapply()の違い
メソッド引数の渡し方実行タイミング
call()個別に渡す即座に実行
apply()配列で渡す即座に実行

bind(), call(), apply()の基本的な使い方

bind()メソッドの基本的な使い方

以下のコードはbind()の使い方を示しています。

const person = {
  name: "Alice",
};

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const boundGreet = greet.bind(person, "Hello");
boundGreet(); // Hello, Alice

この例では、greet関数にpersonオブジェクトをthisとしてバインドし、新しい関数boundGreetを作成しています。

call()メソッドとapply()メソッドの使い方

以下はcall()とapply()の実用例です。

function introduce(language, age) {
  console.log(`I am ${this.name}, I speak ${language}, and I am ${age} years old.`);
}

const user = { name: "Bob" };

// callを使用
introduce.call(user, "English", 25); 
// I am Bob, I speak English, and I am 25 years old.

// applyを使用
introduce.apply(user, ["English", 25]); 
// I am Bob, I speak English, and I am 25 years old.

bind()メソッドの応用

bind()とeventListeners

bind()は、イベントリスナー内でのthisのコンテキストを固定する際に便利です。

function handleClick() {
  console.log(`Clicked by ${this.name}`);
}

const user = { name: "Charlie" };
const button = document.querySelector("button");
button.addEventListener("click", handleClick.bind(user));

この例では、thisがbuttonではなくuserを指すようにしています。

部分的に適用された関数の作成

bind()を使って、引数を部分的に適用した新しい関数を作ることも可能です。

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(4)); // 8

call(), apply(), bind()を使う場面を選ぶポイント

  • 即座に関数を実行したい場合:
    • 引数を個別に渡す → call()。
    • 引数を配列で渡す → apply()。
  • 新しい関数を作成したい場合 → bind()。

bind(), call(), apply()の「これじゃなきゃできない」使い所

bind()のユニークな使い所

bind()は、関数のthisを固定したり、部分的に引数を適用した新しい関数を作成するために使います。

  • イベントリスナーでのthis固定
    イベントリスナー内ではデフォルトでthisがクリックした要素を指します。しかし、bind()を使うと任意のオブジェクトをthisに固定できます。これが重要な理由:
    他の手段（例えばアロー関数）でthisを制御する方法もありますが、bind()はイベントリスナー以外のシナリオでも汎用性が高いです。
function logName() {
  console.log(this.name);
}

const user = { name: "Alice" };
const boundLogName = logName.bind(user);

document.querySelector("button").addEventListener("click", boundLogName);

  • 部分的な関数適用（Partial Application）
    簡易的なカリー化を行う際に便利です。 これが重要な理由:
    事前に一部の引数を固定できるため、コードの再利用性が向上します。
function calculatePrice(tax, price) {
  return price * (1 + tax);
}

const calculateWithTax = calculatePrice.bind(null, 0.1);
console.log(calculateWithTax(100)); // 110

call()のユニークな使い所

call()は、関数を即座に実行しつつ、thisや引数を指定する必要がある場合に使用します。

  • メソッドの借用
    他のオブジェクトのメソッドを一時的に利用する場面でよく使われます。
const person = { name: "Charlie" };
function greet() {
  console.log(`Hello, ${this.name}`);
}

greet.call(person); // Hello, Charlie
  • 配列操作での活用
    配列メソッドをargumentsや配列っぽいオブジェクトで使う場合。これが重要な理由:
    配列以外のオブジェクトを無理なく操作する方法として、call()は強力です。
function sumAll() {
  const numbers = Array.prototype.slice.call(arguments);
  return numbers.reduce((sum, num) => sum + num, 0);
}

console.log(sumAll(1, 2, 3, 4)); // 10

apply()のユニークな使い所

apply()は、引数を配列として渡す必要がある場面で使用します。

  • Math関数と組み合わせる
    配列の中で最大値や最小値を求めたいとき。これが重要な理由:
    配列要素を個別に展開する手間を省けるため、簡潔なコードが書けます。
const numbers = [1, 2, 3, 4, 5];
const max = Math.max.apply(null, numbers);
const min = Math.min.apply(null, numbers);

console.log(max); // 5
console.log(min); // 1

bind(), call(), apply()を使うべきシチュエーション

bind()を使うべきとき

  • thisの参照を固定したいとき（例: イベントリスナー、タイマー関数）。
  • 一部の引数を事前に設定し、再利用可能な関数を作りたいとき。

call()を使うべきとき

  • 関数を即座に実行しつつ、異なるthisを割り当てたいとき。
  • 配列操作やメソッドの借用が必要なとき。

apply()を使うべきとき

  • 関数に渡す引数が配列として用意されているとき。
  • Math関数や配列っぽいオブジェクトを効率的に操作したいとき。

bind(), call(), apply()は、他の手段でも代替可能な場合がありますが、次の理由で重要です。

  1. 柔軟性: thisや引数をカスタマイズしてコードを整理できる。
  2. 効率性: 一部の引数を固定するなど、冗長なコードを省略できる。
  3. 簡潔性: 配列操作やオブジェクトのメソッド借用など、特定のタスクを簡単に実現できる。

まとめ

JavaScriptのbind(), call(), apply()は、関数のthisや引数を柔軟に操作するための便利なメソッドです。それぞれの特徴や使い方を理解することで、次のようなメリットがあります。

  • bind()
    新しい関数を作成してthisを固定したり、一部の引数を事前に設定することで、イベントリスナーや関数の再利用性を向上させます。
  • call()
    即座に関数を実行しつつ、thisや引数を個別に指定できるため、メソッドの借用や配列っぽいオブジェクトの操作に役立ちます。
  • apply()
    配列形式の引数を必要とする場合に便利で、Math.maxやMath.minのような関数と組み合わせて効率的な操作を可能にします。

これらのメソッドは、単にコードの動作を変更するだけでなく、より効率的で明確なコードを書く助けになります。「なんとなく難しそう」と感じて敬遠してしまう人もいますが、本記事の例を通じて実際にコードを書きながら使ってみると、その有用性を実感できるはずです。

これから実際の開発で「thisをどう指定しよう？」「部分的に適用したい関数がある」といった場面に遭遇したときに、bind(), call(), apply()を活用してください！

RELATED POST