call関数に関して。

Question

前提・実現したいこと

こちらのサイトを拝見して、
callの第1引数のthisの参照が置き換わるということは理解しましたが、
よく見る下記のようなコードの場合、

Array.prototype.slice.call(arguments);

call関数の内部でどのようにthisが使われているのかわからないのですが、
考えてみればthisの参照が置き換わるということは、
呼び出し元が置き換わっているということも言えると思うので、
イメージ的には、

arguments.slice();

になっていると考えてよいですか？
つまり、

objA.methodA.call(objB);
objA.methodA.call(objB, arg1);

は、イメージ的に、

objB.methodA();
objB.methodA(arg1);

に変換されている(ただし、実際はobjBはmethodAを持っていないので、あくまでもイメージ)。
という考え方で合っていますか？

Answer 1

まぁだいたいそんな感じですが
Array.prototype.slice.call(arguments)という式全体で、
「配列もどきのargumentsを正式な配列にキャストしている」のが正しい理解なのでちょっと違う気もします。

大体arguments.slice()のsliceってなんだよ、
引数何も入れてないから何もスライスできてないじゃん…という感じでそれ単体では意味がないですからね。

因みにargumentsを配列にしたければ新しい構文としてArray.from(arguments)が実装されているので、より直感的に書けると思います。

MDNにarguments周りの紹介が載っているので参考にしてみてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments

---

さて、本題に戻ってcallに関してですね。
JSでは自由に既存の型のprototypeメソッドを追加して遊べます。
独自のprototypeメソッドを作れば分かりますが、thisが起点です。

下記は私が以前作ったArrayのプロトタイプメソッドにfizzbuzzメソッドを追加して変換するというコードです。
https://qiita.com/miyabisun/items/e520942ba1163f4a2267#%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E6%8B%A1%E5%BC%B5

Object.defineProperty(Array.prototype, 'fizzbuzz', {
  configurable: true,
  writable: true,
  value: function () {
    return this.map(it => [[3, 'Fi'], [5, 'Bu']]
      .map(([t, s]) => it % t ? '' : s + 'zz')
      .join('') || it
    )
  }
})
Array(15).fill(0).map((_, i) => i + 1).fizzbuzz()
// [1, 2, "Fizz", 4, "Buzz", "Fizz", 7, 8, "Fizz", "Buzz", 11, "Fizz", 13, 14, "FizzBuzz"]

valueの中を見れば分かりますが、thisが起点である事が確認出来ます。

sliceの中も開いて見られれば良いのですが、native codeである為途中でブロックされてしまい読むことが出来ません。
おそらくsliceというプロトタイプメソッドはthisを起点としており、
プロパティにlengthを持っている配列もどきなら大抵読み込めるという特性があるのでしょう。

console.log(Array.prototype.slice);
// ƒ slice() { [native code] }

Comments

[tkshp]

ご回答ありがとうございます。
なるほど、確かにarguments.slice()ではスライスの意味がないので、
このケースでは、「配列もどきのargumentsを正式な配列にキャストしている」ためのコードだったということですね。
prototypeメソッドに関しても勉強して参りたいと思います。
JSでは自由に既存の型のprototypeメソッドを追加できるのですね。
勉強になりました。

Answer 2

イメージ的には、arguments.slice();になっていると考えてよいですか？

そのとおりです。なお、Array.prototype以下のメソッドは汎用的に作られていますので、本物の配列でないオブジェクトに適用しても動作しますが、ものによってはメソッドだけ借りてきても動かないことも考えられます。

Comments

[tkshp]

ご回答ありがとうございます。
イメージ的なもので掴んでおきたかったので、勉強になりました。
ありがとうございます。