Javascript this で変数の呼び出し と callback の使い方

Question

前提・実現したいこと

map　を使用せずに関数で実現する。。。という問題をといていましたが、thisやオブジェクト自体の扱いがわからずつまずきました。答えのコードを見てもさっぱり理解できないため、質問させていただきます。

問題

var s = [23, 65, 98, 5];

Array.prototype.myMap = function(callback) {
  var newArray = [];
  // Only change code below this line

  // Only change code above this line
  return newArray;
};

var new_s = s.myMap(function(item) {
  return item * 2;
});

該当のソースコード

var s = [23, 65, 98, 5];

Array.prototype.myMap = function(callback) {
  var newArray = [];

  // Add your code below this line
  for (let i = 0; i < this.length; i++) {
    newArray.push(callback(this[i]));
  }
  // Add your code above this line

  return newArray;
};

var new_s = s.myMap(function(item) {
  return item * 2;
});

疑問点

for (let i = 0; i < this.length; i++) {

にあるthisで、var s = [23, 65, 98, 5];の配列を指しているのはわかるのですが、なぜ

Array.prototype.myMap = function(callback) {

の中でthisで変数sを読み込むことができるのでしょうか？
callback(this[i])ですが、newArray.push(callback(this[i]));でなぜcallbackを指定して

var new_s = s.myMap(function(item) {
  return item * 2;
});

の処理を実行することができるのでしょうか？

Answer 1

なぜ
Array.prototype.myMap = function(callback) {
の中でthisで変数sを読み込むことができるのでしょうか？

javascriptのthisは、関数がどのように呼び出されるかによって自動的に設定されるからです。
hoge.fuga(～)の形式で呼び出された場合、fuga関数内のthisにはhogeが設定されます。
問題のs.myMap(～)であればfuga関数内のthisにはsが設定されるためthisで変数sを読み込むことができます。

this - JavaScript | MDN

callback(this[i])ですが、newArray.push(callback(this[i]));でなぜcallbackを指定して

var new_s = s.myMap(function(item) {
return item * 2;
});

の処理を実行することができるのでしょうか？

単純に「変数に、関数が代入されている」と考えてください。
callback変数には引数として渡されたfunction(item) { return item * 2; }という関数が代入されているので、たとえばcallback(5)を実行すると戻り値は10になります。

Comments

[mtttttttttttt]

改めてよく読み返しましたら、
var new_s = s.myMap(function(item) {
return item * 2;
});
の引数
function(item) {
return item * 2;
})
は関数だったたのですね。なので、callbackを呼ぶと引数の関数
function(item) {
return item * 2;
})
が呼ばれることになる　　というこで合っておりますか？？

[mtttttttttttt]

参考　https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

[ku__ra__ge]

はい、そういうことです。

[mtttttttttttt]

ありがとうございます。

Answer 2

Array.prototype.myMap = function(callback) {

がArrayプロトタイプ、
すなわち、配列そのものにメソッドを追加する構文だからです。
なので、var s = [23, 65, 98, 5];のs変数は、配列なので、
その配列変数のmyMapメソッドを実行した際は、
thisは、s変数自体を指すことになります。

ですが、ぶっちゃけ、今のご時世に、既存のプロトタイプに対して、
プロトタイプ汚染をする構文は、あまりよろしくないような気がします。
（個人的に）
よほど、既存の物に追加変更を加えねばならないって時なら、考えられますが。
ましてや、クラス構文でも同じことはできるので、
（よりコード保全をした状態で）
あまりよろしくない問題のような気がします。
っと、あくまで個人的見解なので、あしからず。

Comments

[mtttttttttttt]

プロトタイプはObjectの元を指す（ここでは配列オブジェクト）ということで合っていますか？

myMapメソッドは配列オブジェクトの中身に定義されているものであり、
sオブジェクトから呼び出したので、thisを使い「呼び出し元のオブジェクト」ｓの値を参照しsの中身を取得する。。。
と考えましたがこの解釈でよろしいでしょうか？

参考　https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Object_prototypes
　　　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this

[miyabi_pudding]

はい、その解釈で大丈夫ですよ

[mtttttttttttt]

ありがとうございます。プロトタイプの説明もしていただいて感謝しております。