JavaScript のオブジェクト指向プログラミング (OOP) を支配します。-jsチュートリアル-php.cn

JavaScript のオブジェクト指向プログラミング (OOP) を支配します。

Mary-Kate Olsen

リリース： 2024-11-09 06:38:02

オリジナル

731 人が閲覧しました

導入

オブジェクト指向プログラミング (OOP) は、適切に構造化されたモジュール式の再利用可能なコードを構築するための基礎です。 JavaScript は当初は手続き型でしたが、ES6 以降では OOP の構文が導入され、関数型パラダイムとオブジェクト指向パラダイムの両方を習得するのに理想的な言語になりました。この記事では、クラス、継承、ポリモーフィズム、抽象化などの JavaScript の基本的な OOP 概念と、プロトタイプの継承やオブジェクトの合成などの JavaScript 固有の機能について説明します。

JavaScript における OOP の主要な概念

1.カプセル化:
カプセル化により、オブジェクト内のデータとメソッドをグループ化し、オブジェクトの状態への直接アクセスを制限できます。これにより、データが意図しない変更から保護され、制御された操作が可能になります。

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
        this._engineOn = false;
    }

    startEngine() {
        this._engineOn = true;
        console.log(`${this.make} ${this.model} engine started.`);
    }

    stopEngine() {
        this._engineOn = false;
        console.log(`${this.make} ${this.model} engine stopped.`);
    }
}

const myCar = new Car("Toyota", "Corolla");
myCar.startEngine(); // Output: Toyota Corolla engine started.

ログイン後にコピー

2.継承:
継承により、親クラスに基づいて子クラスを作成できるようになり、コードの再利用と階層の定義が可能になります。

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const myDog = new Dog("Max");
myDog.speak(); // Output: Max barks.

ログイン後にコピー

3.ポリモーフィズム:
ポリモーフィズムにより、異なるクラスが同じ関数またはメソッド呼び出しに応答できるようになります。 JavaScript はメソッドのオーバーライドを通じてポリモーフィズムを実現します。

class Printer {
    print() {
        console.log("Printing document...");
    }
}

class PDFPrinter extends Printer {
    print() {
        console.log("Printing PDF document...");
    }
}

const printer = new Printer();
const pdfPrinter = new PDFPrinter();

printer.print(); // Printing document...
pdfPrinter.print(); // Printing PDF document...

ログイン後にコピー

4.抽象化:
抽象化は、必要な部分だけを露出させることで複雑なシステムを単純化します。 ES2020 では # を含むプライベートフィールドが導入され、クラス内でのカプセル化が可能になりました。

class Account {
    #balance;
    constructor(initialBalance) {
        this.#balance = initialBalance;
    }
    deposit(amount) {
        this.#balance += amount;
    }
    getBalance() {
        return this.#balance;
    }
}

const myAccount = new Account(1000);
myAccount.deposit(500);
console.log(myAccount.getBalance()); // Output: 1500

ログイン後にコピー

JavaScript におけるプロトタイプベースの継承

JavaScript はプロトタイプベースです。つまり、オブジェクトはクラスではなく他のオブジェクトから直接継承できます。これは、他のオブジェクトがメソッドやプロパティを継承するオブジェクトであるプロトタイプを通じて実現されます。

function Vehicle(type) {
   this.type = type;
}

Vehicle.prototype.start = function() {
   console.log(`${this.type} is starting.`);
};

const car = new Vehicle("Car");
car.start(); // Car is starting.

ログイン後にコピー

継承よりも構成

合成は、階層内にクラスを作成する代わりに、必要な機能を実現するために、より小さく再利用可能なオブジェクトを含むオブジェクトを作成する、継承の代替手段です。

const canFly = {
   fly() {
       console.log("Flying!");
   }
};

const canSwim = {
   swim() {
       console.log("Swimming!");
   }
};

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

Object.assign(Fish.prototype, canSwim);

const fish = new Fish("Nemo");
fish.swim(); // Swimming!

ログイン後にコピー

JavaScript の高度な OOP パターン

1.工場出荷時のパターン:
ファクトリパターンは、正確なクラスを指定せずにオブジェクトを作成する設計パターンです。これは、オブジェクトの作成ロジックをカプセル化するのに役立ちます。

function createUser(name, role) {
    return {
        name,
        role,
        describe() {
            console.log(`${this.name} is a ${this.role}`);
        }
    };
}

const admin = createUser("Alice", "Administrator");
admin.describe(); // Alice is an Administrator

ログイン後にコピー

2.シングルトンパターン:
シングルトンは、クラスにインスタンスが 1 つだけある設計パターンです。これは、構成やアプリケーションの状態など、グローバルにアクセス可能なオブジェクトを作成するのに役立ちます。

const Singleton = (function () {
    let instance;
    function createInstance() {
        return new Object("I am the instance");
    }
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // true

ログイン後にコピー

3.オブザーバーパターン:
オブザーバーパターンは、1 つのオブジェクト (サブジェクト) の変更が他のオブジェクト (オブザーバー) への通知につながる依存関係を定義します。

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
        this._engineOn = false;
    }

    startEngine() {
        this._engineOn = true;
        console.log(`${this.make} ${this.model} engine started.`);
    }

    stopEngine() {
        this._engineOn = false;
        console.log(`${this.make} ${this.model} engine stopped.`);
    }
}

const myCar = new Car("Toyota", "Corolla");
myCar.startEngine(); // Output: Toyota Corolla engine started.

ログイン後にコピー

課題とベストプラクティス

1.継承の過剰使用の回避: 柔軟性と再利用を向上させるために、合成を優先します。
2.副作用の最小限化: 意図しない変更を防ぐためにデータをカプセル化したままにします。
3. Object.freeze の使用: これにより、不変オブジェクトの誤った変更が防止されます。

最後に

JavaScript の OOP へのアプローチは、プロトタイプベースの継承と古典的な OOP を組み合わせた柔軟なハイブリッドモデルを提供します。クラスやプライベートフィールドなどの ES6 の進歩により、開発者は JavaScript を使用して、クリーンなコード構造を維持しながら複雑なアプリケーションを構築できます。 JavaScript で OOP をマスターすると、実際のアプリケーション向けにスケーラブルで保守性が高く、パフォーマンスの高いコードを構築できます。

私の個人ウェブサイト: https://shafayet.zya.me

あなたのためのミーム???

Dominate Object-Oriented Programming (OOP) in JavaScript.