JavaScript에서 객체지향 프로그래밍(OOP) 살펴보기-JS 튜토리얼-php.cn

Exploring Object-Oriented Programming (OOP) in JavaScript

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의 핵심 원칙

DRY(반복하지 마세요): 클래스와 상속을 통해 코드를 재사용합니다.
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

로그인 후 복사

연습 과제

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

결론

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

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

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