【JavaScriptの応用】thisの束縛 -bind

thisの値を指定することができるbindメソッド。
bindという名前の通り、thisを束縛するために利用されます。

今回は、thisを自由に制御するために便利なbindメソッドについて解説と、類似のcall/applyメソッドとの違いについて取り上げます。

bindメソッド

bindメソッドとは、thisの値を束縛し、新しい関数を生成するためのメソッドです。
thisの束縛以外にも、「関数の紐付け」などど表現されることがあります。

bindメソッドが呼ばれると、関数を実行するのではなく、与えられたthisの値を持った新しい関数を生成するというのが特徴です。

bindメソッドの使い方

では、具体的にbindメソッドの使い方を見ていきましょう。

bindメソッドの基本構文

以下は、bindメソッドの基本構文です。
第一引数にthisの値を指定し、第二引数以降には紐付けたい関数の引数を指定します。

関数.bind(thisの値, ...関数の引数);

bindメソッドの役割

bindメソッドを実際に使ってみると、以下のように書くことができます。

let user = {
  name: 'Tarou'
};

function greeting(message) {
  return `${message}, ${this.name}!`;
}

// 関数greetingをラップした新しい関数（getUser）を作る
const getUser = greeting.bind(user, 'Hello');
console.log(getUser()); // "Hello, Tarou!"

関数greetingでは、thisがuserオブジェクトに束縛され、さらにbindメソッドによって関数greetingがラップされた新しい関数が生成されています。

上記の例を単純な関数で表現するとこのようになります。

let user = {
  name: 'Tarou'
};

function greeting(message) {
  return `${message}, ${this.name}!`;
}

// bindメソッドを使うと、以下のような元の関数をラップする新しい関数を作る
const getUser = () => {
  return greeting.call(user, 'Hello');
};

console.log(getUser()); // "Hello, Tarou!"

いかがでしょうか。
bindメソッドは、thisやその他の引数を束縛した関数を作る役割があることが分かります。

call/applyメソッドとの違い

bindメソッドは、call/applyメソッドと混同されがちですが、異なる動きを持っています。

次の例を見てください。

// bindメソッドのパターン
let user = {
  name: 'Tarou',
  greeting: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const sayHi = user.greeting.bind(user); // thisを束縛した関数sayHiを作る
sayHi(); // "Hello, Tarou!"
setTimeout(sayHi, 2000); // "Hello, Tarou!" 2秒後に関数sayHiが実行される


// callメソッドのパターン(applyメソッドも同様)
let user = {
  name: 'Tarou',
  greeting: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const sayHi = user.greeting.call(user); // "Hello, Tarou!" ここでthisを指定した関数greetingが実行される
sayHi(); // "Uncaught TypeError: sayHi is not a function"

bind/call/applyメソッドは、thisの値を指定することができるという点は同じです。
しかし、call/applyメソッドがメソッドが呼ばれた瞬時に元の関数が実行されるのに対して、bindメソッドはメソッドが呼ばれたと同時に新しい関数を作り、新しい関数にthisや引数の値を引継ぎます。

call/applyは、新しい関数を作成するわけではないため、関数sayHiを実行しても関数として認識されずエラーとなります。