【独学JavaScript入門㉒】this

thisとは特別な変数で呼び出す方法や場所で値が変わる特殊な変数です。イメージが難しいかと思いますが、実際のソースコードをコンソールに入力してthis値の変化を確認してみます。

//クラスの宣言 人は以下の情報を持つ
class human {
   constructor(name, ht, wt){
      this.name = name;
      this.ht = ht;
      this.wt = wt;

      console.log("class");	  
      console.log(this);
   }

   //メソッドの定義
   light() {
      console.log("method");	  
      console.log(this);
	  
      return this.wt * 0.95;  
   }
}

//インスタンス化
var taro = new human();

taro.name = "taro";
taro.ht = 170;
taro.wt = 60;

console.log("check");	  
console.log(this);

//メソッドの実行結果を表示
console.log(taro.light());

//右が切れたら左にスワイプしてください

thisの値の確認部分だけ抜粋します。

クラス内ではthisはまだ定義されていません(undefined)。次にクラスの外ではthisに良く分からない値が入っています(windowオブジェクトと呼びますがここでは触れません)。そして、注目してもらいたいのはメソッド内のthisです。thisの中にはtaroのインスタンスの情報が全て入っています。

このようにthisは値が変化しますので、今何が入っているのか?と思ったら、console.log(this)で確認してみてください。慣れると便利なthisですが、初心者の方は最初はこういうふうに記述するらしいくらいに思ってもらえれば良いと思います。

JavaScript入門一覧に戻る