[Javascript/이론] 자바스크립트 프로토타입 개념

프로토타입의 개념

자바스크립트는 자바, C++, C#에서 제공하는 것과 같은 실제 클래스(true class)를 지원하지 않는 대신 모조 클래스(pseudoclass)를 정의할 수 있다. 모조클래스는 프로토타입 객체나 생성자 함수를 사용하여 구현할 수 있다.

자바스크립트의 모든 객체는 프로토타입이라고 불리는 또 다른 객체를 내부적으로 참조할 수 있다. 그리고 객체는 프로토타입의 프로퍼티들은 자신의 프로퍼티로 가져온다. 

 

var a = new Date();
 

예를 들어서, 위와 같이 a 객체를 Date() 라는 생성자 함수를 이용하여 만들 경우, new 연산자는 객체a 의 프로토 타입을 설정하게 되는데, 객체 a 의 프로토 타입은 자신을 만들어낸 생성자 함수 Date() 의 프로토타입 프로퍼티값을 자신의 프로토타입으로 설정한다. 

(모든 함수에는 prototype이라는 프로퍼티가 있는데, 이 것은 함수가 정의될 때부터 자동적으로 생성되고 초기화된다.)

function func01(){}
func01.prototype.temp = true;
 
function func02(){}
func02.prototype = new func01();
 
function func03(){}
func03.prototype = new func02();
 
var test = new func03;
console.log(test.temp); //true
 

프로퍼티의 상속에 대해 조금 더 살펴보면, 위의 소스를 기준으로 "test.temp" 를 console로 찍어보면 "true" 값이 나온다. 그 이유를 분석해보면,

1. func01의 프로토타입에 temp라는 프로퍼티의 값을 true로 설정하였다.( 1-2번째줄 )

2. func02의 프로토타입은 생성자 함수 func01로 만들어 func01의 프로퍼티를 그대로 상속한다. (4-5번째줄)

3. func03 역시 프로토타입을 생성자 함수 func02로 만들어 func02의 프로퍼티를 그대로 상속한다. (7-8번째줄)

4. 변수 test는 생성자 함수 func03으로 만들어 func03의 프로퍼티를 그대로 상속한다.(10-11번째줄)

결국 test는 생성자 func03의 프로퍼티를, func03은 func02의 프로퍼티를, func02는 func01의 프로퍼티를 상속받는다. 그래서 console에 test.temp를 찍으면 true 값이 나오게 된다.

프로토타입의 장점

1. 프로토타입 객체를 사용하면 각 객체가 프로토타입의 프로퍼티를 상속받기 때문에 이들이 필요로 하는 메모리의 양을 상당히 줄일 수 있다. 

2.프로토타입에 새로운 프로퍼티가 추가되면, 이미 생성되었던 객체일지라도 추가된 프로퍼티를 그대로 상속받는다. ( 기존의 클래스에 새로운 메서드를 추가할 수 있다. 상황에 따라 장점일수도, 단점일수도 있다.)

프로토 타입 사용법

        function func(){
            this.test1 = "test1";
            this.test2 = "test2";
        }
        var test1_1 = new func();
        console.log( test1_1.test1); //test1
        console.log( test1_1.test2); //test2
 

위의 소스를 보면 func() 생성자를 사용하여 만드는 객체 test1_1에는 test1과 test2라는 프로퍼티가 있다. 이 말은 func() 생성자를 사용하는 모든 객체에는 2개의 프로퍼티가 존재한다는 것이다.

**Constructor이란? 

자바스크립트에서는 모든 객체는 객체를 초기화하는데 사용되는 생성자 함수인 Constructor 프로퍼티를 가진다.

 

var a = new Date();
console.log(a.constructor); //Date()
 

위의 소스처럼 Date 생성자로 a 객체를 생성하였다면, 객체 a 의 constructor는 Date()가 된다.

[출처]

자바스크립트 완벽 가이드 데이비드 플래너건 저 | 인사이트