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

나의 React 여정: 15일차

Dec 16, 2024 am 12:47 AM

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으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

예제 색상 JSON 파일 예제 색상 JSON 파일 Mar 03, 2025 am 12:35 AM

예제 색상 JSON 파일

8 멋진 jQuery 페이지 레이아웃 플러그인 8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

8 멋진 jQuery 페이지 레이아웃 플러그인

10 JQuery Syntax Highlighter 10 JQuery Syntax Highlighter Mar 02, 2025 am 12:32 AM

10 JQuery Syntax Highlighter

자신의 Ajax 웹 응용 프로그램을 구축하십시오 자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

자신의 Ajax 웹 응용 프로그램을 구축하십시오

' this ' 자바 스크립트로? ' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

' this ' 자바 스크립트로?

10 JavaScript & JQuery MVC 자습서 10 JavaScript & JQuery MVC 자습서 Mar 02, 2025 am 01:16 AM

10 JavaScript & JQuery MVC 자습서

See all articles