JavaScript에서 객체지향 프로그래밍(OOP)을 지배하세요.

소개

객체 지향 프로그래밍(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. 싱글톤 패턴:
싱글톤은 클래스에 인스턴스가 하나만 있는 디자인 패턴입니다. 구성이나 애플리케이션 상태와 같이 전역적으로 액세스 가능한 객체를 생성하는 데 유용합니다.

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. 관찰자 패턴:
관찰자 패턴은 한 개체(주체)의 변경 사항이 다른 개체(관찰자)에 대한 알림으로 이어지는 종속 관계를 정의합니다.

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 사용: 이렇게 하면 불변 객체가 실수로 수정되는 것을 방지할 수 있습니다.

끝에서

OOP에 대한 JavaScript의 접근 방식은 프로토타입 기반 상속과 기존 OOP를 결합한 유연한 하이브리드 모델을 제공합니다. 클래스 및 비공개 필드와 같은 ES6의 발전을 통해 JavaScript를 사용하면 개발자는 깔끔한 코드 구조를 유지하면서 복잡한 애플리케이션을 구축할 수 있습니다. JavaScript로 OOP를 마스터하면 실제 애플리케이션을 위한 확장 가능하고 유지 관리가 가능하며 성능이 뛰어난 코드를 구축할 수 있습니다.

---

내 개인 웹사이트: https://shafayet.zya.me

---

당신을 위한 밈???

위 내용은 JavaScript에서 객체지향 프로그래밍(OOP)을 지배하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!