>웹 프론트엔드 >JS 튜토리얼 >JavaScript의 객체 지향 프로그래밍(OOP): 종합 안내서

JavaScript의 객체 지향 프로그래밍(OOP): 종합 안내서

Barbara Streisand
Barbara Streisand원래의
2024-12-30 14:30:14903검색

Object-Oriented Programming (OOP) in JavaScript: A Comprehensive Guide

JavaScript의 객체 지향 프로그래밍(OOP)


1. 객체와 클래스

JavaScript에서 객체는 키-값 쌍(속성 및 메서드)의 모음입니다. 클래스는 객체를 생성하기 위한 청사진 역할을 합니다.

예:

// Define a class
class Person {
  constructor(name, age) {
    this.name = name; // Property
    this.age = age;
  }

  greet() { // Method
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Create an object
const person1 = new Person('Alice', 25);
person1.greet(); // Output: Hello, my name is Alice and I am 25 years old.

2. 캡슐화

캡슐화란 데이터(속성)와 데이터를 조작하는 메서드를 단일 단위(객체) 안에 묶는 것을 의미합니다. 개체의 특정 부분에 대한 직접적인 접근을 제한합니다.

예:

class BankAccount {
  #balance; // Private field

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500
// console.log(account.#balance); // Error: Private field '#balance' not accessible

3. 상속

상속을 통해 클래스는 다른 클래스의 속성과 메서드를 상속받을 수 있습니다. 기존 코드를 재사용하는 데 도움이 됩니다.

예:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

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

const dog = new Dog('Buddy');
dog.speak(); // Output: Buddy barks.

4. 다형성

다형성이란 여러 형태를 갖는다는 뜻입니다. OOP에서는 하위 클래스의 메소드가 상위 클래스의 메소드와 동일한 이름을 가지지만 다르게 동작하도록 허용합니다.

예:

class Shape {
  area() {
    return 0;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }
  area() {
    return this.width * this.height;
  }
}

const shape = new Shape();
const rectangle = new Rectangle(10, 5);

console.log(shape.area());       // 0
console.log(rectangle.area());   // 50

5. 추상화

추상화는 코드의 복잡성을 숨기고 사용자에게 꼭 필요한 부분만 보여줍니다.

예:

class Vehicle {
  startEngine() {
    console.log('Engine started');
  }
}

class Car extends Vehicle {
  drive() {
    console.log('Driving the car...');
  }
}

const car = new Car();
car.startEngine(); // Engine started
car.drive();       // Driving the car...

6. 정적 메서드 및 속성

정적 메서드와 속성은 인스턴스가 아닌 클래스 자체에 속합니다.

예:

class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(5, 3)); // 8

7. 프로토타입

JavaScript는 객체가 다른 객체로부터 속성과 메소드를 상속할 수 있는 프로토타입 기반 상속 모델을 사용합니다.

예:

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person = new Person('Alice');
person.greet(); // Hello, my name is Alice

주요 시사점

  1. 클래스를 사용하여 개체에 대한 청사진을 만듭니다.
  2. #을 사용하여 비공개 필드로 속성을 캡슐화합니다.
  3. 코드를 재사용하려면 상속(확장)을 사용하세요.
  4. 다형성에 대한 재정의 방법.
  5. 추상화를 사용하여 상호작용을 단순화합니다.
  6. 정적 메서드와 프로토타입 상속을 활용하세요.

JavaScript의 OOP 기능을 통해 개발자는 깔끔하고 모듈식이며 재사용 가능한 코드를 작성할 수 있습니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.