skillup

技術ブログ

JavaScript

JavaScriptのthisについて

投稿日:

今回はJavaScriptのthisについて。

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

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

  • グローバル
  • オブジェクト内
  • イベントハンドラ内(jQueryなどでよく使われる)
  • apply,callなどによる強制
  • アロー演算子による変更

グローバル

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

オブジェクト内

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

イベント時

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

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

apply,callによる強制

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

アロー演算子による変更

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

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

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

参考リンク

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

JavaScript の this を理解する多分一番分かりやすい説明

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

-JavaScript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

vueでの配列、オブジェクトの反映に関して

vueでのハマりポイントですが、関門としては コンポーネント間の連携 オブジェクトや配列となった時に反映がされない などがあげられると思います。 コンポーネント間の連携に関してはこちらの記事でも書き、 …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …

アーカイブ