JavaScriptのthisとは？例文を通じて徹底的に理解しよう

（最終更新月：2023年11月）

✔当記事は以下のような疑問を持つ方へ向けて書かれています

✔当記事を通じて理解していただくこと

• JavaScriptのthisの基本概念
• thisを用いたJavaScriptのコーディング方法とその応用
• JavaScriptのthisを使用した実例

当記事ではJavaScriptのthisの基本的な概念から始め、その使い方や応用方法まで具体的な例とともに解説しています。

ぜひ最後までお読みください。

JavaScriptと’this’

こちらでは、JavaScriptでの「this」の動作を詳しく解説します。

「this」の振る舞いを理解することで、より効果的なプログラミングが可能です。

• ‘this’とは
• コード試行
• 基本構文

‘this’とは

「this」はJavaScriptのキーワードのひとつで、現在の実行コンテキストに関連するオブジェクトを参照します。

const obj = {
  name: "John",
  sayName: function() {
    console.log(this.name);
  }
};
obj.sayName(); // John

この例では、this.nameはobjオブジェクトのnameプロパティを指します。

コード試行

JavaScriptでの「this」の振る舞いは、実際のコードで試行することでよく理解できます。

function testThis() {
  console.log(this);
}
testThis(); // Windowオブジェクト

こちらの例では、関数内でのthisはグローバルオブジェクト、ブラウザの場合はWindowオブジェクトを指します。

基本構文

「this」は、オブジェクトのメソッド内や単体の関数内など、さまざまな場所で使用可能です。

基本的に、実行時のコンテキストに基づいてその参照先が変わる特徴があります。

‘this’の振る舞い

こちらでは、「this」が異なるコンテキストでどのように振る舞うかを解説します。

「this」の動作メカニズムを深く理解することで、コードの質と効率性を高める手助けとなるでしょう。

• グローバルコンテキストでの’this’
• 関数コンテキストでの’this’
• クラスコンテキストでの’this’

グローバルコンテキストでの’this’

グローバルコンテキスト、つまり関数の外でのthisは、ブラウザ環境ではWindowオブジェクトを指します。

console.log(this); // Windowオブジェクト

関数コンテキストでの’this’

関数の中でのthisは、通常、グローバルオブジェクトを指すものです。

ただし、厳格モード(“strict mode”)ではundefinedになります。

function exampleFunction() {
  "use strict";
  console.log(this);
}
exampleFunction(); // undefined

クラスコンテキストでの’this’

クラスのメソッド内ではthisは、そのクラスのインスタンス（つまりオブジェクト）を指します。

class ExampleClass {
  constructor(name) {
    this.name = name;
  }
  showName() {
    console.log(this.name);
  }
}
const instance = new ExampleClass("John");
instance.showName(); // John

‘this’の活用

こちらでは、’this’の実用的な使用方法やテクニックを探求します。

‘this’をより効果的にコードに組み込む方法を学べるでしょう。

• 関数内の’this’使用例
• ‘this’とオブジェクト制御
• bindメソッドの活用
• ‘this’とアロー関数
• ‘this’とオブジェクトメソッド
• ‘this’とDOMイベント

関数内の’this’使用例

関数内でのthisの参照は、その関数がどのように呼び出されるかに依存します。

const obj = {
  func: function() {
    console.log(this);
  }
};
obj.func(); // objを指す

‘this’とオブジェクト制御

オブジェクトのメソッド内で、そのオブジェクト自体を参照したい場合にthisを活用します。

const person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};
person.greet(); // "Hello, Alice"

bindメソッドの活用

JavaScriptのbindメソッドは、関数のthisを固定するために使用されます。

特定のオブジェクトに関数をバインドすることで、そのオブジェクトとして関数を実行可能です。

const person = {
  name: "Alice",
};
function greet() {
  console.log("Hello, " + this.name);
}
const boundGreet = greet.bind(person);
boundGreet(); // "Hello, Alice"

‘this’とアロー関数

アロー関数はthisの動作が通常の関数とは異なります。

アロー関数のthisは、宣言された時点のスコープのthisをキャプチャするからです。

const person = {
  name: "Bob",
  greet: function() {
    setTimeout(() => {
      console.log("Hello, " + this.name);
    }, 1000);
  }
};
person.greet(); // "Hello, Bob" が1秒後に表示

‘this’とオブジェクトメソッド

オブジェクトのメソッド内でthisを使用すると、そのメソッドを持つオブジェクトを参照します。

const car = {
  brand: "Toyota",
  getBrand: function() {
    return this.brand;
  }
};
console.log(car.getBrand()); // "Toyota"

‘this’とDOMイベント

DOMイベントのハンドラー内でthisを使用すると、そのイベントがアタッチされた要素を参照します。

document.querySelector("button").addEventListener("click", function() {
  console.log(this.textContent);
});

‘this’の応用

こちらでは、’this’をさらに深く、高度な方法で使用するテクニックを解説します。

• ‘this’と関数の関連性
• メソッドチェーンと’this’
• callとapplyの区別
• bindの利用法
• 関数内関数と’this’

‘this’と関数の関連性

関数がどのようなコンテキストで呼び出されたかによって、thisの参照先が変わることを理解することは、thisの振る舞いを正確に予測するための鍵となります。

function introduce() {
  console.log("My name is " + this.name);
}
const user = { name: "Bob" };
introduce.call(user); // "My name is Bob"

メソッドチェーンと’this’

メソッドチェーンを使用するとき、各メソッドがthisを返すと、フルエントなAPIを作成できます。

const calculator = {
  value: 0,
  add(n) {
    this.value += n;
    return this;
  },
  subtract(n) {
    this.value -= n;
    return this;
  }
};
calculator.add(5).subtract(3);
console.log(calculator.value); // 2

callとapplyの区別

callとapplyは関数を呼び出し、そのthisを指定する方法ですが、引数の取り方が異なります。

callは個別の引数を取り、applyは引数の配列を取るのです。

function showInfo(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}
const person = { name: "Charlie" };
showInfo.call(person, "Tokyo", "Japan");
showInfo.apply(person, ["Tokyo", "Japan"]);

bindの利用法（詳細）

bindを使用すると、関数のthisを事前に指定したオブジェクトに固定できます。

また、部分的に引数を適用することも可能です。

function multiply(a, b) {
  return a * b * this.value;
}
const doubler = multiply.bind({ value: 2 }, 2);
console.log(doubler(5)); // 20

関数内関数と’this’

関数内の関数では、thisはグローバルオブジェクトを参照する可能性があります。

これを避けるためには、変数にthisを代入したり、アロー関数を使用する方法を使いましょう。

const person = {
  name: "David",
  greet: function() {
    const self = this;
    function innerFunction() {
      console.log("Hello, " + self.name);
    }
    innerFunction();
  }
};
person.greet(); // "Hello, David"

まとめ

当記事では、JavaScriptのthisについて学習してきました。

JavaScriptにおけるthisは、非常に強力なキーワードであり、様々な状況で異なる値を持てます。

正しく使用すると、コードの簡潔性や可読性を高められますが、誤って使用するとバグの原因となるでしょう。

当記事を通して、以下の重要なポイントを理解できたことを願っています。

• 'this' の基本的な振る舞いとコンテキストによる違い
• JavaScriptのさまざまなシチュエーションでの'this'の動作
• bind, call, applyなどの関数と'this'を操作する方法
• DOMイベントやオブジェクトメソッドでの'this'の利用方法
• 高度な活用法、例えばメソッドチェーンや関数内関数での'this'の取り扱い

最後に、JavaScriptは常に進化している言語であるため、最新の仕様やフレームワークの動作を確認することも忘れずにおこないましょう。

当記事が、あなたのJavaScriptのスキルアップの一助となることを願っています。