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

初心者向けにJavaScriptのthisについて現役エンジニアが解説しています。JavaScriptのthisとはJavaScriptのキーワードで、主に関数の実行コンテキストを参照します。JavaScriptのthisの使い方やStrictモードや関数の実行方法によるthisの違いについて説明します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのthisについて詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

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講座を開催しています。

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