JavaScript call/applyメソッド(Functionオブジェクト)

JavaScriptのcallメソッドとapplyメソッドのサンプルです。
Functionオブジェクトのメソッドです。

確認環境
・Windows10
・Google Chrome

callメソッド
applyメソッド

callメソッド

関数名.call(thisとして使われる値[, 引数1[, 引数2[, ...]]])

1つめの引数はthisとして使われる値です。
1つめの引数にnullまたはundefinedが指定されたとき
→strictモードの時は、関数内のthisはnullまたはundefinedになります。
→strictモードでない時は、関数内のthisはグローバルオブジェクトになります。
2つめ以降の引数は、関数に渡される通常の引数です。
Functionオブジェクトのメソッドです。
以下は、MDNのFunction.prototype.call()のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call

コード

callメソッドのサンプルです。

<script>

function test1(a,b,c){
	console.log(this); //Number {1}
	console.log(a); //2
	console.log(b); //3
	console.log(c); //undefined
}

test1.call(1,2,3);

</script>

10行目のcallメソッドの実引数は、3つあります。
4行目は、thisです。10行目の実引数の1つめの値が表示されます。
5行目の変数aは、10行目の実引数の2つめの値が表示されます。
6行目の変数bは、10行目の実引数の3つめの値が表示されます。
7行目の変数cは、undefinedです。

1つめの引数がnullの場合

strictモードでないときで、callメソッドの1つめの引数にnullをセットしたサンプルです。

<script>
var a = 100; //グローバル変数

function test1(){
	console.log(this); //window
	console.log(window); //window
	console.log(this.a); //100
	console.log(window.a); //100
}

test1.call(null,2,3);

</script>

5行目のthisは、グローバルオブジェクトを指します。6行目と同じ表示です。
7,8行目は、2行目のグローバル変数の値を表示します。
以下は、MDNのグローバルオブジェクトのリンクです。
https://developer.mozilla.org/ja/docs/Glossary/Global_object

applyメソッド

関数名.apply(thisとして使われる値, [配列/配列風のオブジェクト])

1つめの引数はthisとして使われる値です。
1つめの引数にnullまたはundefinedが指定されたとき
→strictモードの時は、関数内のthisはnullまたはundefinedになります。
→strictモードでない時は、関数内のthisはグローバルオブジェクトになります。
2つめの引数は、関数に渡される引数です。配列または配列風のオブジェクトです。
Functionオブジェクトのメソッドです。
以下は、MDNのFunction.prototype.apply()のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

コード

applyメソッドのサンプルです。

<script>

function test1(a,b,c){

console.log(this); //Number {1}
console.log(a);//赤
console.log(b);//黄
console.log(c);//青

}
const color1 = ["赤","黄","青"];

test1.apply(1,color1);


function test2(a,b){

console.log(this); //Number {2}
console.log(a);//緑
console.log(b);//白

}

test2.apply(2,["緑","白"]);

</script>

11行目は、配列です。
13行目は、2つめの引数に配列を指定しています。関数が実行されると5-8行目のコメントの値が表示されます。
24行目の2つめの引数は、配列リテラルです。関数が実行されると結果は、18-20行目のコメントの値が表示されます。