見出し画像

JavaScriptのbind()メソッドの基本を整理

JavaScriptには、thisの参照を操作できるメソッドとして
call()、apply()、bind()の3種類あります。

しかし、bind()については他のcall()、apply()に比べて使い方がわかりにくい印象です。

あくまで基本的な挙動のみですが、
参考までに、自身の環境で確認したコードをメモとして残しておきます。

    /* まず準備 */
   // グローバル変数(グローバルオブジェクトのプロパティ)を定義
   var name = "名無しの権兵衛";

   // オブジェクト定義
   let human01 = {
     name: "佐藤",
   };
   
   let human02 = {
     name: "鈴木",
   };

   // 関数定義
   function getName (key) {
     console.log(`${key}${this.name}`);
   }
   /* 準備ここまで */

   /* 
     定義した関数を呼出す。
     ふつうに呼び出すと当然 this は グローバルオブジェクトを参照する。
   */
   getName("名前"); // 名前:名無しの権兵衛
   
   /*
     Function.prototype.bind() を使って、
     getName() 関数の this は human01 オブジェクトを参照したい。
     その場合は、bind() の第一引数に紐付けたいオブジェクトを指定する。
   */
   let getNameFunc = getName.bind(human01, "名前");
   
   /*
     bind() の戻り値で返される関数を呼び出すと、
     this は human01 オブジェクトを参照できる。
   */
   getNameFunc(); // 名前:佐藤
   
   /*
     のちに、call() や apply() を使えば、別のオブジェクトも参照できる。
   */
   getName.call(human02, "名前"); // 名前:鈴木

参考になれば幸いです。



この記事が気に入ったらサポートをしてみませんか?