티스토리 뷰

javascript

javascritp 상속

修人事待天命♡ 2016. 12. 21. 22:05

상속하는 방법


1. 생성자 함수를 정의해서 상속하는 방법


// 부모 생성자 함수 정의

var Mammal = function(name){
  this.name = name;
};
Mammal.prototype.get_name = function(){
  return this.name;
};
Mammal.prototype.says = function(){
  return this.saying || '';
};


//자식 생성자 함수 정의

var Cat = function(name){
  this.name = name;
  this.saying = 'meow';
};


Cat.prototype = new Mammal(); // <==  상속!
//새로운 prototype에 purr와 get_name 메소드 추가
Cat.prototype.purr = function(n){
  var i, s = '';
  for(i = 0; i < n; i += 1){
    if(s){
      s += '-';
    }
    s += 'r';
  }
  return s;
};

Cat.prototype.get_name = function(){
  return this.says() + ' ' + this.name + ' ' + this.says();
};


var myCat = new Cat('Henrietta');
var says = myCat.says(); //'meow'  says함수는 부모 생성자 함수에서 정의한 것임
var purr = myCat.purr(5); // 'r-r-r-r-r'
var name = myCat.get_name();//'meow Henrieta meow'


2. 프로토타입 방식 Object.create(부모객체)를 사용하는 방법


var myMammal2 = {
  name : 'Herb the Mammal',
  get_name : function(){
    return this.name;
  },
  says : function(){
    return this.saying || '';
  }
};

var myCat2 = Object.create(myMammal2);// myCat2 객체는 myMammal2객체를 상속
myCat2.name = 'Henrietta';
myCat2.saying = 'meow';

myCat2.purr = function(n){
  var i, s = '';
  for(i = 0; i < n; i += 1){
    if(s){
      s += '-';
    }
    s += 'r';
  }
  return s;
};
myCat2.get_name = function(){
  return this.says() + ' ' + this.name + ' ' + this.says();
};


3. 함수를 이용한 상속 방법


var mammal = function(spec){
  var that = {};// 객체를 생성
  that.get_name = function(){
    return spec.name;
  };
  that.says = function(){
    return spec.saying || '';
  };
  return that;
};
var myMammal3 = mammal({name:'Herb'});

//함수형 패턴 상속
// spec 객체는 constructor가 인스턴스를 만드는데 필요한 모든 정보가 있다.
// spec의 내용들은 private에 복사되거나 다른 함수에 의해서 처리될 수 있습니다.
// 메소드에서 필요한 정보를 spec에서 얻을 수 도 있습니다.
var cat = function(spec){
  spec.saying = spec.saying || 'meow';
  var that =  mammal(spec);// 상속!
  that.get_name = function(){
    return that.says() + ' ' + spec.name + ' ' + that.says();
  };
  that.purr = function(n){
    var i, s = '';
    for(i = 0; i < n; i += 1){
      if(s){
        s += '-';
      }
      s += 'r';
    }
    return s;
  };
  return that;
};

var myCat3 = cat({name:'Henrietta'});
// console.log(myCat3.get_name());
// console.log(myCat3.purr(5));
// console.log(myCat3.says());

// 함수형 패턴은 또한 super 메소드를 다룰 수 있는 방법을 제공합니다.
Object.method('superior', function(name){
  var that = this, method = that[name];
  return function(){
    return method.apply(that, arguments);
  };
});

var coolcat = function(spec){
  var that = cat(spec),// cat 객체를 상속~
      super_get_name = that.superior('get_name');
      that.get_name = function(n){
        return 'like ' + super_get_name() + ' baby';
      };
      return that;
};

var myCoolCat = coolcat({name:'Bix'});// cat 객체를 상속한 coolcat 객체 생성
var name = myCoolCat.get_name();


알수있는 점

1. 상속의 방법은 3가지, 생성자 함수를 정의하여 상속, Object.create(부모객체)를 사용하는 방법, 함수를 사용하는 방법


댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함