JavaScript bind thisの内容を指定する

JavaScriptのbindメソッドで、thisの内容を指定するサンプルです。

目次

サンプル bindとは
  1.bindを使用しない場合
  2.bindを使用してthisの値を指定
  3.bindの引数が2つのとき
  4.thisにnullをセットした場合はWindowオブジェクト
  5.引数を固定化する

bindとは

関数名.bind(thisとして使われる値[, 引数1[, 引数2[, ...]]])
  • thisの内容を意図して指定したい場合に使用します。引数も指定できます。
    →同じプログラムでも設定により変化するメージです。
  • 1つめの引数はthisとして使われる値です。
  • 2つめ以降の引数は、関数に渡される通常の引数です。
  • 戻り値は、新しい関数を返します。←callメソッドと違う部分です。
  • Functionオブジェクトのメソッドです。
  • 以下は、MDNのFunction.prototype.bind()のリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

1.bindを使用しない場合

<script>
  function test1() {
    console.log(this); //windowオブジェクト
  }

  test1();
</script>

6行目で関数を実行すると、3行目のコンソールログでthisの内容が出力されます。
thisの内容は以下のようにwindowオブジェクトです。

 

2.bindを使用してthisの値を指定

<script>
  function test1() {
    console.log(this);
  }

  const test2 = test1.bind(1000);
  test2(); // Number {1000}
</script>

6行目は、bindメソッドの引数に数値の1000を指定し新たな関数を生成しています。←callメソッドは新たな関数を生成しません。callメソッドとの違いです。
7行目は、test2関数の実行でコンソールログにthisの内容が出力されます。

 

3.bindの引数が2つのとき

<script>
  function test1(a) {
    console.log(this);
    console.log(a);
  }

  const test2 = test1.bind(1000,2000);
  test2(); // Number {1000} 2000
</script>

7行目は、bindメソッドで引数に数値の1000と2000を指定しています。
最初の値がthisになり、次の値が1つめの引数になります。
8行目は、コンソールログにthisの内容(Numberの1000)と引数の内容(2000)が出力されます。

 

4.thisにnullをセットした場合はWindowオブジェクト

<script>
  function test1(a) {
    console.log(this); //windowオブジェクト
    console.log(a); //2000
  }

  const test2 = test1.bind(null,2000);
  test2();  
</script>

 

5.引数を固定化する

<script>
  function test1(name1, name2) {
    console.log(name1 + "と" + name2 + "です");
  }

  const test2 = test1.bind(null, "suzuki"); //bindする
 
  test2("tanaka");  //suzukiとtanakaです

  test2("sato");  //suzukiとsatoです
</script>

6行目は、2行目の1つめの引数にsuzukiをセットしています。
8,10行目とメソッドを実行していますが、1つ目の引数は常に6行目にセットしたsuzukiです。

関連の記事

JavaScript argumentsオブジェクトとcalleeのサンプル
JavaScript call thisの内容を指定する

△上に戻る