JavaScriptのcallを理解する

dorako321

8年前

call method とは

第1引数として関数内でthisとして呼びたいオブジェクトを指定でき、それ以降の引数は対象となる関数の引数として実行されます。

fun.call(thisArg[, arg1[, arg2[, ...]]])

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call

'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

'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メソッドを使用して実行する方法を記述してみました。

ちなみに、引数を記述しなくても、関数は実行できます。

echo();
// -> undefined
// -> undefined

echo.call(null);
// -> undefined
// -> undefined

echo();

// -> undefined

echo.call(null);

// -> undefined

次に、第一引数の値を呼び出せるか確認します。

"use strict";

var echo = function echo(a, b) {
    console.log(this);
};

echo.call('this?');

"use strict";

var echo = function echo(a, b) {

console.log(this);

};

echo.call('this?');

ちなみに、non-strict mode ( コードにuse strictが記述されていないコード )の場合、第一引数がnullやundefinedの場合はグローバルオブジェクトが設定されます。（ちなみに今回はNodeで実行しています。ブラウザで実行した場合はWindowオブジェクトの中身が出力されるはずです。）

var echo = function echo(a, b) {
    console.log(this);
};

echo.call(null);
// -> { DTRACE_NET_SERVER_CONNECTION: [Function], ...

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インスタンスで実行されていることがわかります。

"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

"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メソッドでは、引数として配列を指定します。