prototype

자바스크립트는 prototype 기반 언어라고 한다. 

내가 공부한 것은 prototype을 통해 object 객체를 복사해서 새로운 객체를 생성하고 그 객체는 다른 어떤 객체의 원형이 되어 prototype으로 접근할 수 있다는 것이다. 

 

일단 예를 들어보자 

var Foo = function(){};

위와 같이 Foo라는 새로운 object를 정의하면 동시에 Foo Prototype Object 생성된다. 그렇게 되면 여기서 new를 통해 생성된 객체는 Foo의 prototype을 사용할 수 있게 된다.

var Foo = function(){};
var foo = new Foo();

아래와 같은 결과를 확인할 수 있다 

 

__proto__때문에 객체의 prototype과 연결되는 연결고리가 되어 사용할 수 있게 된다. 무슨 말인지는 아래를 보면 알 것이다. 

var Foo = function(){};
Foo.prototype.hello ='hello';
var foo = new Foo();

Foo의 prototype을 만들었고 이제 결과를 확인해보자

결과에서 보이는 바와 같이 prototype이 생긴 것을 알 수 있다. 이것을 통해 Foo의 prototype인 hello의 접근할 수 있다.

console.log(foo.hello);  // hello 출력

또한 가지 prototype으로 접근하게 되면 객체 생성 시 메모리를 할당을 해결할 수 있게 된다.

var Foo = function(){
    this.hello = 'hello';
};
var foo = new Foo();

위와 같이 객체를 생성해 결과를 확인하면 아래와 같이 나온다.

이것은 foo 객체를 생성하면서 hello가 프로퍼티로 메모리에 할당된 것이다. 만약 무수히 많은 Foo객체를 생성해야 한다면 그때마다 hello 가 메모리에 할당이 될 것이다. 이것을 prototype을 사용해 해결할 수 있게 된다. 

 

같은 이름의 프로퍼티의 우선순위는 __proto__ 안에 있는 것보다 보다 인스턴스에 있는 프로퍼티가 먼저 호출된다. 

var Foo = function(){
    this.getP = function(){
        return 'Foo';
    }
};
var foo = new Foo();
Foo.prototype.getP = function(){ return 'Foo.__proto__';}
console.log(foo.getP()); //Foo

proto 안쪽으로 접근하고 싶다면 __proto__ 를 붙여주면 된다.