[Javascript] Prototype 간단 정리

최근 Vue를 공부하면서 Javascript공부의 필요성을 느꼈고 차근차근 공부하다 Prototype에 대해 정리하기 해보려한다.

---

자바스크립트는 프로토타입 기반 언어라는 것을 많이 접했다. 그럼 프로토타입이란 무엇일까

프로토타입을 알기전에 자바스크립트의 함수와 객체의 내부구조를 먼저 알아보자

1. 함수, 객체의 내부 구조

function Person(){}
var joon = new Person();  
var jisoo = new Person(); 

위의 코드는 간단하게 함수를 정의하고 new 연산자를 통해 함수의 객체를 생성한 코드이다.

저 코드에서는 현재 두가지의 행동이있다. 첫번째는 함수 정의, 두번째는 new를 통한 객체 생성

함수 정의

자바스크립에서는 함수를 정의하면 함수의 멤버로 prototype 속성이 생성되고,
프로토타입 객체가 생성된다. 프로토타입 객체에는 constructor 속성이 들어있다.

 

프로토타입 객체는 new 연산자를 사용해 생성된 해당 함수의 모든 객체의 원형이 되는 객체이다.

즉, new로 생성된 모든 객체는 하나의 프로토타입 객체를 참조할 수 있다.

 

함수의 prototype 속성은 생성된 프로토타입객체를 참조한다.

프로토타입 객체의 contructor 속성은 함수를 참조한다.

객체 생성

객체가 생성되면 객체 안에는 __proto__라는 속성이 존재하는데 이 속성은 객체가 만들어지기 위해 사용된 프로토타입객체를 숨은 링크로 참조하게 된다.

아래와 같이 간단히 a라는 함수를 정의하고 a객체를 b에 생성하면
b안에는 __proto__ 속성이 있고, 이 속성은 프로토타입객체를 가르킨다(프로토타입 객체에는 contructor 속성이 존재)

결론적으로, Prototype은 두가지로 해석될 수 있다.

• 함수에 들어있는 프로토타입 객체를 참조하는 prototype 속성
• new연산자를 통해 생성된 객체 안에있는 __proto__ 속성이 참조하는 링크

---

2. 사용 예제

prototype이 어떤 것인지 개념을 잡았으니 이것을 이용한 예제를 보자

function Person(){}

var a = new Person();
var b = new Person();

Person.prototype.getTest = function (){
    return "test";
};
console.log(a.getTest());
console.log(b.getTest());

/*
출력:
test
test
*/

위의 예제같은 경우 Person에 들어있는 prototype속성을 이용해 프로토타입객체에 새로운 멤버 함수를 추가한다.

객체 a, b는 프로토타입객체를 참조 가능하므로 getTest()를 사용할 수 있다.

또한, 중요한 것은 프로토타입의 멤버함수(getTest())를 추가하기전 생성된 객체(a, b)에서도 멤버함수를 사용할 수 있다는 점이다.

 

function Person(){}

var a = new Person();  
var b = new Person();

Person.prototype.getTest = function (){  
    return "test"; 
};

a.getTest = function() {
    return "test2";
}
console.log(a.getTest()); 
console.log(b.getTest()); 
/*
출력:
test2
test
*/

위 예제의 경우 a.getTest를 통해 결과값이 test2로 바뀐것을 볼 수 있는데

알 수 있는 것은 a.getTest()는 프로토타입객체의 getTest()를 수정한 것이 아닌 a객체에 getTest 멤버 함수를 추가한 것이다. 만약 prototype을 수정하고 싶다면 아래처럼 하면 된다.

function Person(){}

var a = new Person();
var b = new Person();

Person.prototype.getTest = function (){
    return "test";
};

Person.prototype.getTest = function () {
    return "test2";
}
console.log(a.getTest());
console.log(b.getTest()); 
/*
출력:
test2
test2
*/

아래 예제는 함수안에 멤버 함수와 프로토타입객체의 멤버 함수가 겹칠 때 함수안의 멤버 함수가 먼저 실행되는 것을 보여주는 것이다.
이렇게 되는 이유는 Chain을 통해 q()함수를 찾을 때 객체 안에서 q()를 찾고 없으면 그 다음 __proto__를 통해 프로토타입객체에서 q()를 찾기 때문이다.

 

 

 

참조

http://www.nextree.co.kr/p7323/