JavaScript thisキーワード

例:

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

thisとは何ですか？

JavaScriptでは、thisキーワードはオブジェクトを参照します。

thisキーワードの参照先は、使用方法によって異なります:

• オブジェクトのメソッド内では、thisはそのオブジェクトを指します。
• 単独で使用すると、thisはグローバルオブジェクトを指します。
• 関数内では、thisはデフォルトでグローバルオブジェクトを指します。
• 関数内で厳密モードを使用すると、thisは未定義になります。
• イベント内では、thisはイベントを受け取った要素を指します。
• call()、apply()、bind()などのメソッドを使用すると、thisを任意のオブジェクトに指定できます。

Note: thisは変数ではなくキーワードです。thisの値を変更することはできません。

thisを使ったメソッド内での使用例

オブジェクトのメソッド内で使用する場合、thisはそのオブジェクトを指します。

前述の例では、fullNameメソッドはpersonオブジェクトのメソッドであるため、thisはpersonオブジェクトを指します。

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

this単体での使用

単体で使用すると、thisはグローバルオブジェクトを指します。

これはグローバルスコープで実行されるためです。

ブラウザのウィンドウでは、グローバルオブジェクトは[object Window]です:

let x = this;

厳密モードでは、単体で使用する場合もthisはグローバルオブジェクトを指します:

"use strict";
let x = this;

関数内でのthis（デフォルト）

関数内では、デフォルトでthisはグローバルオブジェクトにバインドされます。

ブラウザのウィンドウでは、グローバルオブジェクトは[object Window]です:

function myFunction() {
  return this;
}

関数内でのthis（厳密モード）

JavaScriptの厳密モードでは、デフォルトのバインディングが許可されません。

そのため、関数内で厳密モードを使用すると、thisは未定義になります。

"use strict";
function myFunction() {
  return this;
}

イベントハンドラ内でのthis

HTMLのイベントハンドラ内では、thisはイベントを受け取ったHTML要素を指します:

  Click to Remove Me!

オブジェクトメソッドのバインディング

以下の例では、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プロパティです。

明示的な関数のバインディング

call()メソッドとapply()メソッドは、事前定義されたJavaScriptのメソッドです。

これらはどちらも別のオブジェクトを引数としてオブジェクトのメソッドを呼び出すために使用されます。

以下の例では、person1.fullNameをperson2を引数にして呼び出し、thisをperson2に指定しています。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);

関数の借用

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",
}

let fullName = person.fullName.bind(member);

優先順位

thisがどのオブジェクトを指すかを決定するために、以下の優先順位を使用します。

優先順位	オブジェクト
1	bind()
2	apply()とcall()
3	オブジェクトのメソッド
4	グローバルスコープ