thisに関する質問。

Question

*下のコードはprogateの「クラスの基本」からの問題で、答えになります。

　コンストラクタ内で、”レオ”の引数を渡されたnameがありますが、this.nameに同じもの（”レオ”）を代入し、infoメソッドにて
this.nameの形で表示しています。
私はこの質問をする前にこのコードからthisを抜いて実行したところ、”レオ”、３は表示されませんでした。
this.nameの形にするとうまくいくことはなんとなくわかったのですが、それはなぜなのでしょうか？

ちなみに、私の推測ですが、thisを使わずそのままnameだけで行うとnameがコンストラクタのローカルスコープであるために、infoメソッドに影響されない。
なので、thisをつけることにより、理屈はあまりわからないがなんとなくスコープが全体に広がってうまくいく。と勝手に思ってます。

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log("こんにちは");
  }
  
  // infoメソッドを追加してください
  info(){
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}

const animal = new Animal("レオ", 3);
animal.greet();

// こんにちわ　名前はレオです　３歳です

Comments

[yambejp]

コピペミス？
ソースがダブってはられていませんか？

[jampan02]

あっすみません

Answer 1

これだけあればどこかにヒントあるのでは。
[this tag:JavaScript] の検索結果： 6715件

Comments

[Lhankor_Mhy]

こっちのほうがたくさんありますよ。（約 2,780,000,000 件）
https://www.google.com/search?q=this+javascript

[m.ts10806]

まず近いところからということで。

[Lhankor_Mhy]

ですね。クソリプ失礼。

Answer 2

関数が、オブジェクトのメソッドとして呼ばれた場合、thisはそのオブジェクトになります。

なので、こういうこともできます。

const animal = new Animal("レオ", 3);
animal.info();
//名前はレオです
//3歳です

const hogefuga =  {
  name: 'hoge',
  age: 'fuga',
  info: animal.info
}
hogefuga.info();
//名前はhogeです
//fuga歳です

参考：
オブジェクトのメソッドとして | this - JavaScript | MDN