JavaScriptのapply関数の使い方について

Question

JavaScriptのapply関数のサンプルについてなんですが。

var numbers = [5, 6, 2, 3, 7];

var max = Math.max.apply(null, numbers);

上の呼び出し方で、strictモードでない場合、max関数内部のthisをグローバルオブジェクトに固定してmaxメソッドを実行する、ということだと思うのですが、なぜthisをグローバルオブジェクトに固定すると期待通りの結果がでるのでしょうか？

var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// 1 つ目の配列に 2 つ目の配列をマージさせます
// vegetables.push('celery', 'beetroot'); と同じ結果になります
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']

上の呼び出し方でpushメソッド内のthisをvegetablesに固定してpushメソッドを実行する、ということだと思うのですが、なぜthisをvegetablesに固定すると期待通りの結果(配列のマージ)になるのでしょうか？
この疑問を解決するには、maxやpushメソッドの中身を見ないと解決できないと思うのですが、そこまで踏み込まずに、maxやpushはそういうふうに作られているから、こういう呼び出し方をすればこういうことができる、ととりあえず理解しとくのが良いでしょうか？

Comments

[Lhankor_Mhy]

『なぜthisをグローバルオブジェクトに固定すると期待通りの結果がでるのでしょうか？ 』とありますが、ご提示コードですと、this は null です。

[think49]

Lhankor_Mhyさん
「strictモードでない場合、max関数内部のthisをグローバルオブジェクトに固定して」とあるので、グローバルオブジェクトで間違っていないように思います。sloppy modeでは、this値は必ず、Object型になります。

Answer 1

なぜthisをグローバルオブジェクトに固定すると期待通りの結果がでるのでしょうか？

これは間違っています。

var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply("どうでもいいテキスト", numbers);

これでも動作します。Math.maxはthisの値を用いないメソッドです。

なぜthisをvegetablesに固定すると期待通りの結果(配列のマージ)になるのでしょうか？

//↓このコードの場合、
  vegetables.push('celery', 'beetroot');
//^^^^^^^^^^これが this になるからです。

関数がオブジェクトのメソッドとして呼び出されるとき、その this にはメソッドが呼び出されたオブジェクトが設定されます。

this - JavaScript | MDN

maxやpushはそういうふうに作られているから、こういう呼び出し方をすればこういうことができる、ととりあえず理解しとくのが良いでしょうか？

それでいいと思いますが、cls.prototype.method なのか cls.method なのかで概ね区別できるんじゃないでしょうか？

Comments

[maisumakun]

使うか使わないかは外見から判断できないので、このような関数をapplyで使う場合にはMath.max.apply(Math,[1, 2, 3])のようにMathを改めて指定するようにしています。

[Lhankor_Mhy]

なるほど、おっしゃるとおりです。

[moriman]

Lhankor_Mhy様、解答をいただきましてありがとうございます。
Math.maxについて納得できました。Math.maxでapplyを使うのは配列numbersをそのまま引数として渡したい(渡せる)から、ということですかね。

あとpushのほうで、thisについては
vegetables.push('celery', 'beetroot');
の形で実行したときにpush内のthisが呼び出し元であるvegetablesを指す、という情報は認識できているのですが、
Array.prototype.push.apply(vegetables, moreVegs);
の形で実行したときは、
vegetables.push('celery', 'beetroot');
として実行したのと同じことになる、ということですかね。確かにapplyでthisをvegetblesに固定すると、そういうことになりますよね。

maisumakun様、コメントを頂きましてありがとうございます。
すみません、「使うか使わないかは外見から判断できないので」の部分がはっきりつかめません。何を使うか使わないか、なのでしょうか？

[Lhankor_Mhy]

> 何を使うか使わないか、なのでしょうか？

横からですが、this のことです。
Math.max()として呼び出すと、this は Math になっているので、apply関数で呼び出す際にも（thisを内部的に使うか否かに関わらず）そのように合わせていたほうが無難、ということです。

[moriman]

なるほど、そういうことですね。確かにそうですよね。

Answer 2

applyは、obj.func(arg1, arg2, arg3……) を func.apply(obj, [arg1, arg2, arg3……]) のような形式で呼び出せると考えるとわかりやすいと思います。

var max = Math.max.apply(null, [5, 6, 2, 3, 7]); は、var max = Math.max(5, 6, 2, 3, 7);と同じ意味ですし、
Array.prototype.push.apply(vegetables, ['celery', 'beetroot']);は、vegetables.push('celery', 'beetroot')と同じ意味なので、期待通りの結果が得られます。

※applyとは直接関係ないので詳しく説明しませんが、Array.prototype.pushと['parsnip', 'potato'].pushは全く同じ関数を表しています。
(console.log(Array.prototype.push === ['parsnip', 'potato'].push)で確認できます)

Comments

[moriman]

ku__ra__ge様、回答を頂きましてありがとうございます。
「applyでthisを固定する」とは、頂いた回答にあるように、
「Array.prototype.push.apply(vegetables, ['celery', 'beetroot']);は、vegetables.push('celery', 'beetroot')とするのと同じこと」ということなんですね。
確かに言われてみるとそうなりますよね。やっと理解できました。

Answer 3

Function.prptotype.apply

この疑問を解決するには、maxやpushメソッドの中身を見ないと解決できないと思うのですが、そこまで踏み込まずに、maxやpushはそういうふうに作られているから、こういう呼び出し方をすればこういうことができる、ととりあえず理解しとくのが良いでしょうか？

いいえ。
Array.prototype.push は this 値を使用しています。
http://www.ecma-international.org/ecma-262/10.0/#sec-array.prototype.push

• Math.max … this 値を利用しない
• Array.prototype.push … this 値を利用する

applyを使用する上では、この認識で良いですが、新しいメソッドに考えを当てはめるために事前に調べる必要はあると思います。
静的メソッドでは、「this 値を利用しない」ということになりますが、仕様書を読んだり、検証しなければ判断出来ません。

Rest parameters

最近の仕様には、Rest parametersがあるので、動作保証ブラウザが許すなら、それを使って配列を引数に指定します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters

Function.prptotype.apply は後方互換性を意識した実装法です。

Re: moriman さん

Comments

[moriman]

解答と参考資料ありがとうございます。
調べてみます。

Answer 4

直接の回答ではありませんので余談となりますが
いまやスプレッド構文で代替されるのでapplyの処理は徐々にリプレースされてきています

'use strict'
const numbers = [5, 6, 2, 7, 3];
console.log(Math.max(...numbers));
const vegetables = ['parsnip', 'potato'];
const moreVegs = ['celery', 'beetroot'];
vegetables.push(...moreVegs);
console.log(vegetables); 

Comments

[moriman]

yambejp様、回答を頂きましてありがとうございます。
ご指摘いただいた点なんですが、配列に対してpushを使う場合挙げて頂いたスプレッド構文で
vegetables.push(...moreVegs);
のようにできると思うのですが、オブジェクトに対してpushを使うような場合はやはりapplyを使わないといけない、ということですかね？
こういうのを「ジェネリック」と言うんですかね。話がそれているような気がしますが。

[yambejp]

> オブジェクトに対してpushを使う

オブジェクトにpushはつかえないと思いますが・・・

[moriman]

すみません、説明不足でした。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push
の「配列風にオブジェクトを使用する」のサンプルのようなことなんですが、この場合はやはりapplyが要るのかな、と思い質問させていただきました。

[yambejp]

> pushを使うような場合はやはりapplyを使わないといけない

オブジェクトにArray.prototypeのメソッドを利用することは
[].メソッド.call(オブジェクト[,引数])のような使用方法をすれば可能です
applyはあまり使う機会はないと思います