this

ディス（関数）

意味現在のオブジェクトを指す

thisとは？

関数が属するオブジェクト、または実行コンテキストに依存して、その現在のオブジェクトを指します。メソッド内で使われると、メソッドの親オブジェクトを指します。

thisの具体的な使い方

オブジェクトメソッド内でthisを使用する例

const obj = {
    value: 'hello',
    showValue: function() {
        console.log(this.value);
    }
};

obj.showValue();

👇出力結果

hello

この例では、showValueメソッド内のthisはobjオブジェクトを指し、objのvalueプロパティをコンソールに出力します。

コンストラクタ関数内でthisを使用する例

function Person(name) {
  this.name = name;
  this.sayHello = function() {
    console.log(`こんにちは、私は${this.name}です。`);
  };
}

const person = new Person('田中');
person.sayHello();

👇出力結果

こんにちは、私は田中です。

コンストラクタ関数内でthisを使用して、新しく作成されるオブジェクトのプロパティとメソッドを設定します。

アロー関数でのthisの挙動

const obj = {
  name: '山田',
  regularFunc: function() {
    console.log('通常関数:', this.name);
  },
  arrowFunc: () => {
    console.log('アロー関数:', this.name);
  }
};

obj.regularFunc();
obj.arrowFunc();

👇出力結果

通常関数: 山田
アロー関数: undefined

通常の関数とアロー関数でのthisの挙動の違いを示します。アロー関数は定義時のコンテキストを保持します。

thisに関するよくある質問

Q. thisの値はいつ決まる？

A. thisの値は関数が呼び出されるときに決まります。呼び出し方法によって異なる値を持ちます。

Q. アロー関数でのthisは？

A. アロー関数内のthisは、関数が定義された時点での周囲のスコープのthisを保持します。通常の関数とは異なる振る舞いをします。

Q. グローバルスコープでのthisは？

A. ブラウザ環境のグローバルスコープでは、thisはwindowオブジェクトを指します。Node.js環境では、グローバルオブジェクトを指します。

thisが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのthisやcall、function、引数、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。