JavaScript bind() メソッド

概要: このチュートリアルでは、JavaScript の bind() メソッドについて学び、効果的な使用方法を理解します。

JavaScript bind() メソッド入門

bind() メソッドは、呼び出されたときに this が特定の値に設定された新しい 関数 を返します。

以下は、bind() メソッドの構文を示しています

fn.bind(thisArg[, arg1[, arg2[, ...]]])Code language: CSS (css)

この構文では、bind() メソッドは、特定の this 値 (thisArg) と引数 (arg1、arg2、...) を持つ関数 fn のコピーを返します。

call() メソッドや apply() メソッドとは異なり、bind() メソッドは関数をすぐに実行しません。 this が thisArg 引数に設定された新しいバージョンの関数を返すだけです。

関数バインディングのための JavaScript bind() の使用

オブジェクト のメソッドを別の関数に コールバック として渡すと、this が失われます。例えば

let person = {
    name: 'John Doe',
    getName: function() {
        console.log(this.name);
    }
};

setTimeout(person.getName, 1000);Code language: JavaScript (javascript)

出力

undefinedCode language: JavaScript (javascript)

出力から明確にわかるように、person.getName() は 'John Doe' ではなく undefined を返します。

これは、setTimeout() が person オブジェクトとは別に person.getName 関数を受け取ったためです。

ステートメント

setTimeout(person.getName, 1000);Code language: CSS (css)

は次のように書き直すことができます

let f = person.getName;
setTimeout(f, 1000); // lost person contextCode language: JavaScript (javascript)

setTimeout() 関数内の this は、非 strict モードでは グローバルオブジェクト に、strict モードでは undefined に設定されます。

そのため、コールバック person.getName が呼び出されると、name はグローバルオブジェクトに存在しないため、undefined に設定されます。

この問題を解決するには、person.getName メソッドの呼び出しを 無名関数 でラップします。次のようにします

setTimeout(function () {
    person.getName();
}, 1000);Code language: JavaScript (javascript)

これは、外部スコープから person を取得し、メソッド getName() を呼び出すため、機能します。

または、bind() メソッドを使用できます

let f = person.getName.bind(person);
setTimeout(f, 1000);
Code language: JavaScript (javascript)

このコードでは

• まず、person.getName メソッドを person オブジェクトにバインドします。
• 次に、this 値が person オブジェクトに設定されたバインド関数 f を setTimeout() 関数に渡します。

bind() を使用して別のオブジェクトからメソッドを借用する

run() メソッドを持つ runner オブジェクトがあるとします

let runner = {
    name: 'Runner',
    run: function(speed) {
        console.log(this.name + ' runs at ' + speed + ' mph.');
    }
};Code language: JavaScript (javascript)

そして、fly() メソッドを持つ flyer オブジェクト

let flyer = {
    name: 'Flyer',
    fly: function(speed) {
        console.log(this.name + ' flies at ' + speed + ' mph.');
    }
};Code language: JavaScript (javascript)

flyer オブジェクトに実行できるようにするには、bind() メソッドを使用して、this が flyer オブジェクトに設定された run() 関数を作成します

let run = runner.run.bind(flyer, 20);
run();Code language: JavaScript (javascript)

このステートメントでは

• runner.run() メソッドの bind() メソッドを呼び出し、最初の引数として flyer オブジェクトを、2 番目の引数として 20 を渡します。
• run() 関数を呼び出します。

出力

Flyer runs at 20 mph.

オブジェクトのメソッドをコピーせずに借用し、2 つの場所で個別に維持する機能は、JavaScript では非常に強力です。

まとめ

• bind() メソッドは、呼び出されたときに this が指定された値に設定される新しい関数を作成します。
• bind() メソッドを使用すると、オブジェクトはメソッドのコピーを作成せずに別のオブジェクトからメソッドを借用できます。これは、JavaScript では関数借用と呼ばれます。