読者です 読者をやめる 読者になる 読者になる

nasustimの日記

つまらないことしか書きません

JavaScriptのclassの変数周りで嵌ったので記録

今日の話


このツイートを見てもあまり理解が追いついていない方。

例えば

class hoge{
  constructor(varArg){
    this.var = varArg;
  }
  fuga(){
    var img = new Image();
    img.onload = function(){
      /*エラーになる*/
      var varhoge = this.var;
    };
    img.src = "./img/aaa.jpg";
  }
}

こういうことです。

2015年のECMAScriptの新仕様(ES6?)で新たに加えられたclassの構文を使っていたのですが、JavaScriptはthis接頭辞の意味合いが他の言語と少し違っているらしく、クラスの中の関数の中のイベントハンドラでクラスのthisが参照できなくて行き詰まってました。

するとTwitterにいるJavaScriptに詳しい方から助け船が。




本当に解決してしまいました。

↓↓上のソースコードバグフィックスをしたコード↓↓

class hoge{
  constructor(varArg){
    this.var = varArg;
  }
  fuga(){
    var img = new Image();
    img.onload = () => {
      /*エラーにならない*/
      var varhoge = this.var;
    };
    img.src = "./img/aaa.jpg";
  }
}




やったね!!

一応調べてみました。

developer.mozilla.org

要するに、functionを使った無名関数と、アロー関数を使った無名関数では変数の参照スコープが違ってたらしいです。

いやー、勉強になりました。