13-1. JavaScript 프로토타입(prototype)의 개념

I. 프로토타입 (prototype) 이란?

- 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어

- 오늘날에는 클래스가 더 널리 사용되지만, 사용하기에 따라 보다 강력하고 효율적

- 다시 함수형 프로그래밍으로 바뀌는 추세기도 하다. 

 

 

1. 자바스크립트의 모든 객체는 Prototype을 가짐

const obj = {};

console.log(obj);

- [[Prototype]]  펼쳐서 살펴볼 것

 

console.log(
  obj.toString()
);

- 빈 객체임에도 위의 메서드들이 사용 가능한 것은 프로토타입 때문!!

 

 

 

II. object - 모든것의 조상

- 아래 각 객체의 [[Prototype]] 의 [[Prototype]] 이 Object 임을 확인

- 각 [[Protoype]] 의 메서드들 확인

console.log(
  new String('')
);		// constructor: ƒ String()

console.log(
  []
);		// constructor : ƒ Array()

console.log(
  new Map()
);		// constructor : ƒ Map()

- constructor 항목에서 각각의 생성자 확인 가능

 

- 객체 리터럴( { } 등 )의 생성자는 Object() 임을 알 수 있음

console.log(
  {}
);

 

✨프로토타입 체인

- 특정 객체에 호출된 프로퍼티가 없다면 프로토타입을 거슬러 올라감

- 예 : Array에는 valueOf 가 없지만 그 프로토타입인 Object 에는 있으므로 호출 가능

 

 

 

III. 코드로 프로토타입에 접근하기

 

1. __proto__ 접근자 사용 - Object.prototype의 프로퍼티

- Deprecated : 사라질 기능, 사용 권장되지 않음.

console.log(
  {}.__proto__
);

console.log(
  new Number(2).__proto__
);

console.log(
  [1, 2, 3].__proto__
);

✨ 같은 종류는 프로토타입 공유

console.log(
  {}.__proto__ === { x: 1, y: 2 }.__proto__		// true
);

console.log(
  [1, 2, 3].__proto__ === [4, 5].__proto__		// true
);

console.log(
  new String('가나다').__proto__ === new String('ABC').__proto__		// true
);

✨ 최상위, 공통조상은 Object 임!!

 

 

2. Object.getPrototypeOf

- 수정할 때는 Object.setPrototypeOf 사용

- __proto__ 대신 이거 사용할 것

console.log(
  Object.getPrototypeOf({})
);

 

 

3. 생성자 함수에서는 prototype으로 프로토타입 접근 가능

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

// 인스턴스들에 공유될 프로토타입에 다음과 같이 접근
console.log(Person.prototype);

 

 

 

IV. 인스턴스 vs 프로토타입 프로퍼티

생성자 함수 정의

function HongChicken (name, no) {
  this.name = name;
  this.no = no;
  this.introduce = function () {
    return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
  }
}

const chain1 = new HongChicken('판교', 3);

// 본사에서 새 업무를 추가
HongChicken.prototype.introEng = function () {
  return `Welcome to Hong Chicken at ${this.name}!`;
};

console.log(chain1.introEng());
console.log(new HongChicken('강남', 17).introEng());

✨인스턴스의 로그를 펼쳐 각 함수가 속한 레벨 확인

console.log(chain1);

- introduce : 만들어지는 인스턴스마다 각각 있음

- introEng : 프로토타입에만 있음 - 메모리 절약

 

✨따라서, 메모리 사용을 최소화 하려면 아래와 같이 작성!!

function HongChicken (name, no) {
  this.name = name;
  this.no = no;
}

// 공통된 요소들은 프로토타입 프로퍼티로
HongChicken.prototype.titleEng = 'HongChicken';

HongChicken.prototype.introduce = function () {
  return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
}

HongChicken.prototype.introEng = function () {
  return `Welcome to ${this.titleEng} at ${this.name}!`;
};

const chain1 = new HongChicken('판교', 3);
const chain2 = new HongChicken('강남', 17);
const chain3 = new HongChicken('제주', 24);

console.log(chain1.introduce());
console.log(chain1.introEng());

// 인스턴스 레벨과 프로토타입 프로퍼티들 비교
console.log(chain1, chain2, chain3);

✨프로토타입 레벨의 함수를 인스턴스 레벨에서 덮어쓰기 가능!