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

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

確認環境
・Windows10
・Google Chrome

目次

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行目のコメントの値が表示されます。

関連の記事

JavaScript 関数のサンプル
JavaScript 再帰関数のサンプル
JavaScript 関数のデフォルト引数のサンプル
JavaScript 無名関数(アロー関数式)と即時関数のサンプル
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)
JavaScript argumentsオブジェクトのサンプル

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る