[JavaScript] 프로토타입(prototype)이란?

🤔 프로토타입을 아시나요? 

 

Javascript에서는 객체를 상속하기 위해 프로토타입이라는 방식을 사용합니다. 

 

자바스크립트는 흔히 프로토타입 기반 언어라 불립니다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. 

 

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

 

자바스크립트에서는 객체 인스턴스와 프로토타입 간에 연결이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색합니다. 

 

 

다음과 같은 생성자 함수를 하나 정의해보겠습니다.

function Person(first, last, age, gender, interests){
    // 속성과 메소드 정의
    this.first = first;
    this.last = last;
    // . . .
}

생성자 함수를 이용해 인스턴스도 하나 만들어보겠습니다.

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

 

자바스크립트 콘솔에서 "person1." 을 치게 되면 브라우저는 아래처럼 해당 객체의 멤버 이름을 자동완성 팝업으로 보여줄 것입니다. 

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

 

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

person1.valueOf();

1) 브라우저는 우선 person1 객체가 valueOf( ) 메소드를 가지고 있는지 체크합니다.

2) 없으므로 person1의 프로토타입 객체 (Person( ) 생성자의 프로토타입)에 valueOf( ) 메소드가 있는지 체크합니다.

3) 여전히 없으므로 Person() 생성자의 프로토타입 객체의 프로토타입 객체 (Object( ) 생성자의 프로토타입)가 valueOf( ) 메소드를 가지고 있는지 체크합니다. 여기에 있으니 호출하며 끝납니다.

 

 

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

 

 

 

🤔 프로토타입 속성 : 상속받은 멤버들이 정의된 곳

 

그럼 상속받은 속성과 메소드들은 어디에 정의되어 있을까요?

object 레퍼런스 페이지에 가시면 좌측에 수많은 속성과 메소드들이 나열되어 있는 것을 볼 수 있습니다.

위 스크린샷에서 person1가 상속받은 멤버들보다 훨씬 맍죠. 일부는 상속되었지만 나머지는 아니네요. 왜일까요?

 

정답은...

상속받은 멤버들은 prototype 속성에 정의되어 있기 때문입니다.

Object. 로 시작하는게 아니라, Object.prototype. 으로 시작하는 것들이죠. prototype 속성도 하나의 객체이며 프로토타입 체인을 통해 상속하고자 하는 속성과 메소드를 담아두는 버킷으로 주로 사용되는 객체입니다.

 

그래서 Object.prototype.watch( ), Object.prototype.valueOf( ) 등등은, 생성자를 통해 새로 생성되는 인스턴스는 물론 Object.prototype 을 상속받는 객체라면 어떤 객체에서든지 접근할 수 있습니다. 

 

Object.is( ), Object.keys( ) 등 prototype 버킷에 정의되지 않은 멤버들은 상속되지 않습니다. 이것들은 Object( ) 생성자에서만 사용할 수 있는 멤버들이죠.

 

 

JavaScript 전반에 걸쳐 프로토타입 체인 상속이 어떻게 구성되어 있는지 확인할 수 있습니다. 

전역객체인 String, Date, Number, Array의 프로토타입에 정의된 메소드와 속성들을 체크해보세요. 이 프로토타입 객체들에는 이미 많은 수의 메소드가 정의되어 있으며 이는 아래처럼 문자열 객체를 생성했을 때

var myString = 'This is my string.';

myString 인스턴스가 생성되는 즉시 split(), indexOf(), replace() 등의 문자열을 위한 유용한 메소드들을 사용할 수 있는 이유입니다.