JavaScriptのthisについて

投稿日：2019年6月4日

今回はJavaScriptのthisについて。

JavaScriptのthisの場合、呼び出し方によってthisの参照先が変わります。

４種類あるとされていますが、使われ方で分類すると私の場合、下記のようになるケースが多かったです。

Contents

呼び出す場合に、呼び出しもとがオブジェクトでない場合、グローバルオブジェクト、つまりはwindowオブジェクトをさします。関数パターンなどと呼ばれているものかと思います。

オブジェクトで定義されている場合、オブジェクト自身をさします。メソッドパターンやコンストラクタパターンです。オブジェクトと考えるとわかりやすいのではないかと(私は)思います。

下記のようなケースです。

$(セレクタ).click(function(){
  $(this)
})

$(セレクタ).click(function(){

$(this)

})

オブジェクトパターンの一種ですが、この場合、thisの参照先は自分自身をさします。

参照先を変えたいときなどです。

注意点として、アロー演算子を使うとthisの参照先が変わります。

$(セレクタ).click(function(){
   //自分自身
   $(this)
})

$(セレクタ).click(()=>{
   this.〜
   //外のオブジェクト
   //もし自分自身を参照したいときは$(event.currentTarget)と書きます。
})

$(セレクタ).click(function(){

//自分自身

$(this)

})

$(セレクタ).click(()=>{

this.〜

//外のオブジェクト

//もし自分自身を参照したいときは$(event.currentTarget)と書きます。

})

概念的には近いと思いますが、ES6で書いていて親元を呼びたいとき、superとした時もアロー演算子で書いておかないと親を継承できないケースがありましたので注意。

ソースですが、参考リンクの方がわかりやすかったのでリスペクトも兼ねてリンクを貼ります。

参考リンク

thisって何？使い方を覚えて、JavaScriptをもっと楽しく使おう！

色々とわかりやすい関数があるのですが、説明読むより、これも色々とコードを書いて格闘しないとわからないですね・・・