[JavaScript] 프로토타입(prototype)_1편

프로토타입 (prototype)

---

현생에 치이고, 5월의 연휴를 즐기다보니 너무 오랜만에 공부를 하게 되었습니다 ^^;

이번주부터는 열심히 포스팅할 예정입니다! 

오늘은 프로토타입에 대해 정리하려고 합니다. 

 

JavaScript 는 프로토타입 (prototype) 기반 언어입니다. 

클래스 기반 언어에서는 '상속' 을 사용하지만 프로토타입 기반 언어에서는

어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻습니다. 

 

프로토타입의 개념을 이해해봅시다. 

아래 그림은 프로토타입의 도식입니다. 

 

프로토타입 도식

어떤 생성자 함수 (Contructor)를 new 연산자와 함께 호출하면

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

instance 에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데 

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

※ __proto__ : dunder proto(던더 프로토) 로서, double underscore proto 이다. 

 

prototype 이라는 프로퍼티와 __proto__ 라는 프로퍼티가 프로토타입 개념의 핵심입니다.

prototype  객체 내부에는 인스턴스가 사용할 메서드를 저장합니다. 

내부에 메서드를 저장하게 되면, 인스턴스에서도 숨겨진 프로퍼티인 __proto__ 를 통해 

이 메서드들에 접근할 수 있게 되는 것이죠.

 

new 연산자로 Contructor 를 호출하면 instance 가 만들어지는데, 이 instance 의 생략가능한 프로퍼티인 

__proto__ 는 Contructor 의 prototype 을 참조합니다

 

예제를 통해 확인해볼까요??

var Person = function (name) {
  this._name = name;
};
Person.prototype.getName = function () {
  return this._name;
};

var miffy = new Person("Miffy");
console.log(miffy.__proto__.getName()); // undefined
console.log(miffy);                     // Person {_name: "Miffy"}
console.log(miffy.getName());           // Miffy

 

위 코드에서 중요한 것은 undefined 가 나고, '에러가 나지 않았다' 라는 점입니다. 

어던 변수를 실행하여 undefined 가 나온 것은 해당 변수가 '호출할 수 있는 함수' 에 해당한다는 것을 의미합니다.

__proto__ 타입을 빼고, miffy.getName() 을 사용해도 에러없이 잘 실행되는 것은 왜 그럴까요?

바로 __proto__ 가 생략 가능한 프로퍼티이기 때문입니다. 

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

__proto__ 를 생략하지 않으면 this 는 miffy.__proto__ 를 가리키고, 생략하면 miffy 를 가리킵니다. 

miffy.__proto__ 에 있는 메서드인 getName 을 실행하지만 this 는 miffy 를 바라보게 할 수 있는 것입니다. 

 

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

위 코드를 크롬 개발자도구에서 실행합니다. 

 

왼쪽은 arr 변수 출력, 오른쪽은 생성자 함수인 Array 를 출력한 결과입니다. 

arr 에서 Array 라는 생성자 함수를 원형(prototype) 으로 삼아 생성된 것을 확인할 수 있습니다.

__proto__ 를 열어보면 우리가 JavaScript 에서 흔히 사용하는 push, pop, slice, concat 등이 모두 들어있죠.

오른쪽 Array 를 보니 여기도 __proto__ 타입이 동일한 구조로 되어 있는 것을 알 수 있습니다. 

Array 의 prototype 프로퍼티 내부에 없는 from, isArray 등의 메서드들은 인스턴스가 직접 호출할 수 없으므로 

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

 

프로토타입 내용은 1, 2 편으로 나누어 작성할 예정입니다. 

2편은 다음에 계속 작성하겠습니다 : )

 

 

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