지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

JavaScript OOP 개념: 클래스 기반 vs. 프로토타입 기반

Mary-Kate Olsen
풀어 주다： 2024-10-20 14:34:29
원래의
501명이 탐색했습니다.

JavaScript OOP Concepts: Class-Based vs. Prototype-BasedJavaScript의 객체 지향 프로그래밍(OOP) 개념과 프로토타입에 대한 자세한 블로그를 작성하기 위해 먼저 일류 함수를 살펴보겠습니다. -클래스 인스턴스, 상속, 다형성, 캡슐화 및 추상화. 클래스 기반 및 프로토타입 기반 접근 방식

JavaScript는

클래스 기반 OOP(ES6에서 도입됨)와 프로토타입 기반 OOP(JavaScript가 OOP를 처리한 원래 방식)를 모두 지원할 수 있다는 점에서 독특합니다. 이 블로그에서는 일급 함수, 일급 인스턴스, 상속, 다형성, 과 같은 주요 OOP 개념을 자세히 살펴보겠습니다. 캡슐화와 추상화 두 접근 방식을 모두 사용합니다.

1. 최고 수준의 기능

자바스크립트에서 함수는

일급 시민입니다. 즉, 기능은 다음과 같습니다.

    변수에 할당
    • 인수로 전달됨
    • 다른 기능에서 복귀
물론이죠! JavaScript의 기능적 접근 방식과 클래스 기반 접근 방식을 모두 사용하여

일급 함수와 일급 인스턴스를 모두 다루기 위해 블로그 게시물을 자세히 살펴보겠습니다. 이를 통해 객체 지향 프로그래밍(OOP)의 맥락에서 이러한 개념을 명확하게 이해할 수 있습니다.

기능적 접근

예: 일급 함수 

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Passing a function as an argument
function logGreeting(fn, name) {
  console.log(fn(name));
}

// Returning a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

logGreeting(greet, "John");  // Output: Hello, John!

const double = createMultiplier(2);
console.log(double(5));  // Output: 10
로그인 후 복사
로그인 후 복사
로그인 후 복사

설명:

    함수는 다른 값과 마찬가지로 저장, 전달 및 반환될 수 있으며
  • 최고급 함수를 보여줍니다.

클래스 기반 접근 방식

함수는 일급 시민이지만 유사한 동작을 모방하는 클래스를 만들 수도 있습니다.

예: 클래스 컨텍스트의 일급 함수 

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

  greet() {
    return `Hello, ${this.name}!`;
  }
}

// Logging greeting
class Logger {
  static logGreeting(greeter) {
    console.log(greeter.greet());
  }
}

// Using classes to demonstrate first-class functions
const greeter = new Greeter("John");
Logger.logGreeting(greeter); // Output: Hello, John!
로그인 후 복사
로그인 후 복사
로그인 후 복사

설명:

    Greeter 클래스는 다른 함수(예: logGreeting)에 전달할 수 있는 Greeting 메서드를 캡슐화하여 최고 수준의 함수와 유사한 동작을 보여줍니다.

2. 최고 수준의 인스턴스

객체나 클래스의 인스턴스도

일류 시민으로 처리될 수 있습니다. 변수에 할당하고, 인수로 전달하고, 컬렉션에 저장할 수 있습니다.

함수와 마찬가지로 객체나 클래스의 인스턴스도

일급 시민으로 처리될 수 있습니다. 다음과 같을 수 있습니다:

  • 변수에 할당
  • 인수로 전달됨
  • 함수에서 반환됨
  • 배열과 같은 컬렉션에 저장

기능적 접근

예: 일류 인스턴스 

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Passing a function as an argument
function logGreeting(fn, name) {
  console.log(fn(name));
}

// Returning a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

logGreeting(greet, "John");  // Output: Hello, John!

const double = createMultiplier(2);
console.log(double(5));  // Output: 10
로그인 후 복사
로그인 후 복사
로그인 후 복사

설명:

  • 여기서 myCar 및 yourCar는 Car 함수 생성자의 인스턴스입니다. 함수에 전달되어 변수에 저장될 수 있습니다.

클래스 기반 접근 방식

예: 클래스 컨텍스트의 일류 인스턴스 

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

  greet() {
    return `Hello, ${this.name}!`;
  }
}

// Logging greeting
class Logger {
  static logGreeting(greeter) {
    console.log(greeter.greet());
  }
}

// Using classes to demonstrate first-class functions
const greeter = new Greeter("John");
Logger.logGreeting(greeter); // Output: Hello, John!
로그인 후 복사
로그인 후 복사
로그인 후 복사

설명:

  • 이 예에서 myCar와 yourCar는 Car 클래스의 인스턴스이며 함수형 접근 방식과 마찬가지로 함수에 전달되어 조작될 수 있습니다.

3. 상속

클래스 기반 상속을 사용하면 확장 키워드를 사용하여 기존 클래스의 속성과 메서드를 상속하는 새 클래스를 만들 수 있습니다.

클래스 기반 예: 

function Car(make, model) {
  this.make = make;
  this.model = model;

  this.startEngine = function() {
    console.log(`${this.make} ${this.model} engine started.`);
  };
}

const myCar = new Car("Toyota", "Corolla");
const yourCar = new Car("Tesla", "Model 3");

// Passing instance as an argument
function showCarDetails(car) {
  console.log(`Car: ${car.make} ${car.model}`);
}

showCarDetails(myCar);  // Output: Car: Toyota Corolla
로그인 후 복사

프로토타입 기반 예: 

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  startEngine() {
    console.log(`${this.make} ${this.model} engine started.`);
  }
}

const myCar = new Car("Toyota", "Corolla");
const yourCar = new Car("Tesla", "Model 3");

// Passing instance as an argument
function showCarDetails(car) {
  console.log(`Car: ${car.make} ${car.model}`);
}

showCarDetails(myCar);  // Output: Car: Toyota Corolla
로그인 후 복사

설명:

  • 클래스 기반 상속은 확장을 사용하여 상위 클래스에서 상속하는 반면, 프로토타입 기반 상속은 Object.create를 사용하여 객체를 연결합니다.

4. 다형성

다형성을 사용하면 서로 다른 객체가 동일한 메소드의 자체 버전을 정의할 수 있으며, 이는 상위 유형의 객체에서 호출될 수 있습니다.

클래스 기반 예: 

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

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

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

const myDog = new Dog("Buddy");
myDog.speak();  // Output: Buddy barks.
로그인 후 복사

프로토타입 기반 예: 

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

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

function Dog(name) {
  Animal.call(this, name);  // Inherit properties
}

Dog.prototype = Object.create(Animal.prototype);  // Inherit methods
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
};

const myDog = new Dog("Buddy");
myDog.speak();  // Output: Buddy barks.
로그인 후 복사

설명:

  • 다형성을 사용하면 클래스 기반 객체와 프로토타입 기반 객체 모두 상위 유형에서 상속하면서 자체 버전의 말하기 메서드를 정의할 수 있습니다.

5. 캡슐화

캡슐화는 객체의 내부 세부 사항을 숨기고 필요한 것만 노출하는 것을 의미합니다. JavaScript에서는 클래스 기반 OOP에서 프라이빗 필드(# 포함)를 사용하거나 프로토타입 기반 OOP

에서 클로저를 사용하여 이를 달성합니다.

클래스 기반 예: 

class Animal {
  speak() {
    console.log("Animal makes a sound.");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Dog barks.");
  }
}

class Cat extends Animal {
  speak() {
    console.log("Cat meows.");
  }
}

const animals = [new Dog(), new Cat()];

animals.forEach(animal => animal.speak());
// Output:
// Dog barks.
// Cat meows.
로그인 후 복사

프로토타입 기반 예: 

function Animal() {}

Animal.prototype.speak = function() {
  console.log("Animal makes a sound.");
};

function Dog() {}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.speak = function() {
  console.log("Dog barks.");
};

function Cat() {}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.speak = function() {
  console.log("Cat meows.");
};

const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());
// Output:
// Dog barks.
// Cat meows.
로그인 후 복사

설명:

  • 클래스 기반 캡슐화는 비공개 필드(ES6에 도입됨)를 사용하여 데이터를 숨기는 반면, 프로토타입 기반 캡슐화는 클로저를 통해 개인정보 보호를 보장합니다.

6. 추상화

추상화는 복잡한 논리를 숨기고 필요한 세부정보만 노출합니다. 이는 내부 세부 사항을 추상화하고 필수 메소드를 노출함으로써 달성할 수 있습니다.

클래스 기반 예: 

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Passing a function as an argument
function logGreeting(fn, name) {
  console.log(fn(name));
}

// Returning a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

logGreeting(greet, "John");  // Output: Hello, John!

const double = createMultiplier(2);
console.log(double(5));  // Output: 10
로그인 후 복사
로그인 후 복사
로그인 후 복사

프로토타입 기반 예: 

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

  greet() {
    return `Hello, ${this.name}!`;
  }
}

// Logging greeting
class Logger {
  static logGreeting(greeter) {
    console.log(greeter.greet());
  }
}

// Using classes to demonstrate first-class functions
const greeter = new Greeter("John");
Logger.logGreeting(greeter); // Output: Hello, John!
로그인 후 복사
로그인 후 복사
로그인 후 복사

설명:

  • 두 가지 접근 방식 모두 배터리 잔량 관리의 복잡성을 요약하여 상호 작용에 필요한 방법만 노출합니다.

결론

JavaScript에서 클래스 기반과 프로토타입 기반 OOP의 차이점과 유사점을 이해하면 프로그래밍 기술이 향상됩니다. 일류 함수 및 인스턴스, 상속, 다형성, 캡슐화 및 추상화는 더 깔끔하고 유지 관리하기 쉬운 코드를 작성하는 데 활용할 수 있는 기본 개념입니다.

최신 클래스 기반 구문(ES6에 도입됨)이 다른 OOP 언어를 사용하는 개발자에게 더 읽기 쉽고 친숙한 반면, 프로토타입 기반 접근 방식은 JavaScript의 더 기본입니다. 근본적인 행동.

이 블로그에서는 핵심 OOP 개념인 일급 함수, 일급 인스턴스, 상속, 다형성, 캡슐화 및 추상화 — 두 패러다임 모두에서 달성할 수 있습니다. 클래스를 사용하든 프로토타입을 사용하든 JavaScript는 유연하고 강력한 방식으로 OOP를 구현할 수 있는 강력한 메커니즘을 제공합니다.

위 내용은 JavaScript OOP 개념: 클래스 기반 vs. 프로토타입 기반의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：자바스크립트의 약속 다음 기사：새로운 프로그래머를 위한 ust-Have VS 코드 확장: 기본을 뛰어넘는 도구
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1984
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2146
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1811
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1706
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1719
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿