JavaScriptのthisの参照先を完全解説！初心者でもわかるthisのルール4つ

1. グローバルコンテキストではthisはwindow（ブラウザの場合）

1. グローバルコンテキストではthisはwindow（ブラウザの場合）

JavaScriptで最初に書いたコードは、特別なオブジェクトの中にない限り、グローバルコンテキストで実行されます。この場合、thisはブラウザではwindowオブジェクトを指します。Node.jsの場合はglobalオブジェクトです。

console.log(this);

    // ブラウザではwindowオブジェクトが表示されます

つまり、グローバルで関数を呼び出すと、thisは全体のオブジェクトを指していることになります。

2. オブジェクトのメソッド内ではthisはそのオブジェクト

2. オブジェクトのメソッド内ではthisはそのオブジェクト

オブジェクトの中で関数を作ると、その関数を「メソッド」と呼びます。メソッドの中のthisは、そのオブジェクト自身を指します。

const user = {
  name: "太郎",
  greet: function() {
    console.log(this.name + "です。こんにちは！");
  }
};

user.greet(); // 太郎です。こんにちは！

この場合、this.nameはuser.nameと同じ意味になります。

3. コンストラクタ関数やクラスではthisは新しく作ったオブジェクト

3. コンストラクタ関数やクラスではthisは新しく作ったオブジェクト

JavaScriptではnewキーワードを使って関数やクラスから新しいオブジェクトを作ることができます。その時のthisは、新しく作られたオブジェクトを指します。

function Person(name) {
  this.name = name;
}

const taro = new Person("太郎");
console.log(taro.name); // 太郎

ここでのthis.nameは、作られたtaroオブジェクトのnameプロパティを指しています。クラスでも同じです。

class PersonClass {
  constructor(name) {
    this.name = name;
  }
}

const hanako = new PersonClass("花子");
console.log(hanako.name); // 花子

4. call, apply, bindでthisを自由に指定できる

4. call, apply, bindでthisを自由に指定できる

関数はcallやapply、bindを使うことで、thisを自由に指定できます。これは便利ですが、初心者は少し混乱しやすいポイントです。

function greet() {
  console.log(this.name + "さん、こんにちは！");
}

const user1 = { name: "太郎" };
const user2 = { name: "花子" };

greet.call(user1); // 太郎さん、こんにちは！
greet.apply(user2); // 花子さん、こんにちは！

const boundGreet = greet.bind(user1);
boundGreet(); // 太郎さん、こんにちは！

callとapplyはすぐに関数を実行しますが、bindはthisを固定した新しい関数を作ります。

5. アロー関数ではthisは作られた場所の外側を参照

5. アロー関数ではthisは作られた場所の外側を参照

アロー関数は普通の関数と違い、自分でthisを持ちません。外側の関数やオブジェクトのthisをそのまま使います。

const user = {
  name: "太郎",
  greet: function() {
    const arrow = () => console.log(this.name + "です！");
    arrow();
  }
};

user.greet(); // 太郎です！

通常の関数だとthisはundefinedやwindowを指す場合がありますが、アロー関数では外側のthisをそのまま使うので安心です。

6. thisを理解するコツと初心者向けの考え方

6. thisを理解するコツと初心者向けの考え方

初心者はthisを見ると難しく感じますが、まずは『今いる環境で何を指すか』を考えることが重要です。

• グローバルではwindowやglobalを指す
• オブジェクトのメソッドではそのオブジェクト自身を指す
• コンストラクタやクラスではnewで作ったオブジェクトを指す
• call, apply, bindで自由に指定できる
• アロー関数では外側のthisをそのまま使う

こうしたルールを頭に入れておくと、JavaScriptの関数やオブジェクトを安心して扱えるようになります。

const globalFunc = function() {
  console.log(this);
};

globalFunc(); // ブラウザではwindow、Nodeではglobal

7. 実際の開発でのthisの活用例

7. 実際の開発でのthisの活用例

例えば、ボタンを押したときにオブジェクトのデータを表示したい場合、thisをうまく使うとコードがすっきりします。

const buttonHandler = {
  text: "クリックされました",
  handleClick: function() {
    console.log(this.text);
  }
};

document.querySelector("button").addEventListener("click", buttonHandler.handleClick.bind(buttonHandler));

このようにbindを使うことで、ボタンがクリックされたときもthisを正しくオブジェクトに向けることができます。

8. まとめ的な考え方：thisは状況に応じて変わる自分

8. まとめ的な考え方：thisは状況に応じて変わる自分

JavaScriptのthisは「自分がどのオブジェクトを指すか」を示す魔法のキーワードです。最初は混乱しますが、今回紹介した4つの基本ルールとアロー関数の特徴を意識すれば、初心者でもしっかり理解できます。練習として、いろいろな関数やオブジェクトでthisがどこを指すか確認すると、自然と使えるようになります。

まとめ

まとめ

JavaScriptのthisは初心者にとって少し難しく感じるキーワードですが、基本ルールを押さえることでスッキリ理解できます。グローバルコンテキストではwindowやglobalを指し、オブジェクトのメソッドではそのオブジェクト自身を参照します。コンストラクタ関数やクラスではnewで作成したオブジェクトを指し、call、apply、bindを使うことで任意のオブジェクトにthisを指定できます。また、アロー関数は自身のthisを持たず、外側のスコープのthisをそのまま利用するため、イベントハンドラやコールバックで便利です。実際の開発ではボタンやフォームなどのUIイベント、非同期処理、オブジェクト管理などさまざまな場面でthisを活用できます。これらを理解すると、関数の挙動やオブジェクト指向プログラミングのコードが読みやすくなり、保守性も向上します。

サンプルプログラムで振り返るthisの基本

基本的な使い方をサンプルで確認してみましょう。

 // グローバルコンテキストでのthis function globalFunc() { console.log(this); } globalFunc(); // ブラウザではwindow、Nodeではglobal
// オブジェクトのメソッドでのthis
const obj = {
name: "太郎",
greet: function() {
console.log(this.name + "です！");
}
};
obj.greet(); // 太郎です！

// コンストラクタ関数でのthis
function Person(name) {
this.name = name;
}
const hanako = new Person("花子");
console.log(hanako.name); // 花子

// call, apply, bindを使ったthis指定
function sayHello() {
console.log(this.name + "さん、こんにちは！");
}
const user = { name: "次郎" };
sayHello.call(user); // 次郎さん、こんにちは！
sayHello.apply(user); // 次郎さん、こんにちは！
const boundSayHello = sayHello.bind(user);
boundSayHello(); // 次郎さん、こんにちは！

// アロー関数で外側のthisを利用
const arrowObj = {
name: "三郎",
greet: function() {
const arrow = () => console.log(this.name + "です！");
arrow();
}
};
arrowObj.greet(); // 三郎です！