[작성중]프로토타입(Prototype)

프로토타입

자바스크립트는 프로토타입 기반 언어

Java와 C++은 클래스 기반의 객체지향 언어인 반면, Javascript는 프로토타입 기반의 객체지향 언어이다. 모든 객체들이 메소드와 속성들을 상속 받기 위해 프로토타입 객체를 가진다.

클래스 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성한다. 하지만 프로토타입 기반의 객체지향 언어는 class 정의 없이도 객체를 생성할 수 있다. 물론 생성자 함수를 통해 class를 따라할 순 있지만, ES6부터는 정식으로 자바스크립트에서 class가 추가되었다.

 

프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있는데, 이를 프로토타입 체인(prototype chain)이라 부른다. 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 것이다.

상속되는 속성과 메소드들은 각 객체가 아니라, 객체의 생성자의 prototype 이라는 속성에 정의되어 있다.

 

프로토타입 객체 이해하기

아래는 생성자 함수를 정의하고, 인스턴스 하나를 만든 코드이다.

function Person(first, last, age, gender, interests) {
   this.first = first;
   this.last = last;
   this.age = age;
   this.gender = gender;
   this.interests = interests;
}

var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);

여기서 자바스크립트 콘솔에 "person1."을 작성하면 해당 객체의 멤버 이름들을 자동 완성 팝업으로 보여준다.

person1의 프로토타입 객체인 Person()에 정의된 멤버들(name, age, gender, interests, ...)을 볼 수 있다. 또한 Object에 정의된 다른 멤버들(watch, valueOf, ...)도 볼 수 있다. 이는 프로토타입 체인이 동작한다는 증거이다.

프로토타입 체인

그럼 Object에 정의되어 있는 메소드를 person1에서 호출하면 어떻게 될까?

person1.valueOf();

이 메소드는 호출된 객체의 값을 단순 반환한다. 

1. 브라우저는 우선 person1 객체가 valueOf() 메소드를 가지고 있는지 체크한다.
2. 없으므로 person1의 프로토타입 객체(=Person() 생성자의 프로토타입)에 valueOf() 메소드가 있는지 체크한다.
3. 여전히 없으므로 Person() 생성자의 프로토타입 객체의 프로토타입 객체(=Object() 생성자의 프로토타입)가 valueOf() 메소드를 가지고 있는지 체크한다. 여기에 있으니 호출하고 끝난다.

 ➡ 프로토타입 체인에서 한 객체의 메소드의 속성들이 다른 객체로 복사되는 것이 아니라, 체인을 타고 올라가며 접근한다.

 

 

---

참고 자료

Object prototypes - Web 개발 학습하기 | MDN

 

[JS] 프로토타입(Prototype) 객체