Zenn
🐇

this を操るABC : apply, bind, call (JavaScript)

2024/12/27に公開
JavaScript
tech

JavaScriptを使っていると、「this」の意味について迷うことは、初学者の大きな課題の一つです。

JavaScriptでは、コンテキストによって「this」が指す対象は変わるため、独自にある関数を実行するときに「この関数を〈この = this〉オブジェクトに結びつけたい」というときがあります。

これを実現する方法の一つが「call」「apply」「bind」です。これらのメソッドの違いと実用方法を詳しく解説します。

「call」の解説

要素:

  • すぐに関数を実行したいときに使う
  • 第一対象に「this」に結びつけるオブジェクトを渡し、その後に実際の引数を渡す

例:

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

const person = { name: 'Alice' };
greet.call(person, 'Hello');
// 出力: "Hello, my name is Alice"

解説:

ここでは、「person」オブジェクトを「this」として、関数「greet」を実行しています。さらに「'Hello'」を実際の引数として渡しています。

「apply」の解説

要素:

  • 「call」との違いは、引数を配列で渡す為のメソッド

例:

greet.apply(person, ['Hi']);
// 出力: "Hi, my name is Alice"

解説:

「apply」の場合も「person」を「this」に結びつけますが、引数を配列の形式で渡します。これは、引数の数が変動しやすい場合に便利です。

「bind」の解説

要素:

  • 新しい関数を返す
  • すぐに実行せず、実行を後回しにしたいときに便利

例:

const boundGreet = greet.bind(person);
boundGreet('Hey');
// 出力: "Hey, my name is Alice"

解説:

「bind」は、新しい関数を返します。この関数は「this」が一定のオブジェクトに結びつけられているため、実行すると「person」が「this」になります。

違いの比較

メソッド ファンクション 実行時点
call 実行 すぐ
apply 実行 すぐ
bind 新しい関数を返す 後に実行

実用例

クラスの監視

イベントリスナーで使用する場合:

class Button {
    constructor(label) {
        this.label = label;
    }

    clickHandler() {
        console.log(`Button ${this.label} clicked`);
    }
}

const button = new Button('Submit');
const element = document.querySelector('#myButton');
element.addEventListener('click', button.clickHandler.bind(button));

多式の引数の渡し

function sum(a, b, c) {
    return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // 6

結論

「call」「apply」「bind」は、JavaScriptで「this」をコントロールしたい場合で強力な手段です。

これらの違いを理解することで、さまざまなコードをよりリーダブルに、しかも深く理解しながら書くことができるようになります。

Discussion