【JavaScript】中級者向けthisの使い方について優しく解説！

今回は、Javascriptのthisについてわかり易く解説しようと思います！どうも！最近家にいる時間が多く家での趣味を探しているむねりんです！！正直家だとお酒を飲んだり料理してみたり映画見たり生配信したりが日課になってたりします！ちなみに生配信はもうかれこれ6年ぐらいひっそりとやってます。

では今回thisの使い方について説明しますがそもそも基本的なことを知らないと理解できないと思うのでこれを最後まで読んで意味理解できなかった人は、基礎的な部分から学びましょう！

それでは目次にそって順番に解説しています！

thisとは？

thisとは、特別な変数のこと！

ちなみに何が特別かというと呼び出した場所、使い方によって用途が変わってくる点です。正直なかなか理解が難しいのですが大きく分けて関数とメソッドで別れます。関数とメソッドの説明は知っていると思って説明は省かせてもらいますがわからない方がいたら基礎の方から学ぼう！ただ正直この説明だけではまだいまいちわからないと思うので実際に使って例えも入れながらわかり易く解説しようと思います。

４つのthisの使い方

では、実際に例を交えてわかり易く解説していきます。

関数の呼び出し

関数の中でthisを使用した場合のthisはグローバルオブジェクトを参照します。

ちなみにグローバルオブジェクトとは、javascriptのコードがオブジェクトの中に格納されている必要があり、その格納するオブジェクトの最上位に位置する単一のオブジェクトのことです。簡単に言えばグローバル関数やグローバル変数を管理するためのオブジェクトですね。では実際に記述を見て行きましょう。

function sample(){
    console.log(this)
}
sample();

これをブラウザー上で読み込むとwindowオブジェクト(グローバルオブジェクト)が表示されると思います。要するに単に関数内でthisを使用するということはグローバルオブジェクトを参照するということです。

では、次に進みます。

メソッドの呼び出し

続いてはメソッドの呼び出しに移ります。それでは記述を見てみましょう！

var sample = {
    test:function(){ //testを定義
    console.log(this);
    }
}
sample.test();  //オブジェクトに指定したsample=thisを出力

この記述を詳しく説明するとオブジェクトに指定したsampleに定義したメソッドである関数testがその中にあるthisをコンソールに呼び出しているという記述になっています。ここでメソッド内にあるthisは、sampleなのでsampleを参照する形となっています。

それでは次に進みます。

call/applyメソッドの呼び出し

次にcallメソッド及びapplyメソッドの説明ですがこの二つを呼び出した場合簡単にいうとthisを強制的に設定できます。それでは記述をみていきましょう！

var test = {
    name: 'munerin'
}
function sample() {
    console.log(this);
}
sample.call(test);
sample.apply(test);

こおいう使い方だとcallメソッドとapplyメソッドの参照先はtestになります。使い方にもよりますがこの記述は同じ結果が得られます。またcallとapplyって何がちゃうの？って話ですが第二引数の取り方が異なります。callメソッドは値を個々に指定するが、applyメソッドは第二引数以降の配列をそのまま関数に渡します。

それでは次の解説に移ります！

コンストラクタの呼び出し

コンストラクタとは、インスタンスを作成したタイミングで実行されるメソッドのこと！詳しく説明するとクラス、インスタンス、オブジェクトの３つで構成されたオブジェクト指向プログラミング言語があり、それぞれ簡単に説明するとクラス(設計図)、インスタンス(実際にできあがったモノ)、オブジェクト(モノ)。設計図から実際にモノを作成するという考えでいいと思います。それでは記述をみて行きましょう。

function test(age) {
    this.age = age//生成したインスタンスがthis
}
var age = new test(28);//new必須。インスタンス生成。
console.log(age);

ここでコンスタンス呼び出し時重要なのがnewです。必ず付けないといけません。

まとめ

それでは少しまとめていきましょう！

関数のthis→グローバルオブジェクト参照。
メソッドのthis→呼び出し元参照。
コンストラクタのthis→生成したインスタンス参照。
call/applyメソッドのthis→引数に指定したオブジェクト参照。

最後になりましたがthisは用途によって中身が変わる変数です。それぞれの使い方、参照先を理解していないと挙動がおかしくなるので意味をしっかりと理解して使いましょう！

JavaScriptの解説記事はこちらもオススメです！↓↓↓

【JavaScript】onloadイベントとは？初心者でも分かりやすく解説