'상속'에 해당되는 글 1건

  1. 2015.10.13 자바스크립트(ECAMScript5) 객체의 상속

 자바스크립트(ECMAScript 5) 객체의 공용 멤버와 공용 메소드는 다음과 같이 만드는 것이 일반적인 것 같다.


var A = function(name) {
   console.log("constructor A.");
   this.name = name; //공용 멤버
}
A.prototype = {
   who: function() { //공용 메소드
       console.log("I'm "+this.name);
   },
};


즉 공용 멤버는 생성자 함수 안에서 this 키워드로 만들어지고 공용 메소드는 prototype 객체 안에 정의한다.


 이제 이렇게 생성된 객체 A를 상속해서 새로운 객체 B를 정의하는 방법을 알아보자. 상속이란 기존 객체의 모든 공용 멤버를 복사하여 그대로 사용하면서 거기에 새로운 멤버나 메소드를 추가하는 방식으로 객체를 재사용하는 방법이다. 여러 방법 중에서 ECMAScript5 에서 도입된 Object.create() 함수를 사용하는 일반적인 방법은 다음과 같다.


var B = function(name, age) {
   console.log("constructor B.");
   A.call(this, name); // (1)공용멤버를 상속(복사)한다.
   this.age = age; // 새로운 멤버 추가
}
B.prototype = Object.create(A.prototype); //(2)공용메소드를 상속(복사)
B.prototype.constructor = B; //(3)생성자를 복원한다.
B.prototype.who2 = function() { // 새로운 메소드 추가
   console.log("I'm "+this.age+" years old.");
}


위에서 보면 세 가지 단계가 필수적이다.


(1) 공용 멤버를 상속(복사)하기 위해서 생성자 함수 내부에서 A.call() 함수나 A.apply()함수를 호출하여 공용 멤버들을 복사하는 단계

(2) 공용 메소드들을 복사하기 위해서 Object.create() 함수를 호출하는 단계

(3) 생성자를 복원하는 단계


만약 상속받는 객체의 생성자 함수의 인자들과 원 객체의 생성자 함수 인자들이 동일하다면 A.apply() 함수를 이용하여 인자 전체를 넘긴다.


A.apply(this, arguments);


그렇지 않고 일부만 선택적으로 사용한다면 예제와 같이 A.call()함수를 사용할 수 있다.





Posted by 살레시오
,