JavaScriptのcapplyメソッドで、thisの内容を指定するサンプルです。
目次
サンプル | applyとは |
1.applyを使用しない場合 | |
2.applyを使用してthisの値を指定 | |
3.applyの引数が2つのとき | |
4.thisにnullをセットした場合はWindowオブジェクト |
applyとは
関数名.apply(thisとして使われる値, [配列]) |
- thisの内容を意図して指定したい場合に使用します。
- 1つめの引数はthisとして使われる値です。
- 2つめ以降の引数は、関数に渡される配列です。←bind,callメソッドと違う部分です。
- 戻り値は、新しい関数を返しません。
- Functionオブジェクトのメソッドです。
- 以下は、MDNのFunction.prototype.apply()のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
1.applyを使用しない場合
<script>
function test1() {
console.log(this); //windowオブジェクト
}
test1();
</script>
6行目で関数を実行すると、3行目のコンソールログでthisの内容が出力されます。
thisの内容は以下のようにwindowオブジェクトです。
2.applyを使用してthisの値を指定
<script>
function test1() {
console.log(this); // Number {1000}
}
test1.apply(1000);
</script>
6行目は、applyメソッドの引数に数値の1000を指定して実行しています。
コンソールログにthisの内容のNumberの1000が出力されます。
3.applyの引数が2つのとき
<script>
function test1(a, b, c) {
console.log(this); // Number {1000}
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
}
test1.apply(1000, [1, 2, 3]);
</script>
9行目は、applyメソッドで引数に数値の1000と配列を指定しています。配列の指定がbind,callメソッドと違う部分です。
最初の値がthisになり、次の配列の1つめの値が1つめの引数になります。
4.thisにnullをセットした場合はWindowオブジェクト
<script>
function test1(a) {
console.log(this); //windowオブジェクト
console.log(a); //1
}
test1.apply(null, [1, 2, 3]);
</script>
関連の記事
JavaScript bind thisの内容を指定する
JavaScript 関数式と無名関数と即時関数
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)
JavaScript argumentsオブジェクトとcalleeのサンプル