[JavaScript] 객체 간의 상속 (Object.create())

객체 간의 상속

javascript 에서 상속을 유연하게 사용하기 위해 객체 간의 상속에 대해 이해해 보자

권장하는 Object.create()에 대해 알아보기 전에 고전적인 상속인 Prototype Link를 사용한 방법에 대해 알아볼 필요가 있다.

 

해당 내용을 이해하기 위해서는 javascript의 Prototype에 대한 이해가 어느 정도 필요해 보인다.

링크를 통해서 Prototype Object와 Prototype Link에 대해 복습하고 돌아오자

---

__proto__ 를 이용한 상속

var obj1 = {
    name : 'kim',
    math : 30,
    english : 40,
    sum : function(){
        return this.math + this.english
    }
}

var obj2 = {
    name : 'lee',
    math : 90,
    english : 80
}

obj2.__proto__ = obj1

obj1.sum()      // 70
obj2.sum()      // 170

obj1과 obj2 객체가 존재한다. __proto__ 는 prototype link로, 자신의 조상 객체의 prototyep object를 가리킨다.

예제에서는 obj2의 __proto__ 가 obj1을 가리키도록 작성했다.

 

obj1 에는 성적을 합산하는 sum() 메서드가 존재한다. 해당 메서드를 obj2에서도 사용하기 위해서 obj2의 __proto__ 에 obj1를 대입해줌으로써 객체 간의 상속이 이루어졌다.

그리고 obj2에서 sum() 메서드를 사용하려고 할 경우, obj2 내부에 sum() 메서드가 존재하는지 검토하게 된다.

만약에 존재하지 않는다면 __proto__ 의 프로퍼티에 sum() 메서드가 존재하는지 검토하게 되고 존재한다면 사용하게 된다.

---

Object.create()를 이용한 상속

__proto__ 를 이용한 고전적인 상속을 대체하기 위한 권장사항으로 Object.create()가 나왔다.

var obj1 = {
    name : 'kim',
    math : 30,
    english : 40,
    sum : function(){
        return this.math + this.english
    }
}

var obj2 = Object.create(obj1)
obj2.name ='lee'
obj2.math = 90
obj2.english = 80

obj1.sum()      // 70
obj2.sum()      // 170

__proto__ 상속 예제와 동일한 결과이다.

 

Object.create()를 이용해서 상속을 할 경우에도 동일한 결과가 나오는 것을 확인할 수 있다.

Object.create()를 이용할 경우, 새로운 빈 객체를 생성해서 자신의 첫 번째 파라미터를 __proto__ 의 value 값으로 설정한 뒤 넘겨준다.

 

 

 

※ 잘못된 부분이나 수정해야 할 부분이 있다면 댓글에 남겨주세요~ 바로 반영하도록 하겠습니다!