導(dǎo)入

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

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

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

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.ポリモーフィズム:
ポリモーフィズムにより、異なるクラスが同じ関數(shù)またはメソッド呼び出しに応答できるようになります。 JavaScript はメソッドのオーバーライドを通じてポリモーフィズムを?qū)g現(xiàn)します。

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 では # を含むプライベート フィールドが導(dǎo)入され、クラス內(nèi)でのカプセル化が可能になりました。

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 はプロトタイプベースです。つまり、オブジェクトはクラスではなく他のオブジェクトから直接継承できます。これは、他のオブジェクトがメソッドやプロパティを継承するオブジェクトであるプロトタイプを通じて実現(xiàn)されます。

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.

継承よりも構(gòu)成

合成は、階層內(nèi)にクラスを作成する代わりに、必要な機(jī)能を?qū)g現(xiàn)するために、より小さく再利用可能なオブジェクトを含むオブジェクトを作成する、継承の代替手段です。

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.工場(chǎng)出荷時(shí)のパターン:
ファクトリ パターンは、正確なクラスを指定せずにオブジェクトを作成する設(shè)計(jì)パターンです。これは、オブジェクトの作成ロジックをカプセル化するのに役立ちます。

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 つだけある設(shè)計(jì)パターンです。これは、構(gòu)成やアプリケーションの狀態(tài)など、グローバルにアクセス可能なオブジェクトを作成するのに役立ちます。

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

最後に

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

---

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

---

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

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