JavaScript call thisの内容を指定する

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

目次

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

callとは

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

1.callを使用しない場合

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

  test1();
</script>

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

 

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

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

  test1.call(1000);

</script>

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

 

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

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

  test1.call(1000,2000); // Number {1000} 2000

</script>

7行目は、callメソッドで引数に数値の1000と2000を指定しています。
最初の値がthisになり、次の値が1つめの引数になります。

 

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

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

  test1.call(null, 2000);

</script>

関連の記事

JavaScript thisの内容を指定する(bindメソッド)
JavaScript 関数式と無名関数と即時関数
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)
JavaScript argumentsオブジェクトとcalleeのサンプル

△上に戻る