this

ディス（オブジェクト指向）

意味現在のオブジェクトを参照

thisとは？

thisキーワードは、関数内で使用されると、その関数が属するオブジェクトやインスタンスを参照します。クラスのメソッドやコンストラクタ内で使用される場合、それはクラスのインスタンスを指します。

thisの具体的な使い方

thisキーワードを使用してインスタンスのプロパティにアクセスする例

<button onclick="const person = new Person('太郎'); person.greet();">thisキーワードの例を表示</button>
<script>
class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        alert(`こんにちは、${this.name}さん！`);
    }
}
</script>

このコードでは、Personクラスのconstructorで'this.name'を使ってインスタンスのnameプロパティを設定し、greetメソッドで'this.name'を使ってそのプロパティにアクセスしています。

オブジェクトメソッド内でのthisの使用

const user = {
    name: '花子',
    sayHello: function() {
        console.log(`こんにちは、私は${this.name}です。`);
    }
};

user.sayHello();

👇出力結果

こんにちは、私は花子です。

このコードでは、userオブジェクトのsayHelloメソッド内で'this'を使用して、同じオブジェクト内のnameプロパティにアクセスしています。

thisに関するよくある質問

Q. thisの値はいつ変わる？

A. thisの値は、関数がどのように呼び出されたかによって変わります。通常のメソッド呼び出しではオブジェクトを参照し、イベントハンドラ内では要素を参照します。また、アロー関数では親スコープのthisを維持します。

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

A. グローバルスコープ（関数外）でのthisは、ブラウザ環境ではwindowオブジェクトを参照します。ただし、strict modeではundefinedになります。

Q. thisを固定するには？

A. thisの値を固定したい場合は、bind()メソッドを使用するか、アロー関数を使用します。例えば、obj.method.bind(obj)とすることで、methodのthisをobjに固定できます。

JavaScriptを勉強するのにおすすめな問題集アプリの紹介

楽しくプログラミングを学ぶことで、プログラミングの理解度が深まります。『JavaScript問題集』は、楽しくJavaScriptを学ぶのに最適なアプリです。AIが出題する問題に答えていくことで、自然とJavaScriptの理解度が深まります。

AppStoreからダウンロード：https://apps.apple.com/jp/app/id6737941570

JavaScriptのthisについても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのthisやオブジェクト、プロパティ、ポリモーフィズム、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

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