24년 12월 17일 (화)

참고자료 :: https://poiemaweb.com/js-prototype (블로그)

교재 목차

function 붕어빵() {
  this.기본재료 = "밀가루";
}

붕어빵.prototype.굽기 = function () {
  console.log("붕어빵 구워지는 중");
};

const 슈크림붕어빵 = new 붕어빵();
// 새로 만들어질 객체들은 프로토타입의 기본 능력을 받고, 새로운 프로퍼티나 메서드를 추가로 가질 수 있다. (동적 추가가 가능하다)
슈크림붕어빵.추가재료 = "슈크림";
console.log(슈크림붕어빵); // {기본재료: "밀가루", 속재료: "슈크림"}

// 프로토 타입에 기능을 추가했기 때문에 이후 생성된 인스턴스도 그 기능을 가진다.
슈크림붕어빵.굽기(); // "붕어빵 구워지는 중"

<aside> <img src="/icons/document_orange.svg" alt="/icons/document_orange.svg" width="40px" />

(16장 p.225) 프로토타입 $^{prototype}$

프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체다.

프로토타입 개념 요약

구분 설명 활용 예시 장점 단점
프로토타입(Prototype) 객체가 속성과 메서드를 상속받는 데 사용되는 메커니즘.

모든 객체는 내부적으로 [[Prototype]]에 연결되어 있음. | 객체 생성 후 다른 객체의 메서드와 속성을 상속받음. | 코드 재사용성 증가. 객체 간 메서드 공유로 메모리 절약. | 상속 체인이 깊어질수록 성능 문제 발생 가능. | | __proto__ 접근자 프로퍼티

(p.264) | 객체의 내부 [[Prototype]]을 참조하는 접근자 프로퍼티.

상속 관계를 탐색하거나 부모 객체의 메서드 호출 가능. | obj.__proto__.method()로 부모 객체 메서드 호출. | 상속 구조 탐색 및 부모 객체 참조 쉬움. | 성능 저하 및 __proto__ 사용 비권장. | | prototype 속성 | 함수 객체에서만 제공되며, 생성된 객체가 공유할 메서드 및 속성을 정의하는 공간. | 생성자 함수의 prototype 속성을 사용해 공통 메서드 정의. | 메모리 절약 가능. 생성된 모든 인스턴스에서 동일 메서드 공유. | 모든 객체에 동일한 메서드 추가되므로 동적 변경 어려움. | | 프로토타입 체인 (p.285) | 객체의 속성을 탐색할 때 상속 관계를 따라 프로토타입 객체를 순차적으로 탐색하는 구조. | obj.property 호출 시 속성을 찾을 때까지 상위 프로토타입 탐색. | 여러 객체가 체인을 통해 상속 관계를 쉽게 형성 가능. | 깊은 체인은 속성 탐색 성능 저하 가능. | | 직접 상속Object.create() (p.299) | 명시적으로 프로토타입을 설정해 새 객체 생성. | Object.create(proto)로 상속 관계를 가진 객체 생성. | 클래스 없이 유연한 상속 관계 생성 가능. | 유지보수가 어려울 수 있음. |

19.1 객체지향 프로그래밍(p.260)


// 부모 객체 생성
// animal 객체는 'eat'이라는 메서드를 포함하고 있습니다.
// 이 객체는 자식 객체가 공통적으로 사용할 동작을 정의합니다.
const animal = {
  // 부모 객체의 메서드
  eat() {
    console.log("먹다"); // "먹다"를 출력합니다.
  },
};

// 자식 객체 상속
// dog 객체를 생성하며, 이 객체는 animal 객체를 프로토타입으로 설정합니다.
// 이렇게 하면 dog 객체는 animal 객체의 프로퍼티와 메서드를 상속받을 수 있습니다.
const dog = Object.create(animal);

// dog 객체에 고유의 메서드 추가
// bark 메서드는 dog 객체에만 존재하는 메서드입니다.
dog.bark = function () {
  console.log("멍멍"); // "멍멍"을 출력합니다.
};

// 부모 객체의 메서드 호출
// dog 객체에 eat 메서드가 없지만, 프로토타입 체인을 통해 animal 객체에서 eat 메서드를 찾습니다.
dog.eat(); // 출력: "먹다" (animal 객체에서 상속받은 메서드)

// dog 객체의 고유 메서드 호출
// bark 메서드는 dog 객체에 직접 정의되어 있으므로 바로 실행됩니다.
dog.bark(); // 출력: "멍멍" (dog 객체의 메서드)

주석에 대한 추가 설명:

  1. 부모 객체 정의: animal 객체는 공통적으로 사용할 기능을 정의하며, 상속의 기반이 되는 프로토타입 객체입니다.