JavaScriptを学んでいると、必ず出てくるのが「this」というキーワードです。
thisは、JavaScriptにおいて非常に重要な概念の一つですが、初心者にはわかりにくいですよね。
thisの使い方を理解することで、より効率的で可読性の高いコードを書けるようになります。
そこでこの記事では、JavaScriptのthisについて、基本的な動作から、アロー関数やクラスでの使われ方、活用のヒントまで、図解を交えてわかりやすく説明していきます！
- 未経験からWebエンジニアとして転職成功（年収 30% アップ）
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
そもそもthisとは何か？
thisは、「現在の実行コンテキスト」を参照するキーワードです。
実行コンテキストとは、コードが実行される環境のことで、簡単に言えば「そのコードが属しているオブジェクト」を指します。
例えば、オブジェクトのメソッド内でthisを使うと、そのthisはメソッドを呼び出したオブジェクト自身を指します。
一方、単なる関数の中でthisを使うと、そのthisはグローバルオブジェクト（ブラウザではwindowオブジェクト）を指します。
つまり、thisは使われる場所によって参照先が変化するのが特徴なのです。
グローバルコンテキストでのthis
グローバルスコープ、つまりどのオブジェクトにも属さない場所でthisを使うと、それはグローバルオブジェクトを指します。
console.log(this); // Window {...} (ブラウザの場合)関数コンテキストでのthis
通常の関数内でthisを使うと、そのthisもグローバルオブジェクトを指します。
ただし、strict modeを使っている場合、thisはundefinedになります。
function myFunction() {
console.log(this);
}
myFunction(); // Window {...}
function myStrictFunction() {
'use strict'
console.log(this);
}
myStrictFunction(); // undefinedオブジェクトのメソッドとしてのthis
オブジェクトのメソッド内でthisを使うと、そのthisはメソッドを呼び出したオブジェクト自身を指します。
これは、Javaなどの他の言語でのthisの挙動と似ています。
const obj = {
prop: "someValue",
myMethod: function () {
console.log(this.prop);
}
};
obj.myMethod(); // "someValue"コンストラクター関数とthis
コンストラクター関数内でthisを使うと、そのthisは新しく作成されるインスタンスを指します。
つまり、thisを使ってインスタンスのプロパティを定義することができます。
function Car(make, model) {
this.make = make;
this.model = model;
}
const myCar = new Car("Honda", "Accord");
console.log(myCar.make); // "Honda"アロー関数とthis
アロー関数では、thisの挙動が通常の関数とは異なります。
アロー関数内のthisは、アロー関数を囲むスコープのthisを継承します。
これにより、thisが予期せず変化することを防げます。
const obj = {
myMethod: function() {
const myArrowFunc = () => {
console.log(this);
}
myArrowFunc();
}
}
obj.myMethod(); // {myMethod: ƒ}この例では、アロー関数内のthisは、それを囲むmyMethodのthis、つまりobjを参照します。
クラスとthis
クラス内のメソッドでthisを使うと、そのthisはメソッドを呼び出したインスタンスを指します。
これは、コンストラクター関数の場合と同じです。
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
getArea() {
return this.height * this.width;
}
}
const myRectangle = new Rectangle(5, 3);
console.log(myRectangle.getArea()); // 15thisを使う上での注意点
thisは呼び出し方によって参照先が変わるため、意図しない結果になることがあります。
コードを書くときは常にthisが何を指すのかを意識することが大切です。
thisを使いこなすためのヒント
通常の関数内ではthisは予期せぬ値になることが多いので、アロー関数を使うことをおすすめします。
オブジェクトのメソッドやクラス内では、thisは重宝します。インスタンスのプロパティにアクセスするのに必須です。
コールバックでthisを使うときは、アロー関数にするか、bindメソッドでthisを固定しましょう。
JavaScript を効率よく勉強するなら
この記事を読んでいる方は JavaScript の勉強を頑張っていることと思います！
しかし、JavaScript は学習範囲が広く、知識不足で苦労している方もいるかもしれませんね。
そんなときは本やプログラミングスクールを活用し、体系的な学習を検討してみてはいかがでしょうか？
