[JS Core]JavaScript 프로토타입 체이닝(Prototype Link, Prototype Object)

이전 편

JavaScript Core 객체편
JavaScript Core 함수편

이번편은 자바스크립트의 코어 중 코어인 프로토타입에 대한 내용을 다룰 예정입니다. 자바스크립트는 객체지향 언어입니다. 하지만 C++. JAVA, PHP와 같은 언어와 다르게 클래스가 없었습니다. ES6에 class가 있지만 이는 문법설탕 일뿐 내부적으로는 프로토타입을 통해 상속을 흉내는 건 마찬가지입니다. 때문에 class 기반언어라고 부르지 못하고 자바스크립트를 프로토타입 기반언어라고 부릅니다.

그렇다면 프로토타입이란 무엇이고 자바스크립트는 어떤 방식으로 상속을 하는지 내부 동작 원리에 대해서 알아봅시다.

Prototype

객체생성시 일어나는 일

앞선 객체편에서 설명했다시피 모든 함수는 객체입니다. 때문에 prototype 프로퍼티를 가지고 있습니다.
이를테면 아래 Car() 함수를 생성하고 console.dir()로 car.prototype과 car.prototype.constructor를 찍어보면 아래 화면과 같이 출력됩니다.

	function Car() {
		console.log('car');
    }
	console.dir(Car.prototype);
	console.dir(Car.prototype.constructor);

console.dir(Car.prototype);

• Car.prototype 객체는 constructor와 __proto__가 있습니다. 모든 객체는 __proto__ 속성을 가지고 있습니다. __proto__ 속성을 prototype 링크라고도 지칭합니다.

console.dir(Car.prototype.constructor);

• Car() 함수를 가리키고 있습니다.

결과를 그림으로 표현하면 아래와 같습니다.

여기서 중요한 핵심은 함수 객체와 프로토타입 객체는 서로를 바라보고 있다는 점(참조)입니다. 이 개념을 가지고 프로토타입 체이닝을 살펴보도록 하겠습니다.

프로토타입 체이닝(prototype chaining)

객체 생성

	function Car(name, wheels){
		this.name = name;
        this.wheels = wheels;
	}

	Car.prototype.gasoline = function(x){return x + '리터 만큼 충전완료'}

	//car 객체 생성
	var benz = new Car('banz', 4);
	var audi = new Car('audi', 4);

객체를 생성하면 아래 그림과 같이 Car() 생성자 함수와 프로토타입 객체도 함께 생성됩니다.

또한 new 키워드를 이용해 var benz = new Car('banz', 4); 와 var audi = new Car('audi', 4);benz 객체와 audi 객체를 생성합니다.

여기서 두 new 객체 또한 프로토타입 객체를 참조합니다.

이를 총 정리한 그림은 아래와 같습니다.

여기서 __proto__는 [[prototype]]링크라고도 하며 프로토타입 객체를 연결합니다.

이때 console.log(benz.gasoline(1)); 과 console.log(audi.gasoline(2));를 찍어보면 어떻게 될까요?

	console.log(benz.gasoline(1));
	//1리터 만큼 충전완료
	console.log(audi.gasoline(2));
	//2리터 만큼 충전완료

두 객체에 gasoline()이 정의되어 있지 않지만 참조되어있는 프로토타입 객체의 gasoline()이 있기 때문에 가능한 일입니다.

이를 프로토타입 체이닝이라고 합니다.

정리

이 과정을 다시 그림으로 설명하자면

• 자바스크립트는 gasoline()을 호출할 경우 먼저 객체 내부에서 값을 스캔합니다.

• 만약 값이 없을 경우 __proto__ 혹은 [[prototype]] 링크라고 불리는 녀석을 타고 부모 역할을 하는 프로토타입 객체를 스캔합니다.

이런 과정을 통해 자바스크립트는 상속기능을 흉내내 사용할 수 있습니다.

프로토타입 체이닝의 핵심

• __proto__ 속성은 모든 객체들이 가지고 있다.
• __proto__ 속성은 자신의 부모 역할을 하는 상위 프로토타입을 가리킨다.
• 특정 속성을 찾을때 상위 프로토타입을 타고 쭉 올라가 스캔 하는데 이를 프로토타입 체이닝이라고 한다.
• 최상위 프로토타입은 Object의 Prototype Object 이다. 여기 까지 값을 스캔하고 없다면 undefind를 출력한다.

---

참고
인사이드 자바스크립트
자바스크립트 완벽가이드
[Javascript ] 프로토타입 이해하기_오승환님의 블로그
생활코딩 prototype 수업