【初心者向け解説】JavaScriptのthisキーワード

JavaScript thisの基本

thisキーワードは、現在実行されているコードのコンテキストを表します。つまり、どのオブジェクトのメソッドとして関数が実行されているかを示します。

const obj = {
    name: 'John Doe',
    sayHello() {
        console.log(`Hello, my name is ${this.name}.`);
    },
};

obj.sayHello(); // "Hello, my name is John Doe."

上記の例では、obj.sayHello()というメソッドが呼び出されています。このとき、thisキーワードはobjオブジェクトを指します。

合わせて読みたい

【初心者でも分かる】JavaScriptとは | デジタルトレンドナビ

この記事では、プログラミング初心者向けにJavaScriptの基礎を解説します。JavaScriptとは何か、その特性や利点、そして効果的な学習方法だけでなく実際のサンプルコードを示して、実際のプログラミングの流れを理解しやすくします。

関数呼び出し時のthis

関数呼び出し時のthisは、以下のルールで決定されます。

• オブジェクトのメソッドとして呼び出された場合: メソッドが属するオブジェクト
• 通常の関数として呼び出された場合: グローバルオブジェクト（厳格モードではundefined）
• call()、apply()、bind()メソッドを使って呼び出された場合: 引数で指定したオブジェクト

// オブジェクトのメソッドとして呼び出す
const obj1 = {
    name: 'John Doe',
    sayHello() {
        console.log(`Hello, my name is ${this.name}.`);
    },
};
obj1.sayHello(); // "Hello, my name is John Doe."

// 通常の関数として呼び出す
function sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
}
sayHello(); // "Hello, my name is undefined."

// call()メソッドを使って呼び出す
const obj2 = { name: 'John Doe' };
const newName = 'Jane Doe';
function sayHelloWithName(name) {
    console.log(`Hello, my name is ${name}.`);
}
sayHelloWithName.call(obj2, newName); // "Hello, my name is Jane Doe."

上記の例では、さまざまな方法でsayHello()関数を呼び出しています。それぞれの呼び出し方におけるthisの値を確認してみましょう。

その他のthisの動作

thisキーワードは、以下の状況でも使用されます。

• イベントハンドラ：イベントが発生した要素
• コンストラクタ：新しいオブジェクトが生成されたとき
• アロー関数：親スコープのthis

// イベントハンドラ
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
    console.log(`this is ${this}`); // thisはボタン要素
});

// コンストラクタ
class Person {
    constructor(name) {
        this.name = name;
        console.log(`this is ${this}`); // thisは新しいPersonオブジェクト
    }
}

const person = new Person('John Doe');

// アロー関数
const obj = {
    name: 'John Doe',
    sayHello: () => {
        console.log(`this is ${this.name}`); // ここでのthisは、objオブジェクトではなく、外側のスコープのthisを参照します
    },
};

obj.sayHello(); // "もしグローバルスコープでnameプロパティが定義されていない場合"

上記の例では、イベントハンドラ、コンストラクタ、アロー関数におけるthisの動作を確認できます。

アロー関数内のthisは、その関数が定義されたスコープのthisに固定されます。

例えば、オブジェクト内でアロー関数を定義した場合、そのアロー関数のthisはオブジェクトではなく、関数が定義された時の外側のスコープ（例えばグローバルスコープ）のthisを指します。この例では、sayHelloメソッド内のthisはグローバルスコープのthisを指し、そのためthis.nameはundefinedになる可能性があります。

まとめ

thisキーワードは、JavaScriptプログラミングにおいて重要な役割を果たします。さまざまな状況におけるthisの動作を理解することで、より高度なコードを書くことができます。

本記事を参考に、thisキーワードを使いこなせるように練習してみてください。