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

JavaScript メソッド

JavaScriptのthisキーワードは、関数の実行コンテキストに基づいて、それが呼び出されたオブジェクトを参照します。一見シンプルに見えますが、初心者にとっては理解しにくい概念の一つでもあります。

この記事では、thisキーワードの基本的な動作から関数内でどのように使われるのか、そして注意点まで初心者でも理解しやすいように解説していきます。

この記事でわかること

JavaScript thisの概要
JavaScript thisのサンプルコード

1 JavaScript thisの基本
2 関数呼び出し時のthis
3 その他のthisの動作
4 まとめ
5 投稿者

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オブジェクトを指します。

関数呼び出し時の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になる可能性があります。