[Day 20] 프로토 타입

프로토타입 (Prototype)

• 객체를 만들 때 마다 메소드를 새로 만들어서 넣는 것은 메모리를 굉장히 낭비하는 일이다.

• 비슷한 객체들이 서로 공유하는 속성을 한 곳에 모아두기 위해 사용하는 것이 프로토타입 이다.

• 어떤 객체에 프로토타입을 지정하면 프로토타입의 속성을 해당 객체에서 재사용할 수 있다.

• 객체의 프로토타입 지정 방법 (Object.create())

  const personPrototype = {
    introduce: function() {
      return `안녕하세요, 제 이름은 ${this.name}입니다.`;
    }
  };
    
  const person1 = Object.create(personPrototype); // 새 객체를 생성하고 프로토타입을 지정함
  person1.name = '윤아준';
    
  const person2 = Object.create(personPrototype);
  person2.name = '신하경';
    
  person1.introduce(); // 안녕하세요, 제 이름은 윤아준입니다.
  person2.introduce(); // 안녕하세요, 제 이름은 신하경입니다.
    
  person1.introduce === person2.introduce; // true
  

• 프로토타입 기능을 이용해 한 객체에서 다른 객체의 기능을 가져와 사용하는 것을 프로토타입 상속(prototype inheritance) 라고 한다.

• 프로토타입 읽고 쓰기

  • Object.getPrototypeOf : 어떤 객체의 프로토타입을 읽어오기 위해 사용하는 함수
  • Object.setPrototypeOf : 이미 생성된 객체의 프로토타입을 변경하기 위해 사용하는 함수(속도가 굉장히 느리기 때문에 사용 지양)
  • 객체 리터럴{} 을 통해 생성된 객체의 프로토타입에는 자동으로 Object.prototype이 지정된다.

• 프로토타입 체인 (Prototype Chain)

  • Javascript 엔진은 속성 접근자를 통해 어떤 객체의 속성을 확인할 때 프로토타입 체인을 전부 확인한다.
  • 어떤 객체에 찾는 속성이 없다면 프로토타입 객체의 속성까지 확인한다. (더 이상 프로토타입이 없다면 undefined를 반환)

  const obj1 = {
    a: 1
  };
    
  const obj2 = {
    b: 2
  };
    
  const obj3 = {
    c: 3
  };
    
  // `obj3 -> obj2 -> obj1` 과 같이 상속
  Object.setPrototypeOf(obj2, obj1);
  Object.setPrototypeOf(obj3, obj2);
    
  console.log(obj3.a); // `obj3`의 프로토타입의 프로토타입에 존재하는 속성 `a`의 값을 출력
  console.log(obj3.b); // `obj3`의 프로토타입에 존재하는 속성 `b`의 값을 출력
  console.log(obj3.c); // `obj3`에 존재하는 속성 `c`의 값을 출력
  

  • (Object).prototype.isPrototypeOf() : 어떤 객체가 다른 객체의 프로토타입 체인에 존재하는지 확인하기 위해 사용한다.

• 프로토타입의 간접적 변경

  • 어떤 객체의 속성을 변경하거나 속성을 삭제하는 일은 그 객체의 프로토타입에 아무런 영향을 미치지 않는다.
  • 자식 객체의 프로토타입 체인을 이용해 부모 객체의 속성을 변경하는 것은 절대로 불가능하다!!! (읽어오는 것만 가능하다..)

• 생성자와 프로토타입

  • 생성자를 통해 만들어낸 객체의 프로토타입에는 생성자의 prototype 속성에 저장되어 있는 객체가 자동으로 지정된다.
  • Javascript 에서는 function 구문을 통해 함수를 정의할 때 함수의 prototype 속성에 객체가 자동으로 생성되어 저장된다.

• 정적 메소드 (Static Method)

  • 생성자의 속성에 직접 지정된 메소드를 정적 메소드라고 한다.
  • 정적 메소드는 특정 인스턴스에 대한 작업이 아니라, 해당 생성자와 관련된 일반적인 작업을 정의하고 싶을 때 사용한다.

  // 생성자의 속성에 함수를 직접 할당합니다.
  Person.compareAge = function(person1, person2) {
    if (person1.age < person2.age) {
      return '첫 번째 사람의 나이가 더 많습니다.';
    } else if (person1.age === person2.age) {
      return '두 사람의 나이가 같습니다.';
    } else {
      return '두 번째 사람의 나이가 더 많습니다.';
    }
  }