JavaScript에서 객체지향 프로그래밍(OOP) 살펴보기

JavaScript에서 객체지향 프로그래밍(OOP) 살펴보기

날짜: 2024년 12월 17일

객체 지향 프로그래밍(OOP)은 객체를 사용하여 실제 엔터티를 모델링하는 패러다임입니다. 다목적 프로그래밍 언어인 JavaScript는 프로토타입, ES6 클래스 및 최신 기능 향상을 통해 OOP에 대한 강력한 지원을 제공합니다. 오늘은 JavaScript에서 OOP의 원리와 기능에 대해 자세히 알아보겠습니다.

---

자바스크립트 OOP 핵심 개념

1. 객체

객체는 OOP의 구성 요소입니다. 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. 수업

클래스는 객체 생성을 위한 청사진입니다. 데이터와 동작을 캡슐화합니다. JavaScript는 ES6에서 class 키워드를 도입했습니다.

예: 클래스 생성

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는 공개, 비공개 및 보호 멤버를 사용하여 이를 달성합니다.

비공개 필드

비공개 필드는 # 접두사로 표시되며 클래스 내에서만 액세스할 수 있습니다.

예: 비공개 필드

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. 상속

상속을 통해 한 클래스는 확장 키워드를 사용하여 다른 클래스의 속성과 메서드를 상속받을 수 있습니다.

예: 상속

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. 추상화

추상화는 구현 복잡성을 숨기면서 필수적인 세부 정보만 노출하는 데 중점을 둡니다. 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는 프로토타입 기반 언어입니다. 모든 객체에는 프로토타입이라는 다른 객체에 대한 내부 링크가 있습니다.

예: 프로토타입 체인

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

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

---

8. 객체 구성과 상속

상속을 사용하는 대신 기능을 결합하여 객체를 구성할 수 있습니다. 이 접근 방식은 깊은 상속 계층 구조의 복잡성을 방지합니다.

예: 구성

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 원칙: 확장 가능하고 유지 관리가 가능한 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단계: 기능 확장

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

---

연습 과제

1. 도서관 관리 시스템을 위한 클래스 계층 구조를 만듭니다.
2. 잔액을 위한 프라이빗 필드와 입금 및 출금을 위한 퍼블릭 메서드가 있는 BankAccount 클래스를 구현합니다.
3. 다형성을 보여주는 Car 및 Bike와 같은 하위 클래스를 사용하여 Vehicle 클래스를 작성합니다.

---

결론

JavaScript의 OOP는 깨끗하고 모듈식이며 재사용 가능한 코드를 작성하는 강력한 방법을 제공합니다. 클래스, 상속, 캡슐화, 다형성과 같은 개념을 숙지하면 확장 가능한 애플리케이션을 구축할 수 있는 준비를 갖추게 됩니다. 이러한 개념을 계속 실험하고 실제 문제에 적용하여 이해를 확고히 하세요!

내일 주제: JavaScript의 비동기 프로그래밍을 살펴보고 콜백, Promise 및 async/await에 대해 자세히 알아보겠습니다. 계속 지켜봐주세요!

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