JavaScriptのcallを理解する
call method とは
第1引数として関数内でthisとして呼びたいオブジェクトを指定でき、それ以降の引数は対象となる関数の引数として実行されます。
fun.call(thisArg[, arg1[, arg2[, ...]]])https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
'use strict'; var echo = function echo(a, b) { console.log(a); console.log(b); }; echo('hoge', 'fuga'); // -> hoge // -> fuga echo.call(null, 'hoge', 'fuga'); // -> hoge // -> fuga |
echo function関数を作成して、直接関数を実行する方法と、callメソッドを使用して実行する方法を記述してみました。
ちなみに、引数を記述しなくても、関数は実行できます。
|
1 2 3 4 5 6 7 |
echo(); // -> undefined // -> undefined echo.call(null); // -> undefined // -> undefined |
次に、第一引数の値を呼び出せるか確認します。
|
1 2 3 4 5 6 7 |
"use strict"; var echo = function echo(a, b) { console.log(this); }; echo.call('this?'); |
ちなみに、non-strict mode ( コードにuse strictが記述されていないコード )の場合、第一引数がnullやundefinedの場合はグローバルオブジェクトが設定されます。（ちなみに今回はNodeで実行しています。ブラウザで実行した場合はWindowオブジェクトの中身が出力されるはずです。）
|
1 2 3 4 5 6 |
var echo = function echo(a, b) { console.log(this); }; echo.call(null); // -> { DTRACE_NET_SERVER_CONNECTION: [Function], ... |
Utility.echo.callの第一引数を別のオブジェクトfugaにすることで、オブジェクトfugaがUtility.echoメソッドを実行することができます。instanceofを確認すると、Fugaインスタンスで実行されていることがわかります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
"use strict"; var Utility = function() {}; Utility.prototype.echo = function() { console.log(this.message); console.log(this instanceof Utility); console.log(this instanceof Fuga); }; var Fuga = function() {}; var util = new Utility(); util.message = 'this is utility!'; var f = new Fuga(); f.message = 'fuga!'; util.echo.call(f); // -> fuga! // -> false // -> true |
apply method とは
ちなみに、callメソッドと似たapplyメソッドがありますが、引数の指定の方法が異なります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
fun.apply(thisArg[, argsArray])
applyメソッドでは、引数として配列を指定します。