JavaScriptのthisとは？初心者でもわかる基本概念と使い方解説

1. thisの基本的な意味とは？

1. thisの基本的な意味とは？

JavaScriptの this は、関数やオブジェクトの中で「自分自身を指す目印」のようなものです。たとえばオブジェクトのプロパティやメソッドを操作する際に、どのオブジェクトを操作しているかを指し示します。初心者でもよく出てくる概念なので、最初にしっかり覚えておくと便利です。

2. グローバルスコープでのthis

2. グローバルスコープでのthis

JavaScriptのグローバルスコープ（関数やオブジェクトの外側）で this を使うと、基本的に window オブジェクトを指します（ブラウザの場合）。

console.log(this); // ブラウザでは window オブジェクトを表示

この場合、this は「どのオブジェクトか？」と聞かれたら「グローバルの window」と答えればOKです。

3. オブジェクトの中でのthis

3. オブジェクトの中でのthis

オブジェクトのメソッドの中で this を使うと、そのオブジェクト自身を指します。

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

user.greet(); // 太郎さん、こんにちは！

ここでは this.name が user.name と同じ意味になるので、自分がどのオブジェクトに属しているかがわかります。

4. 関数の中でのthisの違い

4. 関数の中でのthisの違い

関数単体で呼ばれた場合、this はグローバルオブジェクト（ブラウザでは window）を指します。注意が必要です。

function showThis() {
  console.log(this);
}

showThis(); // window を表示（ブラウザの場合）

もし 'use strict' を使うと、this は undefined になります。

5. コンストラクタ関数とthis

5. コンストラクタ関数とthis

JavaScriptのコンストラクタ関数で new を使うと、this は新しく作られたオブジェクトを指します。

function Person(name) {
  this.name = name;
  this.sayHello = function() {
    console.log(this.name + "です、よろしく！");
  };
}

const taro = new Person("太郎");
taro.sayHello(); // 太郎です、よろしく！

このように、new を使うと this は「作ったオブジェクト」を指すので、オブジェクトごとに異なる値を扱えます。

6. アロー関数とthisの特徴

6. アロー関数とthisの特徴

アロー関数は普通の関数と違って、自分専用の this を持ちません。外側のスコープの this をそのまま使います。

const obj = {
  name: "花子",
  greet: () => {
    console.log(this.name);
  }
};

obj.greet(); // undefined （objではなく外側のthisを参照）

この性質を理解しておくと、イベントやコールバックで意図しない this の参照ミスを防げます。

7. thisを固定するbind, call, apply

7. thisを固定するbind, call, apply

JavaScriptでは bind, call, apply を使うと this を任意のオブジェクトに固定したり指定したりできます。

const person = { name: "次郎" };

function sayHi(greeting) {
  console.log(greeting + ", " + this.name);
}

const sayHiToJiro = sayHi.bind(person);
sayHiToJiro("こんにちは"); // こんにちは, 次郎

sayHi.call(person, "やあ"); // やあ, 次郎
sayHi.apply(person, ["こんばんは"]); // こんばんは, 次郎

こうすると、関数をどこで呼んでも this を指定したオブジェクトとして扱えます。

8. イベントハンドラーでのthis

8. イベントハンドラーでのthis

ブラウザでイベントを扱うとき、this は基本的にイベントを発生させた要素を指します。

const button = document.querySelector("button");
button.addEventListener("click", function() {
  console.log(this); // クリックしたボタン要素
});

アロー関数を使うと、外側のスコープの this を参照してしまうので注意が必要です。

9. thisのまとめポイント

9. thisのまとめポイント

JavaScriptの this は、どのスコープで呼ばれたか、どの形式で関数を使うかによって変わります。基本を押さえると、オブジェクト操作やイベント処理、関数呼び出しの理解が格段に楽になります。

ポイントは以下の通りです。

• グローバルスコープ：this = window（strictモードでは undefined）
• オブジェクトメソッド：this = そのオブジェクト
• 関数：通常はグローバルオブジェクト、strictモードでは undefined
• コンストラクタ関数：this = new で作ったオブジェクト
• アロー関数：自分専用の this は持たず、外側スコープを参照
• bind/call/apply：任意のオブジェクトに this を固定可能

まとめ

まとめ

ここまでJavaScriptの this について詳しく見てきました。this は「現在の実行コンテキストで指し示す対象」を表す重要なキーワードであり、関数やオブジェクトのスコープによって指すオブジェクトが変わります。グローバルスコープでは window（ブラウザ環境）を指し、オブジェクトのメソッド内ではそのオブジェクト自身を指すことが多いです。また、関数単体で呼び出した場合や 'use strict' を使用した場合には undefined となるなど、挙動が少し複雑です。コンストラクタ関数やクラスでは new によって生成される新しいオブジェクトを this が指し、アロー関数は自身の this を持たず、外側のスコープの this をそのまま参照するという特徴があります。さらに bind, call, apply を使えば、任意のオブジェクトに this を固定できるので、イベントハンドラーやコールバック関数でも意図通りに this を扱うことが可能です。これらの知識を活用することで、JavaScriptにおけるオブジェクト操作、イベント処理、関数呼び出しの理解がより深まり、コードの可読性と保守性が大きく向上します。

実際のサンプルコードでの振り返り

 // グローバルスコープ console.log(this); // window
// オブジェクトメソッド内
const obj = {
name: "太郎",
greet: function() {
console.log(this.name);
}
};
obj.greet(); // 太郎

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

// アロー関数
const arrowObj = {
name: "次郎",
greet: () => console.log(this.name)
};
arrowObj.greet(); // undefined（外側のthis）

// bind/call/apply
function sayHi(greeting) {
console.log(greeting + ", " + this.name);
}
const person = { name: "三郎" };
sayHi.bind(person)("こんにちは");
sayHi.call(person, "やあ");
sayHi.apply(person, ["こんばんは"]);