JavaScriptのthisについて現役エンジニアが解説【初心者向け】

JavaScriptのthisについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• thisとは
• thisの使い方
• thisとStrictの違い
• 実際に書いてみよう
• まとめ

 

thisとは

JavaScriptのキーワードで、主に関数の実行コンテキストを参照します。「主に」と言うのは、関数の実行方法やJavaScriptのモードによってthisの値が変わるからです。

具体的にthisの値が変わる様子を、次の使い方の項目で紹介します。

[PR] フロントエンドで挫折しない学習方法を動画で公開中

thisの使い方

まずはシンプルにthisをコンソールに出力した場合、ブラウザで実行していればグローバルオブジェクトのWindowとなります。

console.log(this);

次にメソッド（オブジェクトの中の関数）を実行した場合のthisです。下記のソースではtestObjectというオブジェクトのメソッドとしてtestFunctionがあります。

testObjectオブジェクトからtestFunctionメソッドを実行すると、thisの値はtestObjectに格納されているオブジェクトを参照します。そのため、this.nameと記述するとtestObjectのプロパティのnameの値であるテックアカデミージュニアが取得できます。

let testObject = {
  name: 'テックアカデミージュニア',
  testFunction: function(){
    console.log(this);  //testObjectに格納されたオブジェクトを参照
    console.log(this.name); //テックアカデミージュニア
  }
}

testObject.testFunction();

このように呼び出し方によってthisの値は変わります。

thisとStrictの違い

thisは値の変わるキーワードで、StrictはStrictモードというJavaScriptに制限を与え厳格に実行するモードのことです。Strictモードでは、エラーにはならないが意図と異なる動作になるような処理をエラーにすることで発見しやすくすることができます。

thisとStrictモードはまったく違うものですが、Strictモードの動作の1つとしてthisの値が変わるケースがあります。次の項目でStrictモードの場合にthisの値が変化するケースを紹介します。

実際に書いてみよう

まずはtestという名前の関数を作成して、その中でthisの値を確認します。

function test(){
  console.log(this);  //Window
}

test();

結果は、グローバルオブジェクトのWindowがコンソールに表示されます。次にStrictモードで同様の処理を実行します。

function test(){
  'use strict'
  console.log(this);  //Window
}

test(); //undefined
window.test();  //Window

thisの値がundefinedになりました。関数の呼び出し方をwindowオブジェクトのメソッドとして呼び出すと、thisの値はWindowになります。

まとめ

JavaScriptのキーワードのthisを紹介しました。呼び出し方やStrictモードかどうかなどによりthisが参照する値が変わります。

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。