JavaScriptのthisキーワード解説

JavaScriptのthisキーワードについて

thisキーワードは、JavaScriptにおけるオブジェクトのコンテキスト（実行環境）を指す特別なキーワードです。その値は、関数が呼び出された方法によって異なります。

thisの値が決定される方法

• アロー関数
  アロー関数は、thisを定義するスコープのthisを参照します。つまり、アロー関数の外側のthisの値を継承します。
• call()またはapply()メソッドを使って呼び出されたとき
  thisの値は、これらのメソッドの最初の引数として指定されたオブジェクトになります。
• new演算子を使って呼び出されたとき
  thisは、新しく作成されたオブジェクトを参照します。
• 関数として呼び出されたとき
  
  • 厳格モード
    thisは、グローバルオブジェクト（windowオブジェクト）を参照します。
  • 非厳格モード
    thisは、呼び出し元のオブジェクトを参照します。ただし、呼び出し元が明示的に指定されていない場合、thisはグローバルオブジェクトを参照します。
• オブジェクトメソッドとして呼び出されたとき
  thisは、そのメソッドが定義されているオブジェクトを参照します。

thisの使用例

// オブジェクトメソッドとして呼び出されたとき
const person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Output: Hello, my name is Alice   

// 関数として呼び出されたとき（非厳格モード）
function sayHello() {
  console.log("Hello, my name is " + this.name);
}

sayHello(); // Output: Hello, my name is Alice (assuming the global object has a "name" property)

// `new`演算子を使って呼び出されたとき
function Person(name) {
  this.name = name;
}

const person2 = new Person("Bob");
console.log(person2.name); // Output: Bob

// `call()`メソッドを使って呼び出されたとき
const person3 = { name: "Charlie" };
sayHello.call(person3); // Output: Hello, my name is Charlie

// アロー関数
const greet = () => {
  console.log("Hello, my name is " + this.name);
};

greet.call(person); // Output: Hello, my name is Alice (アロー関数は外側の`this`を参照)

オブジェクトメソッドとして呼び出されたとき

const person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Output: Hello, my name is Alice   

• greetメソッドがpersonオブジェクトのメソッドとして呼び出されているため、thisはpersonオブジェクトを参照します。

関数として呼び出されたとき（非厳格モード）

function sayHello() {
  console.log("Hello, my name is " + this.name);
}

sayHello(); // Output: Hello, my name is Alice (assuming the global object has a "name" property)

• sayHello関数が関数として呼び出されているため、非厳格モードではthisはグローバルオブジェクト（windowオブジェクト）を参照します。

new演算子を使って呼び出されたとき

function Person(name) {
  this.name = name;
}

const person2 = new Person("Bob");
console.log(person2.name); // Output: Bob

• Person関数がnew演算子を使って呼び出されているため、thisは新しく作成されたperson2オブジェクトを参照します。

call()またはapply()メソッドを使って呼び出されたとき

const person3 = { name: "Charlie" };
sayHello.call(person3); // Output: Hello, my name is Charlie

• call()メソッドの最初の引数としてperson3オブジェクトが渡されているため、thisはperson3オブジェクトを参照します。

アロー関数

const greet = () => {
  console.log("Hello, my name is " + this.name);
};

greet.call(person); // Output: Hello, my name is Alice (アロー関数は外側の`this`を参照)

• アロー関数は、thisを定義するスコープのthisを参照します。この例では、greet関数は外側のthis（personオブジェクト）を参照します。

オブジェクトのプロパティへのアクセス

const car = {
  color: "red",
  start: function() {
    console.log("Starting the " + this.color + " car.");
  }
};

car.start(); // Output: Starting the red car.

• this.colorは、carオブジェクトのcolorプロパティを参照します。

オブジェクトメソッドの呼び出し

const person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  },
  sayHello: function() {
    this.greet();
  }
};

person.sayHello(); // Output: Hello, my name is Alice

• this.greet()は、personオブジェクトのgreetメソッドを呼び出します。

イベントハンドラーでの使用

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button click   ed!");
});

• イベントハンドラーの関数内では、thisはイベントの発生元である要素（button）を参照します。

bind()メソッド

• 新しい関数を呼び出すと、thisは常に指定したオブジェクトを参照します。
• 戻り値は、新しい関数です。
• bind()メソッドは、関数のthis値を固定します。

const person = { name: "Alice" };

function greet() {
  console.log("Hello, my name is " + this.name);
}

const boundGreet = greet.bind(person);
boundGreet(); // Output: Hello, my name is Alice   

• これは、関数を作成する場所のthisの値を継承します。
• アロー関数は、thisを定義するスコープのthisを参照します。

const person = { name: "Alice" };

const greet = () => {
  console.log("Hello, my name is " + this.name);
};

greet.call(person); // Output: Hello, my name is Alice

クロージャ

• クロージャ内の関数から外側のスコープの変数にアクセスできます。
• クロージャは、関数とその定義時のスコープを束縛したものです。

function createGreeter(name) {
  return function() {
    console.log("Hello, my name is " + name);
  };
}

const greetAlice = createGreeter("Alice");
greetAlice(); // Output: Hello, my name is Alice

call()またはapply()メソッド

• これらのメソッドは、関数のthis値を一時的に変更することができます。

const person = { name: "Alice" };

function greet(age) {
  console.log("Hello, my name is " + this.name + ". I am " + age + " years old.");
}

greet.call(person, 30); // Output: Hello, my name is Alice. I am 30 years old.

arguments.callee

• しかし、ES5以降では非推奨になっています。
• arguments.calleeは、現在の関数を指します。

選択基準

• 関数のthis値を一時的に変更する必要がある場合
  call()またはapply()メソッドを使用します。
• 外側のスコープの変数にアクセスする必要がある場合
  クロージャを使用します。
• thisを固定する必要がある場合
  bind()メソッドまたはアロー関数を使用します。