>웹 프론트엔드 >JS 튜토리얼 >나의 React 여정: 15일차

나의 React 여정: 15일차

DDD
DDD원래의
2024-12-16 00:47:09567검색

My React Journey: Day 15

객체 지향 프로그래밍(OOP)
객체 지향 프로그래밍은 객체 개념을 기반으로 한 프로그래밍 패러다임입니다.

OOP 핵심 원칙
1.캡슐화:

  • 관련 변수와 함수를 하나의 개체로 그룹화합니다.
  • 함수에 더 적은 수의 매개변수를 사용하여 복잡성을 줄입니다. 예:
function Circle(radius) {
    this.radius = radius;
    this.draw = function() {
        console.log('draw');
    };
}
const circle = new Circle(5);
console.log(circle.radius); // Access encapsulated property
circle.draw(); // Call encapsulated method

2.추상화:

세부 사항과 복잡성을 숨겨 개체의 필요한 부분만 노출합니다.
인터페이스를 단순화하고 기본 코드 변경으로 인한 영향을 줄입니다.
예: 내부 논리를 숨기고 메서드를 추상화합니다.

3.상속:

클래스(하위)가 다른 클래스(상위)로부터 속성과 메서드를 상속하도록 허용합니다.
중복되는 코드를 줄입니다.
예:

class Animal {
    eat() {
        console.log("This animal is eating.");
    }
}
class Dog extends Animal {
    bark() {
        console.log("The dog is barking.");
    }
}
const dog = new Dog();
dog.eat(); // Inherited from Animal
dog.bark();

4.다형성:

다양한 형태를 취하는 물체를 말합니다.
다양한 개체 유형에 대한 통합 인터페이스를 허용하여 코드 재사용 및 유연성을 지원합니다.
예:

class Animal {
    sound() {
        console.log("This animal makes a sound.");
    }
}
class Dog extends Animal {
    sound() {
        console.log("The dog barks.");
    }
}
const animal = new Animal();
const dog = new Dog();
animal.sound(); // Output: This animal makes a sound.
dog.sound();    // Output: The dog barks.

OOP의 중요성

  • 캡슐화: 복잡성을 줄이고 재사용성을 높입니다.
  • 추상화: 구현 세부 정보를 숨기고 상호 작용을 단순화합니다.
  • 상속: 코드 중복을 제거하고 재사용을 촉진합니다.
  • 다형성: 유연성과 간소화된 코드 구조를 지원합니다.

실제 사례
클래스와 생성자

  • 객체를 생성하는 체계적이고 깔끔한 방법입니다.
  • 예:
class Product {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }

    displayProduct() {
        console.log(`Product: ${this.name}`);
        console.log(`Price: $${this.price.toFixed(2)}`);
    }

    calculateTotal(salesTax) {
        return this.price + this.price * salesTax;
    }
}

const product1 = new Product("Laptop", 1200);
product1.displayProduct();
console.log(`Total Price: $${product1.calculateTotal(0.1).toFixed(2)}`);

동물과의 상속

  • 재사용성과 메서드 재정의를 보여줍니다.
  • 예:
class Animal {
    eat() {
        console.log("This animal eats food.");
    }
}

class Bird extends Animal {
    fly() {
        console.log("This bird can fly.");
    }
}

const bird = new Bird();
bird.eat();
bird.fly();

반성
내가 배운 것:

  • 핵심 OOP 원칙: 캡슐화, 추상화, 상속, 다형성
  • 코드 복잡성을 줄이고 재사용성을 높이는 실제 사용 사례
  • 생성자, 메서드, 상속을 적용하여 실제 문제를 해결합니다.

OOP는 또 다른 수준입니다.

내일 또 갑니다!

위 내용은 나의 React 여정: 15일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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