[JS] 프로토타입

 

자바스크립트는 프로토타입(Prototype)기반 언어입니다. 클래스 기반 언어에서는 ‘상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻습니다.

 

📚 프로토타입이 어렵고 복잡할 수도 있지만, 오히려 자바스크립트는 프로토타입 개념을 제대로 이해하는 것만으로도 이미 숙련자 레벨에 도달할 수 있는 시야를 확보하게 되는 셈이므로 두려워할 일은 아니라고 생각합니다.

 

 

개념 이해

prototype이라는 프로퍼티와 proto 라는 프로퍼티의 관계가 프로토타입 개념의 핵심입니다!

윗변(실선)의 왼쪽 꼭지점에는 Constructor(생성자 함수)를, 오른쪽 꼭짓점에는 Constructor.prototype이라는 프로퍼티를 위치시켰습니다. 왼족 꼭짓점으로부터 아래를 향한 화살표 중간에 new가 있고, 화살표의 종점에는 instance가 있습니다. 오른쪽 꼭짓점으로부터 대각선 아래로 향하는 화살표의 종점에는 instance.proto 이라는 프로퍼티를 위치 시켰습니다.

💡 어떤 생성자 함수(constructor)를 new 연산자와 함께 호출하면 constructor에서 정의된 내용을 바탕으로 새로운 인스턴스 instance가 생성 됩니다. 이때 instance에는 proto 라는 프로퍼티가 자동으로 부여되는데 이 프로퍼티는 constructor의 prototype이라는 프로퍼티를 참조합니다.

 

prototype 객체 내부에는 인스턴스가 사용할 메서드를 저장합니다. 그러면 인스턴스에서도 숨겨진 프로퍼티인 proto 를 통해 이 메서드들에 접근하게 됩니다.

instace의 proto 가 constructor의 Prototype 프로퍼티를 참조하므로 결국 둘은 같은 객체를 바라봅니다.

 

관건은 this, __proto__는 생략 가능

어떤 함수를 메서드로써 호출할때는 메서드명 바로 앞의 객체가 곧 this가 됩니다.

proto 가 생략 가능한 프로퍼티입니다. 원래부터 생략가능하도록 정의되어 있습니다.

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

var suzi = new Person('suzi', '28');
suzi.__proto__.getName(); //undefined -> suzi.__proto__ 에 this 가 정의되지 x  
suzi.getName(); //suzi -> this를 정의하기 위해 __proto__ 없이 인스턴스에서 메서드를 쓴다.

즉, 생성자 함수의 prototype 에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 됩니다.

 

constructor 프로퍼티

생성자와 생성자의 프로토타입 객체는 서로를 참조합니다. 정확히는 ‘생성자의 prototype 프로퍼티가 프로토타입 객체를 가리킴, 이 프로토타입 객체의 constructor 프로퍼티가 생성자를 가리키는 연결고리' 로 묶여 있습니다. 반면 생성자로 생성한 인스턴스는 생성될 때의 프로토타입 객체의 참조만 가지고 있을 뿐 생성자와는 직접적인 연결고리가 없습니다.

그렇기 때문에 자신을 참조하는 프로퍼티는 인스턴스로 부터 그 원형이 무엇인지를 알수 있는 수단이 됩니다. 인스턴스의 proto 가 생성자 함수의 prototype 프로퍼티를 참조하며 proto 가 생략 가능하기 때문에 인스턴스에서 직접 constructor 에 접근할 수 있는 수단이 생긴 것입니다.

 

정리

어떤 생성자 함수를 new 연산자와 함께 호출하면 Constructor 에서 정의된 내용을 바탕으로 새로운 인스턴스가 생성되는데, 이 인스턴스에는 proto 라는, Consturtor 의 prototype 프로퍼티를 참조하는 프로퍼티가 자동으로 부여됩니다. proto 는 생략 가능한 속성이라서, 인스턴스는 Consturtor.prototype 의 메서드를 마치 자신의 메서드인 것처럼 호출 할 수 있습니다.

Consturtor.prototype 에는 constructor 라는 프로퍼티가 있는데, 이는 다시 생성자 함수 자신을 가리킵니다. 이 프로퍼티는 인스턴스가 자신의 생성자 함수가 무엇인지를 알고자 할 때 필요한 수단입니다.