「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はグローバルオブジェクト（厳格モードでは
undefined）を指します。 - コンストラクタ内で呼び出された場合は、thisは新しく作成されたオブジェクトを指します。
- イベントハンドラ内で呼び出された場合は、thisはイベントが発生した要素を指します。
「this」キーワードは、JavaScriptの重要な概念の一つです。関数内で「this」を使う場合は、実行コンテキストによって異なる値を指すことを理解しておく必要があります。
関数内で「this」を使う
function sayName() {
console.log(this.name); // "John"
}
const person = {
name: "John",
sayName,
};
person.sayName(); // "John"
アロー関数と「this」
const person = {
name: "John",
sayName: () => {
console.log(this.name); // "John"
},
};
person.sayName(); // "John"
その他の「this」の動作
- 関数オブジェクトとして呼び出された場合
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」キーワードを使ってみて、その結果を観察してみましょう。
「this」キーワードは、JavaScriptの重要な概念の一つです。上記の方法を使って、「this」キーワードの動作をしっかりと理解しておきましょう。
javascript this language-design
