자바스크립트 상속 3

3. 클래스 방식 상속(생성자 빌려쓰기) 1 - 2

 

1. var Inherit = (function(){
2.    
3.     function Parent(name){
4.         this.name = name || [1];
5.         return this;
6.     }
7.  
8.     Parent.prototype.getName = function(){
9.         return this.name;
10.     };
11.  
12.  
13.     function Child(name){
14.         // Function.prototype.call() 메서드를 활용하여 Parent 생성자 함수의 인스턴스 맴버를 Child 생성자 함수의 맴버로 복사한다.
15.         Parent.call(this, name);
16.         return this;
17.     };
18.  
19.     Child.prototype = new Parent();
20.  
21.     return new Child([2]);
22.  
23. })();
24.  
25. alert(Inherit.getName()); // 2
26.  

상속 구조를 설명하면 아래와 같습니다.

1. Parent 생성자 함수에 인스턴스 맴버 name 속성을 추가 합니다.
 

2. Parent 생성자 함수에 프로토타입 맴버 getName 메서드를 추가 합니다.
 

3. Child 생성자 함수 내부에서 Function.prototype.call() 메서드를 활용하여 Parent 생성자 함수의 인스턴스 맴버를 Child 생성자 함수의 맴버로 복사한다.
 

4. Child 생성자 함수의 프로토타입 맴버에 new Parent 객체를 추가 합니다.
 

5. new Child 객체를 반환 합니다.
 

6. 여기서 new Child 객체는 new Parent 객체의 맴버(인스턴스, 프로토타입)
모두(name, getName())를 상속 받습니다.
 

7. alert(Inherit.getName()); 반환값이 '1'아닌 '2'가 나오는 이유는 3번 내용과 같이 new Child 객체의 인스턴스 맴버는 Child 생성자 함수의 프로토타입을 통해 new Parent
객체의 인스턴스 맴버를 상속받지 않고 Child 생성자 함수 내부에 Function.prototype.call() 메서드를 활용하여 Parent 생성자 함수의 인스턴스 맴버를 Child 생성자 함수의 맴버로 복사하고, 그와 동시에 생성자 함수의 인자값([2]) 또한 주었기 때문입니다.