[자바스크립트] 프로토타입(prototype) 정리

프로토타입이란?

• 기존의 객체를 상속받아 새로운 객체를 생성하는 방식
• 객체의 원형 즉 상속받은 부모객체를 말한다

 

프로토타입의 이해

1) 자바스크립트는 프로토타입을 기반으로 하는 프로그래밍 언어이다 (Java는 클래스 기반 객체지향 프로그래밍 언어)

2) 자바스크립트에서는 객체를 프로토타입이라는 방식(기존 객체에서 프로퍼티, 메서드를 상속받는 방식)으로 생성한다 

3) 프로토타입을 이해한다면 자바스크립트의 동작 원리를 이해할 수 있다

4) 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다

5) 연결된 부모 객체에서 프로퍼티, 메서드를 상속받을 수 있다

6) 부모 객체를 프로토타입 객체 줄여서 프로토타입이라고 한다

 

예제

amy라는 객체

• 2개의 프로퍼티: firstName, lastName
• 1개의 메서드: getFullName

const amy = {
  firstName: 'Amy',
  lastName: 'Winehouse',
  getFullName: function () {
    console.log(`${firstName} ${lastName}`);
  },
};

console.log(amy);

 

콘솔창에 amy라는 객체를 출력하면 다음과 같은 데이터가 출력된다

1. 두개의 프로퍼티: firstName, lastName

2. 한개의 메서드: getFullName

3. amy라는 객체의 부모 객체인 프로토타입: Object

 

즉 amy라는 객체는 자바스크립트 내부에서 이미 만들어진 Object라는 객체에서 상속받아 만들어진 새로운 객체다. 그러므로 amy는 자신이 가지고 있는 프로퍼티와 메서드외에도 부모 객체인 Object의 프로퍼티와 메서드에도 접근할 수 있다. Prototype 객체를 열어보 amy 객체가 접근할 수 있는 메서드와 프로퍼티의 종류를 알 수 있다.

 

amy라는 객체에 Object의 메서드인 toString()을 사용하였다.

console.log(amy.toString());

 

자바스크립트에서는 원시형 데이터 이외의 모든 데이터가 객체다.

• 원시형 데이터(Primitive Type): string, number, boolean, null, undefined, symbol
• 객체형 데이터(Objective Type): array, object, function

 

배열도 자바스크립트에서는 객체이므로 prototype을 가진다.

const arr = [35, 5, 10, 108, 2];
console.log(arr);

 

사용자가 만든 배열 arr은 부모 객체인 Array의 프로퍼티와 메서드에 접근할 수 있다.

console.log(arr.sort());

 

생성자 함수와 인스턴스

같은 프로퍼티와 메서드를 가지는 객체를 매번 만드는 것은 비효율적이다.

const amy = {
  firstName: 'Amy',
  lastName: 'Winehouse',
  getFullName: function () {
    console.log(`${firstName} ${lastName}`);
  },
};

const kurt = {
  firstName: 'Kurt',
  lastName: 'Cobain',
  getFullName: function () {
    console.log(`${firstName} ${lastName}`);
  },
};

const john = {
  firstName: 'John',
  lastName: 'Lennon',
  getFullName: function () {
    console.log(`${firstName} ${lastName}`);
  },
};

 

같은 프로퍼티와 메서드를 만들어주는 함수를 만들어서 필요한 객체를 그때 그때 만들어준다. 여기서 Profile은 새로운 객체를 만들어주는 생성자 함수라고 하고 amy, kurt, john은 생성자함수로 만들어준 새로운 객체인 인스턴스라고 부른다.

• 생성자 함수: new 연산자를 사용해 새로운 객체(인스턴스)를 생성하는 함수
• 인스턴스: 인스턴스는 생성자 함수를 사용해 생성된 객체

function Profile(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.getFullName = function () {
    console.log(`${firstName} ${lastName}`);
  };
}

const amy = new Profile('Amy', 'Winehouse');
const kurt = new Profile('Kurt', 'Cobain');
const john = new Profile('John', 'Lennon');

 

생성자 함수를 사용해 객체를 만들고 prototype으로 프로퍼티나 메서드를 추가한다면 자식 객체가 새로 추가된 프로퍼티나 메서드를 사용할 수 있다.

function Profile(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.getFullName = function () {
    console.log(`${firstName} ${lastName}`);
  };
}

const amy = new Profile('Amy', 'Winehouse');
const kurt = new Profile('Kurt', 'Cobain');
const john = new Profile('John', 'Lennon');

Profile.prototype.occupation = 'Singer-songwriter';

console.log(amy);

 

콘솔창에 객체 amy를 출력하면 생성자함수로 만든 프로퍼티와 메서드 그리고 후에 prototype으로 새로 만들어준 occupation이라는 프로퍼티도 포함되어 있다.

 

---

 

Reference

• 코딩애플: 이거보고 prototype 이해 못하면 강의접음
• poiemaweb: 5.14 Prototype 프로토타입