JavaScriptのthisキーワード：使いこなしてコードをレベルアップ

2024-04-02

JavaScriptの「this」キーワード：動作と使用例

thisの動作

1 関数呼び出し

関数内で this を使用すると、その関数を呼び出したオブジェクトを参照します。
例：

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

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

2 オブジェクトリテラル

オブジェクトリテラル内のメソッド内で this を使用すると、そのオブジェクト自身を参照します。

const person = {
  name: "John Doe",
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  },
};

person.greet(); // "Hi, I'm John Doe"

3 コンストラクタ

コンストラクタ内で this を使用すると、生成されるオブジェクトを参照します。

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const john = new Person("John Doe");
john.sayHello(); // "Hello, my name is John Doe"

4 その他

this は、イベントハンドラ、アロー関数、bind() メソッドなど、さまざまなコンテキストで使用されます。

thisを使用すべき場面

オブジェクトのプロパティやメソッドにアクセスする必要がある場合
オブジェクトの状態に基づいて処理を行う必要がある場合
コードをより簡潔かつ読みやすくしたい場合

thisの注意点

this は呼び出し元によって変化するため、意図せず別のオブジェクトを参照してしまう可能性があります。
厳格モードでは、this の値がより厳密に定義されます。
アロー関数では、this は常にその関数を囲むスコープのオブジェクトを参照します。

まとめ

「this」キーワードは、JavaScript でオブジェクト指向プログラミングを行う上で非常に重要な役割を果たします。 its 動作と使用例を理解することで、コードをより効率的で分かりやすく書くことができます。

オブジェクトのプロパティとメソッドへのアクセス

const person = {
  name: "John Doe",
  age: 30,
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  },
};

person.sayHello(); // "Hello, my name is John Doe and I'm 30 years old."

オブジェクトの状態に基づいた処理

const car = {
  model: "Toyota Corolla",
  year: 2023,
  isEngineRunning: false,

  startEngine() {
    this.isEngineRunning = true;
    console.log(`The ${this.model} engine is now running.`);
  },

  stopEngine() {
    this.isEngineRunning = false;
    console.log(`The ${this.model} engine is now stopped.`);
  },
};

car.startEngine(); // "The Toyota Corolla engine is now running."
car.stopEngine(); // "The Toyota Corolla engine is now stopped."

コードの簡潔化

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log(`The button with text "${this.textContent}" was clicked.`);
});

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log(`The button with text "${button.textContent}" was clicked.`);
});

アロー関数を使用することで、this を明示的に記述する必要がなくなり、コードを簡潔に書くことができます。

this キーワードの代替方法

以下、「this」キーワードの代替方法をいくつか紹介します。

明示的なオブジェクト参照

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

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

アロー関数

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log(`The button with text "${button.textContent}" was clicked.`);
});

bind() メソッド

const sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person = {
  name: "John Doe",
};

const boundSayHello = sayHello.bind(person);

boundSayHello(); // "Hello, my name is John Doe"

クラス

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const john = new Person("John Doe");

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