프로토타입

프로토타입

프로토타입은 유전자라고 생각하면 쉽다.
부모(상위) 객체를 참조할 수 있고 새로운 객체를 생성할 수 있다.

function proto() {
  this.name = "guno";
  this.age = 26;
}

proto.prototype.home = "dongtan"; // prototype이라는 유전자 안에 home이라는 속성을 추가

let person = new proto(); // person은 proto의 자식이 된다.

console.log(person.home); // dongtan 자식은 부모의 유전자를 물려받으므로 부모 유전자에 있는 home을 가져다 사용할 수 잇다.

person은 proto 함수의 자식이라 생각할 수 있다. proto함수에 의해 생성되었기 때문이다.
proto 함수 안에는 home이라는 객체가 없지만 prototype을 통해 home을 생성할 수 있다.

Object에서 자료를 찾을 때
1. 직접 자료를 가지고 있으면 바로 출력
2. 없으면 부모 유전자(prototype)에서 찾아서 출력 (Prototype Chain)
3. 없으면 그 상위의 상위를 계속 찾아서 출력

프로토타입 예시

let arr = [5, 6, 1, 2, 3];
let arr = new Array(5, 6, 1, 2, 3); // new 키워드 옆에 Array를 선언하면 배열 자식을 생성해서 arr 변수에 담는다
arr.length();
arr.sort();

우리는 length와 sort를 직접 추가해준 적이 없다. 하지만 length와 sort를 사용할 수 있다.
그 이유는 부모 유전자에 기록이 되어있어서 사용할 수 있다.

MDN에서 보면 항상 Array옆에 prototype이 붙어있는데 Array의 유전자라고 생각하면 되고 우리가 항상 let Array자식 = new Array(3); 처럼 코드를 짤 때, Array자식에서 sort()를 선언하지 않아도 부모의 Array.prototype.sort()를 통해 가져와 사용할 수 있다.

프로토타입 효과적으로 사용해 보기

부모 객체를 이용하여 프로토타입 함수 정의

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

Animal.prototype.getSpecies = function () {
  return this.species || "dog";
};

function Dog(species) {}
Dog.prototype = new Animal();

const pome = new Animal("pomeranian");
const mal = new Dog("maltiz");
console.log(pome.getSpecies()); // pomeranian
console.log(mal.getSpecies()); // dog 

---

apply함수 사용을 통한 부모 생성자 빌리기

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

Animal.prototype.getSpecies = function () {
  return this.species || "dog";
};

function Dog(species) {
  Animal.apply(this, arguments); // apply함수 사용
}
Dog.prototype = new Animal();
Dog.prototype.setSpecies = function (species){
  this.species = species;
}

const pome = new Animal("pomeranian");
const mal = new Dog("maltiz");
console.log(pome.getSpecies()); // pomeranian
console.log(mal.getSpecies()); // maltiz

Object.create

기존 객체의 재활용

const dog = {
  species: "hound",
  getSpecies: function () {
    return this.species;
  },
};

const hound = Object.create(dog); //
hound.species = "하운드";

console.log(dog.getSpecies()); // hound
console.log(hound.getSpecies()); // 하운드

hound 변수는 dog를 복제해서 만들었다. hound의 부모 객체는 dog가 되어 getSpecies를 사용할 수 있다.

🔗 출처

프로그래머스 데브코스
프로토타입