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のサンプル