JavaScript でのオブジェクト指向プログラミング (OOP) の探索

日付: 2024 年 12 月 17 日

オブジェクト指向プログラミング (OOP) は、オブジェクトを使用して現(xiàn)実世界のエンティティをモデル化するパラダイムです。 JavaScript は多用途のプログラミング言語(yǔ)であり、プロトタイプ、ES6 クラス、最新の機(jī)能拡張を通じて OOP を強(qiáng)力にサポートします。今日は、JavaScript における OOP の原理と機(jī)能について詳しく説明します。

---

JavaScript における OOP の中心的な概念

1.オブジェクト

オブジェクトは OOP の構(gòu)成要素です。 JavaScript では、オブジェクトはキーと値のペアのコレクションです。

例: オブジェクトの作成

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

---

2.クラス

クラスはオブジェクトを作成するための設(shè)計(jì)図です。データと動(dòng)作をカプセル化します。 JavaScript は ES6 で class キーワードを?qū)毪筏蓼筏俊?/p>

例: クラスの作成

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

---

3.カプセル化

カプセル化とは、一部のコンポーネントへの直接アクセスを制限しながら、データとメソッドを一緒にバンドルすることを意味します。 JavaScript は、パブリック、プライベート、および保護(hù)されたメンバーを使用してこれを?qū)g現(xiàn)します。

プライベートフィールド

プライベート フィールドは # 接頭辭で示され、クラス內(nèi)でのみアクセスできます。

例: プライベートフィールド

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

---

4.継承

継承により、extends キーワードを使用して、あるクラスが別のクラスからプロパティとメソッドを継承できます。

例: 継承

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

---

5.ポリモーフィズム

ポリモーフィズムにより、サブクラスは親クラスのメソッドをオーバーライドして特定の実裝を提供できます。

例: メソッドのオーバーライド

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

---

6.抽象化

抽象化は、実裝の複雑さを隠しながら、重要な詳細(xì)のみを公開(kāi)することに重點(diǎn)を置いています。 JavaScript にはネイティブに抽象クラスがありませんが、それらをシミュレートすることができます。

例: 抽象化のシミュレーション

class Animal {
  constructor(name) {
    if (this.constructor === Animal) {
      throw new Error("Abstract class cannot be instantiated directly.");
    }
    this.name = name;
  }

  makeSound() {
    throw new Error("Abstract method must be implemented.");
  }
}

class Dog extends Animal {
  makeSound() {
    return "Bark!";
  }
}

const dog = new Dog("Buddy");
console.log(dog.makeSound()); // Output: Bark!
// const animal = new Animal("Some Animal"); // Error: Abstract class cannot be instantiated directly.

---

7.プロトタイプとプロトタイプ チェーン

JavaScript はプロトタイプベースの言語(yǔ)です。すべてのオブジェクトには、そのプロトタイプと呼ばれる別のオブジェクトへの內(nèi)部リンクがあります。

例: プロトタイプチェーン

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

---

8.オブジェクトの構(gòu)成と継承

継承を使用する代わりに、機(jī)能を組み合わせてオブジェクトを構(gòu)成できます。このアプローチにより、深い継承階層の複雑さが回避されます。

例: 構(gòu)成

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

---

OOP の主要原則

1. DRY (繰り返さない): クラスと継承を通じてコードを再利用します。
2. SOLID Principles: スケーラブルで保守可能な OOP コードを作成するためのベスト プラクティスに従います。

---

実際の例: ユーザー管理システム

ステップ 1: 基本クラスを定義する

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

ステップ 2: 機(jī)能を拡張する

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

ステップ 3: インスタンスを作成する

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

---

練習(xí)課題

1. 図書館管理システムのクラス階層を作成します。
2. 殘高用のプライベート フィールドと入出金用のパブリック メソッドを備えた BankAccount クラスを?qū)g裝します。
3. ポリモーフィズムを示す Car や Bike などのサブクラスを含む Vehicle クラスを作成します。

---

結(jié)論

JavaScript の OOP は、クリーンでモジュール化された再利用可能なコードを作成するための強(qiáng)力な方法を提供します。クラス、継承、カプセル化、ポリモーフィズムなどの概念を習(xí)得すると、スケーラブルなアプリケーションを構(gòu)築するための準(zhǔn)備が整います。実験を続けてこれらの概念を現(xiàn)実世界の問(wèn)題に適用して、理解を深めてください。

明日のトピック: JavaScript の 非同期プログラミング について、コールバック、Promise、async/await について詳しく説明します。乞うご期待!

以上がJavaScript でのオブジェクト指向プログラミング (OOP) の探索の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。