JS の this キーワード

1. オブジェクトにおける this

this キーワードは、オブジェクトを参照します。
JavaScriptにおいて、this はメソッドを呼び出しているオブジェクトにアクセスするために使用されます。

2. オブジェクトメソッド内の this

オブジェクトのメソッド内で使用される場合、this はそのオブジェクト自体を参照します。

2.1 コード例

const person = {
  firstName: "ジョン",
  lastName: "ドウ",
  age: 50,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

上記の例では以下の通りです：

• this.firstName は、personオブジェクトの firstName プロパティを参照しています。
• this.lastName は、personオブジェクトの lastName プロパティを参照しています。

3. なぜ this を使うのか？

this キーワードを使用することで、同じメソッドを異なるオブジェクトで再利用することが可能になります。

3.1 コード例

const person1 = {
  name: "ジョン",
  hello: function() {
    return "こんにちは、" + this.name + "さん";
  }
};

const person2 = {
  name: "アンナ",
  hello: function() {
    return "こんにちは、" + this.name + "さん";
  }
};

// HTML要素に結果を表示
document.getElementById("demo").innerHTML = person1.hello();

4. 単独で使用される this

他のコードの外部で、単独で this を使用した場合、それはグローバルオブジェクト（Global object）を参照します。
ブラウザ環境では、グローバルオブジェクトは window オブジェクトになります。

4.1 コード例

let x = this;
document.getElementById("demo").innerHTML = x;

       注意: 厳格モード（Strict mode）では、単独で使用された this は undefined になります。

5. 関数内での this

通常の関数内においても、this はグローバルオブジェクトを参照します。

5.1 コード例

function myFunction() {
  return this;
}

document.getElementById("demo").innerHTML = myFunction();

6. まとめ

• オブジェクトメソッド内では、this はそのオブジェクトを参照する
• this を使うことで、メソッドからオブジェクトのプロパティにアクセスできる
• 単独、あるいは通常の関数内で使用された this はグローバルオブジェクトを参照する