javascriptのcallの意味をわかりやすく教えてくださいませんか？

Question

こんにちは。今、javascriptの勉強中なのですが、
callの意味がわかりません。

テラテイル内を見ていて、Array.prototype.forEach.callのところで行き詰ったため、気になりました。

元ページhttps://teratail.com/questions/118224

forEachに（）がないのも気になりますが、callだけは何を見てもわかりません。
参考
http://d.hatena.ne.jp/otosohamirin/20100519/1274258237

自分としては、一度関数を作ると、その引数を内包するオブジェクトなのかな？と思っています。

どなたかわかりやすく教えてくださいませんか？

Answer 1

JavaScriptは、関数もオブジェクトとなっていて、.callは関数オブジェクトのメソッドです（MDN）。

.callで関数を呼ぶ場合、thisとなる値を指定する必要があります。これを利用して、配列っぽいけどforEachメソッドのないオブジェクトに対してArray.prototype.forEach.call(obj, ...)とすることで、obj.forEachを呼び出すかのように実行することができます。

Comments

[takane]

丁寧な回答ありがとうございます！
callは、自分のメソッドのないオブジェクトに対してほかのメソッドを呼び出すように働くというイメージがつかめました。

まだまだ自分のレベルが足りず、ちょっとずれたイメージかとは思いますが
もっと頑張って精進します！

Answer 2

まぁ、このcall自体はJS長いこと触っててほんの数える程度しかお世話になることはないので別に覚える必要はないと思います。
難解ですしね、でもまぁ知っていればコードに深みが出るので例を交えながら解説していきます。

callの前にオブジェクト指向の話します。
JSのオブジェクトはプロパティやメソッドを所持していて、オブジェクトのメソッドを実行した時、thisを参照しながら挙動を変えるんですね。

class cat {
  constructor (name) {
    this.name = name;
  }
  meow () {
    return `${(this || {}).name}: meow`;
  }
}
var tama = new cat('tama');
console.log(tama); // cat {name: "tama"}
console.log(tama.name); // "tama"
console.log(tama.meow()); // "tama: meow"

この時、meowメソッドの実体は単なる関数です。
JSの関数は普通に取り出して変数や引数に設定してしまうことが出来る言語です。

このmeow関数は関数として切り出したとき、thisに依存している不完全な関数であることがわかります。
普通の関数は引数だけで完結するべきですからね。

なので関数部分だけ取り出して他の値に代入したりすると、切り離されてtamaが捨て猫になってしまいました

var meow = tama.meow;
console.log(meow()); // "undefined: meow"

この問題を解消する為に存在するのがcallです。
callは第一引数にthisを設定出来るので、tamaを捨て猫から救う事が可能です。

var meow = tama.meow;
console.log(meow()); // "undefined: meow"
console.log(meow.call(tama)); // "tama: meow"

// 実はthis.nameが存在すればcatインスタンスではなく素のオブジェクトでも動作する
console.log(meow.call({name: 'kuro'})); // "kuro: meow"

---

ここからArray.prototype.forEach.callの説明に近づいていきます。
先程作ったcatクラスのmeowメソッドの実体はcat.prototype.meowになります。
これをcallで直接呼び出してみます。

console.log(cat.prototype.meow);
// ƒ meow () {
//     return `${(this || {}).name}: meow`;
//   }

console.log(cat.prototype.meow.call({name: 'kuro'}));
// "kuro: meow"

呼び出せましたね、thisはcatインスタンスではなく、素のオブジェクトです。
こんな風にクラスにひっついてるメソッドの内部実装を知っていれば、
それっぽいものをねじ込んで直接叩くことが出来ます。

// Array.prototype.forEachは直接は何やってるか分からない
console.log(Array.prototype.forEach);
// ƒ forEach() { [native code] }

// でも多分実装はこんな感じになってる
Array.prototype.forEach = function (callback) {
  var arr = this;
  for (var i = 0; i < arr.length; i++) {
    callback(arr[i], i, arr);
  }
}

// 普通はこんな風に動かすけど
var arr = [];
[1, 2, 3].forEach(function (it) {
  arr.push(it + 2);
});
console.log(arr); // [3, 4, 5]

// こう書いても動く
var arr2 = [];
Array.prototype.forEach.call({"0": 1, "1": 2, "2": 3, length: 3}, function (it) {
  arr2.push(it * 2);
});
console.log(arr2); // [2, 4, 6]

つまり、配列のforEachメソッドはthis.lengthと、this[i]しか見てないので、
Arrayのインスタンス以外でも、lengthプロパティと数値のプロパティさえ持っていれば動作させることが可能です。
上記のコードの様にお手製のlengthプロパティと数値のプロパティを用意したオブジェクトでも動作しましたね？

この特性を持ったものを配列ぽいものと呼びます。
その気になれば色んなイディオムで正式な配列に変換できます。

// 先程の配列っぽいオブジェクトを配列にしたい
console.log(Array.from({"0": 1, "1": 2, "2": 3, length: 3}));
// (3) [1, 2, 3]

yambeさんのコードを見ていくと、
Document.querySelectorAllを使って対象のDOMを抽出しています。
戻り値はNodeListという配列Arrayに似てるが違うオブジェクトです。
NodeListの実装をMDNのサイトで読めばわかりますが、NodeListはforEachというメソッドをIE以外のブラウザでは所持していますが、IEだけ所持していません。

でもforEachで引っ張ってきたDOMの各々でループさせて関数走らせたい！

幸いNodeListはlengthと数値のプロパティを常に所持しているので、
だったらArray.prototype.forEach.call(NodeList, 関数)として動かせばいいじゃんと言っています。

Comments

[takane]

丁寧な回答ありがとうございます！
callは、自分のメソッドのないオブジェクトに対してほかのメソッドを呼び出すように働くというイメージがつかめました。

まだまだ自分のレベルが足りず、ちょっとずれたイメージかとは思いますが
もっと頑張って精進します！