「this」キーワードを使いこなして、JavaScriptマスターへの道を歩め！

JavaScriptにおける「this」キーワードの動作

関数内で「this」を使う

function sayName() {
  console.log(this.name); // "John"
}

const person = {
  name: "John",
  sayName: sayName,
};

person.sayName(); // "John"

この例では、sayName関数はpersonオブジェクトのメソッドとして呼び出されています。そのため、関数内部でのthisはpersonオブジェクト自身を指し、console.logでnameプロパティを出力すると "John" と表示されます。

アロー関数と「this」

アロー関数では、thisは常にそのアロー関数を定義したスコープを指します。

const person = {
  name: "John",
  sayName: () => {
    console.log(this.name); // "John"
  },
};

person.sayName(); // "John"

この例では、sayName関数はアロー関数として定義されています。personオブジェクトのメソッドとして呼び出されても、thisはpersonオブジェクトではなく、アロー関数を定義したpersonオブジェクトのプロパティsayNameのスコープを指します。

• イベントハンドラ内で呼び出された場合は、thisはイベントが発生した要素を指します。
• コンストラクタ内で呼び出された場合は、thisは新しく作成されたオブジェクトを指します。
• 関数オブジェクトとして呼び出された場合は、thisはグローバルオブジェクト（厳格モードではundefined）を指します。

function sayName() {
  console.log(this.name); // "John"
}

const person = {
  name: "John",
  sayName,
};

person.sayName(); // "John"

const person = {
  name: "John",
  sayName: () => {
    console.log(this.name); // "John"
  },
};

person.sayName(); // "John"

• 関数オブジェクトとして呼び出された場合

function sayName() {
  console.log(this.name); // "undefined"
}

sayName(); // "undefined"

• コンストラクタ内で呼び出された場合

function Person(name) {
  this.name = name;
  console.log(this.name); // "John"
}

const person = new Person("John"); // "John"

• イベントハンドラ内で呼び出された場合

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log(this.textContent); // "Click me!"
});

「this」キーワードの動作を理解するための他の方法

デバッグツールを使う

多くのブラウザの開発者ツールには、実行中のコードのスコープと「this」キーワードの値を表示できる機能があります。これらのツールを使って、コードの実行中に「this」キーワードがどのように変化するかを確認できます。

チュートリアルや記事を読む

「this」キーワードに関するチュートリアルや記事は、インターネット上でたくさん公開されています。これらの資料を読むことで、「this」キーワードの動作についてより深く理解することができます。

実際にコードを書いてみる

実際にコードを書いてみることは、「this」キーワードの動作を理解するための最も効果的な方法です。さまざまな方法で「this」キーワードを使ってみて、その結果を観察してみましょう。

役立つチュートリアルや記事