JSのclass内で定義した関数のスコープ問題

Question

class zzz{
  constructor(h_text){
    this.h_text=h_text;
  }
  main(){
    console.log('start'); // 「start」と表示される
    this.func();  // 「Hello」と表示される
    $('.btn').on('click',function(){
       console.log('click');  // クリックイベント後、「click」と表示される
       this.func();  // クリックイベント後、何も表示されない。ここで「Hello」と表示したい。
   })
  }
  func(){
    concsole.log(this.h_text);
  }
}

// インスタンス化
var cl_zzz= new zzz('Hello');
cl_zzz.main();

クラスで定義した関数をイベント（今回はクリックイベント）内部で使用したいのですが、関数を呼び出せません。イベント外部では呼び出せるので関数に問題はないと思います。
助言をお願いします。

Answer 1

classからjQeuryを利用する必要ありますか？
onメソッドのコールバックがthisを引き継がない場合は、bindしてやればいいですが

  main(){
    console.log('start');
    $('.btn').on('click',function(){
       console.log('click'); 
       this.func();  
   }.bind(this))
  }
  func(){
    console.log(this.h_text);
  }

こうすると$('.btn').on('click'で本来よびだすべき$(this)的なものが使えなくなります
ちょっと考え方を変えたほうが良いと思います

Comments

[hima-mura.]

助言ありがとうございます。確かにbindでthisが上書きされるは使いにくいですね。
クラス内で処理する内容を少なくします。