'2012/02/21'에 해당되는 글 4건

  1. 2012.02.21 자바스크립트 상속 4
  2. 2012.02.21 자바스크립트 상속 3
  3. 2012.02.21 자바스크립트 상속 2
  4. 2012.02.21 자바스크립트 상속 1

자바스크립트 상속 4

Javascript 2012. 2. 21. 17:17

4. 생성자 빌려쓰기를 통한 다중 상속


  1. var Inherit = (function(){
  2.    
  3.     function Parent1(name){
  4.         this.name = name;
  5.         return this;
  6.     }
  7.  
  8.     Parent1.prototype.getName = function(){
  9.         return this.name;
  10.     };
  11.  
  12.     function Parent2(title){
  13.         this.title = title;
  14.         return this;
  15.     }
  16.  
  17.     Parent2.prototype.getTitle = function(){
  18.         return this.title;
  19.     };
  20.  
  21.  
  22.     function Child(name, title){
  23.         Parent1.call(this, name);
  24.         Parent2.call(this, title);
  25.         return this;
  26.     };
  27.  
  28.     return new Child('name', 'title');
  29.    
  30. })();
  31.  
  32. alert(Inherit.name); // name
  33. alert(Inherit.title); // title


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

1. Parent1 생성자 함수에 인스턴스 맴버 name 속성을 추가 합니다.
 
2. Parent1 생성자 함수에 프로토타입 맴버 getName 메서드를 추가 합니다.
 
3. Parent2 생성자 함수에 인스턴스 맴버 title 속성을 추가 합니다.
 
4. Parent2 생성자 함수에 프로토타입 맴버 getTitle 메서드를 추가 합니다.
 
5. Child 생성자 함수 내부에서 Function.prototype.call() 메서드를 활용하여 Parent1 생성자
함수와 Parent2 생성자 함수의 인스턴스 맴버를 Child 생성자 함수의 맴버로 복사한다.
 
6. Child 생성자 함수의 프로토타입 맴버에 new Parent 객체를 추가 합니다.
 
7. new Child 객체를 반환 합니다.
 
8. 여기서 new Child 객체는 new Parent 객체의 인스턴스 맴버 모두(name)를 상속 받습니다.
(이전과 달리 프로토타입 맴버를 상속받지 않는 이유는 다중 상속 구조에서는 프로토타입
맴버를 추가 할 수 없기 떄문입니다.)
 
9. alert(Inherit.name);과 alert(Inherit.title);의 반환값이 각각 'name', 'title'이 나오는 이유는 5번 내용과 같이 Child 생성자 함수 내부에서 Function.prototype.call() 메서드를 활용하여 Parent1 생성자 함수와 Parent2 생성자 함수의 인스턴스 맴버를 Child 생성자 함수의 맴버로 복사하고, 그와 동시에 각가의 생성자 함수의 인자값('name', 'title') 또한 주었기 때문입니다.


저작자표시
Posted by 전성균

자바스크립트 상속 3

Javascript 2012. 2. 21. 16:14

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]) 또한 주었기 때문입니다.

 

저작자표시
Posted by 전성균

자바스크립트 상속 2

Javascript 2012. 2. 21. 15:35

2. 클래스 방식 상속 1 - 1

 
  1. var Inherit = (function(){
  2.    
  3.     function Parent(){
  4.         this.names = [1];
  5.         return this;
  6.     }
  7.  
  8.     Parent.prototype.getNames = function(){
  9.         return this.names;
  10.     };
  11.  
  12.  
  13.     function Child(){
  14.         return this;
  15.     };
  16.  
  17.     var p = new Parent();
  18.    
  19.     // 자바스크립에서 객체는 참조만 전달되기 때문에, 위와 같이 자식객체(new Parent)에서 names 맴버 속성을 수정하면 부모의 names 맴버 속성까지 수정된다.
  20.     p.names.push(2);
  21.     Child.prototype = p;
  22.  
  23.     return new Child();
  24.  
  25. })();
  26.  
  27. alert(Inherit.getNames()); // 1, 2


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

1. Parent 생성자 함수에 인스턴스 맴버 name 속성을 추가 합니다.
 
2. Parent 생성자 함수에 프로토타입 맴버 getName 메서드를 추가 합니다.
 
3. new Parent 객체의 names 맴버 속성을 수정한 후 Child 생성자 함수의 프로토타입 맴버에
new Parent 객체를 추가 합니다.
 
4. new Child 객체를 반환 합니다.
 
5. 여기서 new Child 객체는 new Parent 객체의 맴버(인스턴스, 프로토타입)
모두(name, getName())를 상속 받습니다.
 
6. alert(Inherit.getName()); 반환값이 1, 2가 나오는 이유는 5번 내용과 같이 수정된 new Parent
객체의 맴버를 모두 상속 받았기 때문입니다.


저작자표시
Posted by 전성균

자바스크립트 상속 1

Javascript 2012. 2. 21. 10:58

1. 클래스 방식 상속 1


  1. var Inherit = (function(){
  2.    
  3.     function Parent(){
  4.         this.name = 'parent';
  5.         return this;
  6.     }
  7.  
  8.     Parent.prototype.getName = function(){
  9.         return this.name;
  10.     };
  11.  
  12.  
  13.     function Child(){
  14.         return this;
  15.     };
  16.  
  17.    
  18.     Child.prototype = new Parent();
  19.  
  20.     return new Child();
  21.  
  22.  
  23. })();
  24.  
  25.  
  26. alert(Inherit.getName()); // parent
  27.  
 

위 코드가 가장 널리 쓰이며, 가장 기본적인 상속 방법 입니다.


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

1. Parent 생성자 함수에 인스턴스 맴버 name 속성을 추가 합니다.
 
2. Parent 생성자 함수에 프로토타입 맴버 getName 메서드를 추가 합니다.
 
3. Child 생성자 함수의 프로토타입 맴버에 new Parent 객체를 추가 합니다.
 
4. new Child 객체를 반환 합니다.
 
5. 여기서 new Child 객체는 new Parent 객체의 맴버그룹(인스턴스, 프로토타입)
모두(name, getName())를 상속 받습니다.

6. alert(Inherit.getName()); 반환값이 Parent가 나오는 이유는 5번 내용과 같이 new Parent
객체의 맴버를 모두 상속 받았기 때문입니다.

또한, 상속 과정을 거친 프로토타입은 아래처럼 서로 연결 됩니다.

--> (_proto_ 속성이 가리키는 방향)

new Child --> (Child.prototype : Object.prototype) --> new Parent (member: name) --> (Parent.prototype (member: getName()) : Object.prototype)



 
저작자표시
Posted by 전성균
prev 1 next
openclose

티스토리툴바