bind()

JavaScript

Reactを学習中なのですが、たびたび出現するbind()メソッドがよくわからなかったため、メモ。

はじめに

結論を言ってしまうと、bind()メソッドを理解するためにはJavaScriptにおけるthisの挙動の理解が必要かもしれません。ひとまず、JavaScriptではthisの扱いがJavaとは大分異なることを念頭に置いておけば大丈夫かと思います。

調査

とりあえず公式サイトを見てみると、

bind() メソッドは、呼び出された際に this キーワードに指定された値が設定される新しい関数を生成します。この値は新しい関数が呼び出されたとき、一連の引数の前に置かれます。

ふーむ、よくわからないですね。ただ、もう少し読み進めると、

最もシンプルな bind() の使い方は、どのように呼び出された場合でも特定の this 値を持つ関数を生成することです。

少しわかってきました。おそらくポイントになるのは、

どのように呼び出された場合でも特定の this 値を持つ関数を生成することです。

この部分でしょうか。JavaScriptの場合、thisが示すオブジェクトが関数呼び出し方法によって若干異なるようです*1。 この辺り、Java脳の私には少しトリッキーに思ってしまいますね。

ひとまず、公式サイトより実際のコード例を拝借します。

this.x = 9;    // 'this' はここではブラウザーのグローバルな 'window' オブジェクト
const module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX();
// 81 を返します

const retrieveX = module.getX;
retrieveX();
// 9 を返します。この関数はグローバルスコープで呼び出されるためです。

// 'this' を module に結びつけた新しい関数を生成
// 初心者のプログラマーはグローバル変数の x と
// モジュールプロパティの x とを混同するかもしれません。
const boundGetX = retrieveX.bind(module);
boundGetX(); 
// 81 を返します

他にも使用例がありますが、今回はここまで。

*1:こちらの記事などが参考になります