bind, call, applyメソッドの使用 | thisの扱い方 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

thisのバインドについて

JavaScriptでは、関数のthisが呼び出し方法によって変わるため、thisを明示的に指定する手法が必要になることがあります。その際に役立つのが、bind、call、applyメソッドです。これらのメソッドは、関数におけるthisの値を手動で指定し、制御することができます。

bindメソッド

bindメソッドは、関数に対してthisの値を明示的に固定するために使用されます。bindを使うことで、新しい関数が返され、その関数内でthisが指定したオブジェクトを指すようにします。

bindメソッドの例

const person = {
    name: "Taro",
    greet() {
        console.log("Hello, " + this.name);
    }
};

const greetFunc = person.greet.bind(person);
greetFunc();  // "Hello, Taro"

この例では、greetFuncがbindを使用してpersonオブジェクトにバインドされており、greetFuncを呼び出すとthisがpersonオブジェクトを指しています。

callメソッド

callメソッドは、関数を即時に呼び出し、その関数内のthisを指定したオブジェクトに設定します。callメソッドの引数は、最初にthisにバインドするオブジェクト、次に関数の引数を渡します。

callメソッドの例

const person1 = { name: "Taro" };
const person2 = { name: "Hanako" };

function greet() {
    console.log("Hello, " + this.name);
}

greet.call(person1);  // "Hello, Taro"
greet.call(person2);  // "Hello, Hanako"

この例では、greet関数をcallメソッドを使ってそれぞれperson1とperson2にバインドしています。呼び出しのたびにthisの値が異なるオブジェクトに設定されます。

applyメソッド

applyメソッドは、callメソッドと非常に似ていますが、引数を配列として渡す点が異なります。複数の引数を一度に渡したい場合に便利です。

applyメソッドの例

const person1 = { name: "Taro" };
const person2 = { name: "Hanako" };

function introduce(age, city) {
    console.log(this.name + " is " + age + " years old and lives in " + city);
}

introduce.apply(person1, [25, "Tokyo"]);  // "Taro is 25 years old and lives in Tokyo"
introduce.apply(person2, [30, "Osaka"]);  // "Hanako is 30 years old and lives in Osaka"

この例では、applyを使って引数を配列形式で渡しています。callメソッドと同様に、thisの値を変更しながら関数を実行しています。

bind, call, applyの違い

これら3つのメソッドはthisをバインドする目的は同じですが、その使い方には違いがあります。以下の表で、bind、call、applyの違いを整理します。

メソッド 使用タイミング 引数の扱い
bind 関数を呼び出す前にthisを固定したいとき 通常の引数として関数に渡す
call 関数を即時に呼び出し、thisを指定したいとき 関数の引数を個別に渡す
apply 関数を即時に呼び出し、引数を配列として渡したいとき 引数を配列形式で渡す

複数の引数を扱う場合の例

applyとcallを使う場合、複数の引数の扱い方に違いがあります。次の例では、同じ関数をcallとapplyで呼び出す方法を比較します。

const person = { name: "Taro" };

function showInfo(age, city) {
    console.log(this.name + " is " + age + " years old and lives in " + city);
}

// callメソッドを使う
showInfo.call(person, 25, "Tokyo");  // "Taro is 25 years old and lives in Tokyo"

// applyメソッドを使う
showInfo.apply(person, [25, "Tokyo"]);  // "Taro is 25 years old and lives in Tokyo"

この例では、callは引数を個別に渡しており、applyでは引数を配列として渡しています。関数の動作自体は同じですが、引数の渡し方に違いがあります。

まとめ

bind、call、applyメソッドは、JavaScriptにおけるthisの値を明示的に制御するための強力なツールです。それぞれのメソッドには適した使用ケースがあり、状況に応じて使い分けることで、より柔軟で効率的なコードが書けるようになります。

スポンサーリンク