JS オブジェクトにおける this

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

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

このページの冒頭にある例では、this は person オブジェクトを指しています。これは、fullName メソッドが person オブジェクトのメソッドだからです。

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    // ここでの this は person オブジェクトを指します
    return this.firstName + " " + this.lastName;
  }
};

2. オブジェクトメソッドのバインド

以下の例において、this は person オブジェクトを指します。

const person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

つまり、this.firstName は this（すなわち person オブジェクト）の firstName プロパティ（Property）を指しています。

3. 明示的な関数のバインド (Explicit Function Binding)

call() および apply() メソッドは、JavaScriptにあらかじめ定義されているメソッドです。
これらはいずれも、別のオブジェクトを引数（Argument）として渡し、オブジェクトメソッドを呼び出すために使用されます。

参照:

• Function call() メソッド
• Function apply() メソッド
• Function bind() メソッド

以下の例では、person2 を引数として person1.fullName を呼び出しています。fullName は person1 のメソッドですが、this は person2 を参照するようになります。

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person2 = {
  firstName: "John",
  lastName:  "Doe",
}

// "John Doe" を返します:
person1.fullName.call(person2);

4. 関数の借用 (Function Borrowing)

bind() メソッドを使用すると、あるオブジェクトが別のオブジェクトからメソッドを「借用」することができます。

以下の例では、2つのオブジェクト（person と member）を作成しています。
member オブジェクトが、person オブジェクトから fullName メソッドを借用しています。

const person = {
  firstName: "John",
  lastName:  "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName: "Hege",
  lastName:  "Nilsen",
}

// person の fullName メソッドを member にバインドします
let fullName = person.fullName.bind(member);

5. this とは何か？

JavaScriptにおいて、this キーワード（Keyword）はオブジェクトを指します。

this が何を指すかは、どのように使用されているか（実行コンテキスト）によって異なります。

• 単独で使用した場合: this はグローバルオブジェクト（Global Object）を指します。
• 関数内（通常）: this はグローバルオブジェクトを指します。
• 関数内（ストリクトモード）: this は undefined になります。
• オブジェクトメソッド内: this はそのオブジェクトを指します。
• イベント内: this はイベントを受け取った要素（HTML Element）を指します。
• call(), apply(), bind() などのメソッド内: this は任意のオブジェクトを指すことができます。

this は変数（Variable）ではありません。キーワードです。そのため、this の値を直接書き換えることはできません。

6. this の優先順位 (Precedence)

this がどのオブジェクトを参照するかを判断するには、以下の優先順位に従います。