Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【JavaScript ECMAScript】this言語機能の使い方

this言語機能の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

thisオブジェクトは、JavaScriptの実行コンテキストにおいて、現在実行中のコードが属するオブジェクトへの参照です。その値は、関数やメソッドがどのように呼び出されたかによって動的に決定されるため、JavaScriptの学習において特に重要な概念の一つです。

グローバルコンテキスト(どの関数にも属さない場所)でthisを使用した場合、ブラウザ環境ではwindowオブジェクトを、Node.js環境ではglobalThisオブジェクトを参照します。オブジェクトのメソッドとして呼び出された場合、thisはそのメソッドを所有するオブジェクト自身を指し、メソッド内でそのオブジェクトの他のプロパティやメソッドにアクセスできます。通常の関数として呼び出された場合、非厳格モードではグローバルオブジェクトを、厳格モードではundefinedを参照します。コンストラクタ関数としてnewキーワードと共に使用された場合、thisは新しく生成されるインスタンスオブジェクトを指します。さらに、アロー関数では、自身のthisを持たず、関数が定義されたスコープのthisを継承するという特殊な振る舞いをします。

このように、thisの値は呼び出し元や定義された場所によって変化するため、正確な動作を理解することが、予期せぬエラーを防ぎ、より堅牢なコードを書く上で不可欠となります。

公式リファレンス: this

構文(syntax)

1const user = {
2  name: "Alice",
3  greet: function() {
4    console.log("Hello, " + this.name);
5  }
6};
7user.greet();

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ

関連プログラミング言語