Prototype Chain

자바스크립트에는 객체를 상속하기 위해서 프로토타입 체인을 이용합니다. 프로토타입 체인이란 객체의 생성 과정에서 모태가 되는 프로토타입과의 연결고리가 이어져서, 상위 프로토타입으로 연속해서 이어지는 관계를 의미합니다. 그리고  이 연결고리 역할을 하는 것이 이전 글에서 설명했던 Prototype Link입니다. 모든 객체가 가지고 있는 속성인 _proto_가 상위 Prototype Object를 가리키고 있는 것입니다.

 

개념 자체는 어렵지 않습니다. 

var Foo = function() {};
 
Foo.prototype.hello = function() { console.log("hello") };
 
var foo1 = new Foo();
var foo2 = new Foo();
 
foo1.hello();
foo2.hello();
 
//result
// > hello
// > hello

foo1과 foo2라는 인스턴스들은 hello라는 메서드를 가지고 있지 않기 때문에, _proto_를 통해 hello 메서드를 호출합니다. 

따라서, Foo.prototype의 hello 메서드를 수정하면, foo1과 foo2에서 hello 메서드를 호출해도 변경된 결과가 출력됩니다.

Foo.prototype.hello = function() { console.log("hello - updated method") };
 
foo1.hello();
foo2.hello();
 
//result
// > hello - updated method
// > hello - updated method

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

그림에서 볼 수 있듯이, 프로토타입 체인이 _proto_를 타고 올라가는 식으로 구현되어 있기 때문에, 식별자를 찾을 때 가장 처음 발견된 속성을 반환하게 되어 있습니다. 즉, foo 인스턴스에 hello라는 메서드가 정의되어 있다면 Foo의 prototype의 hello는 호출되지 않습니다. 

foo1.hello = function(){ console.log("foo1's hello"); };
 
foo1.hello();
 
//result
// > foo1's hello

위 예제에서 생성자 함수를 통해 인스턴스를 생성했고, 그렇기 때문에 인스턴스는 생성자함수의 prototype 속성과 연결되어 있습니다. foo1과 foo2가 Foo.prototype에 연결되어 있는 것을 그림에서 볼 수 있듯이 말입니다. 이처럼 프로토타입을 이용해 객체를 만드는 방법으로는 생성자 함수를 가장 많이 사용하는데, Object.create() 를 이용하여 만들 수도 있습니다.

 

이 방법은 기존에 만들어져 있는 인스턴스의 정보를 그대로 받아서, 추가로 필요한 정보만 추가해서 사용하고자 할 때 사용합니다. 

var Info = function(name) {
    this.name = name;
 
    this.print = function() {
        console.log(this.name);
    }
}
 
var info = new Info("red");
 
var bankInfo = Object.create(info);
bankInfo.account = "123-456-789";
bankInfo.print = function() { console.log(this.name + ' : ' + this.account); };
 
//result
info.print()        // > red
bankInfo.print()    // > red : 123-456-789

이렇게 생성하게 되면,  bankInfo의 _proto_는 Info 객체가 됩니다. 

지금까지 자바스크립트의 프로토타입에 대해 알아보았습니다. 프로토타입은 자바스크립트에서 아주 중요한 개념이지만, ES6에서는 class 키워드가 도입되면서, 직접적으로 사용할 일이 없습니다. 자바에서 클래스를 정의하듯이 class 내부에서 function 키워드를 이용하여 작성하면 되기 때문입니다. 하지만 class를 사용하더라도 자바스크립트 내부에서 결론적으로 프로토타입 형태로 만들어지기 때문에, 개념을 알고 있다면 자바스크립트 코드를 작성함에 있어 도움이 될 것입니다.

 

 

references

 

Object prototypes

Object prototypes

prototype

Prototype | PoiemaWeb

Object.create()

Object.create()