JavaScript bind thisの内容を指定する

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

サンプル	bindとは
	１．bindを使用しない場合
	２．bindを使用してthisの値を指定
	３．bindの引数が2つのとき
	４．thisにnullをセットした場合はWindowオブジェクト
	５．引数を固定化する

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

１．bindを使用しない場合

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

  test1();
</script>

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

２．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の内容が出力されます。

３．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になり、次の値が１つめの引数になります。
8行目は、コンソールログにthisの内容(Numberの1000)と引数の内容(2000)が出力されます。

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

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

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

５．引数を固定化する

<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行目とメソッドを実行していますが、１つ目の引数は常に6行目にセットしたsuzukiです。