KATUBLO | エンジニアの日常BLOG
2019年04月19日

【javascripts】$thisの使い方について初心者が解説

こんにちは。KATUOです。最近バイト先で、内定インターン先で「Vue.js」「Angular.js」「Nest.js」とjavascriptsの使用率が半端なくて、高頻度で「これ、どうなってる?」と混乱する場面に直面するようになりました。そこで今回は直面した混乱の中の「this」の使い方について調べ解説して行こうと思います。またこの記事は以下のサイトを参考にさせてもらいつつ記事を書いて行きます。

 

 

 

javascriptsに置ける$thisは大きく分けて4種類

1.メゾットを呼び出す場合

2.関数を呼び出す場合

3.コンストラクタを呼び出す場合

4.apply,callで呼び出す場合

 

上の4つの場合があります。$thisを考える上で重要になるのはどこから呼び出されているかという点を意識することです。

 

 

メゾットを呼び出す場合

 

この形式は一番よく使うやり方ですよね。thisはメゾット内を指していて、メゾットないのvalueを指定しています。

 

 

関数を呼び出す場合

 

またshow内のconsole.logは以下のオブジェクトを吐き出しました。

 

 

これはthisがグローバルオブジェクトを指すことからこのようなログになります。ここで次の例を見てみましょう。

 

 

[1] 1

[2] undefind

 

という結果になりました。これはどういうことでしょうか?[1]のthisはオブジェクト内を指すことからvalueを参照していることがわかります。[2]のthisはグローバルオブジェクトを指すことかたundefindをいう結果になってしまいます。これを回避するために以下のように記述する方法があります。

 

 

オブジェクト内を指すthisを明示的にselfに代入することでオブジェクト内のメゾットからもオブジェクトのプロパティを参照することができます。これは実際インターン先で使用した経験があります。

 

コンストラクタを呼び出す場合

 

上の場合はnew することでインスタンスを生成し、その生成されたインスタンスにthisがセットされます。つまりnumObject内のプロパティはthisを

つけることによって値が保持されます。よって上のような挙動になります。仮にnewをつけずに関数として参照した場合はthisがグローバルオブジェクトを指すことになってしまいます。

 

apply,callで呼び出す場合

 

 

apply,callは共に第一引数でthisを指定することができます。つまりこの場合だとnumObject内で用いられるthisはaddObjectを指すことになり、this.valueはaddObject内のvalueを指すことになります。

 

applyとcallの違いは?

これは第二引数のとる値の形式が異なります。

 

apply:配列

call:number,string..etc

 

っていうだけです。

 

という感じで簡単にthisについての解説を致しました。すこしでも見てくれた人の力になれれば嬉しいです。

最後まで読んで頂き、ありがとうございました。
SNS等でのシェアが頂ければ幸いです!

プロフィール

@KATUO

現在都内私立大学に通う大学4年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習を開始。現在は「ToC向け大規模サービスを運営するメガベンチャー」と「AIスタートアップ」でインターンで修行中。2020年4月からwebエンジニアとして社会人生活スタート。

Twitterアカウント

広告

スポンサー