프로토타입(Prototype), 그 첫 번째 이야기

자바스크립트는 프로토타입 기반의 언어이죠. 클래스 기반과 비교하면 꽤나 독특한 개념으로 한번 뽀개봅시다!!!

자바스크립트는 함수형 프로그래밍 언어이자 프로토타입 기반의 언어입니다.

 

함수형 프로그래밍이라는 문맥은 추측이 쉽지만, 프로토타입 기반의 언어라는 것은 무슨 의미일까요?

 

프로토타입이라는 용어는 '상속'과 연관되어 있습니다.

 

클래스 기반의 언어에서는 상속은 익숙하지만, 자바스크립트에서의 '상속'을 어떻게 표현할까?

 

바로, 프로토타입을 사용함으로써 상속과 비슷한 효과를 얻어냅니다.

 

이로써, 어떤 객체를 원형(prototype)으로 삼고 이를 참조(복제)함으로써 상속처럼 사용할 수 있습니다.

프로토타입 도식

"new 연산자로 Constructor를 호출하면 instance가 만들어지는데,

이 instance의 생략 가능한 프로퍼티인 __proto__는 Constructor의 prototype을 참조합니다."

 

 

위 문맥을 조금 자세히 살펴보시죠..!!

• A라는 생성자 함수(Constructor)를 new 연산자와 함께 호출합니다.

• A에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성됩니다.

• 이때, 인스턴스에는 __proto__라는 프로퍼티가 자동으로 부여됩니다.
  ※ __proto__ : 더너 프로토, dunder proto(double underscope proto)라고 부름.

• 이 프로퍼티는 Contructor의 prototype이라는 프로퍼티를 참조합니다.
  
  

이제 아래의 예제를 분석해보시죠 ㅎㅎ..

var Person = function(name, age, gender) {
    this._name = name;
    this._age = age;
    this._gender = gender;
}
Person.prototype.getName = function() {
    return this._name;
}

var codify = new Person('Codify', 28, 'undefined');

console.log(Object.getPrototypeOf(codify));	// Person { getName: [Function] }
console.log(codify.__proto__.getName());	// undefined
console.log(codify.getName());			// Codify

먼저, new Person 생성자 함수를 통해 codify라는 인스턴스가 생성됩니다.

 

Instance codify __proto__가 Contructor의 prototype 프로퍼티를 참조하므로 서로 같은 객체를 바라봅니다.

 

위 실행결과로 주목할 것은 codify.__proto__. getName()와 codify.getName()입니다.

 

분명, __proto__ 는 prototype을 참조한다고 했는데, 왜 undefined 일까요?

 

오류도 나지 않은 것을 보면 무엇인가 참조하고 있다는 겁니다.

 

이때, this의 개념을 회상하셔야 합니다. 메서드로서의 호출은 함수 바로 앞 객체를 this로 담아두죠. 

 

그래서, this는 codify.__proto__ 를 바라보게 되는 겁니다.

 

codify.getName()의 결과를 보시면 원하는 결과가 제대로 나온 것을 확인하실 수 있습니다.

 

이런 결과의 이유는 바로 '__proto__는 생략 가능한 프로퍼티' 이기 때문입니다.

 

원래부터 생략 가능하도록 정의됐고, 이를 바탕으로 자바스크립트 전체 구조가 구성되어 있습니다.

 

아래의 예제를 보시면 쉽게 파악하실 수 있습니다.

var arr = [1,2,3]
console.dir(Array);
console.dir(arr);

위의 간단한 코드의 결과를 확인하면, 다음과 같이 나오게 됩니다.

 

arr은 Array 생성자 함수를 원형으로 삼아 생성되었음을 첫 번째 줄에서 파악하실 수 있습니다.

 

여기서, 주의 깊게 보셔야 할 부분이 있습니다.

 

Array 생성자 함수에서 prototype 밖에 선언된 isArray, from, of 등의 메서드를 arr에서 볼 수 없습니다.

 

이들은 Array 생성자 함수에서 직접 접근해야 실행이 가능합니다.

Array.isArray(arr); // true
arr.isArray() 	// TypeError: ....

위 예제를 통해 프로토타입에 대해 좀 이해가 되시나요? 그럼 다행입니다 : ) 

 

 

 

 

프로토타입은 상당히 중요한 개념은 2장에 걸쳐서 정리하겠습니다 ^^
"프로토타입(Prototype), 그 두 번째 이야기"

 

 

 

 

 

 

 

[출처] '코어 자바스크립트 - 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍', 정재남 지음