본문 바로가기
웹/JavaScript & JQuery

Animal, Pet, Cat 생성자, 프로토타입

by 느링 2019. 2. 14.

function Animal(type){

this.type = type;

}

// 공통 속성인 brain과 legs는 prototype객체에 추가해줌

Animal.prototype.brain = true;

Animal.prototype.legs = 0;


var h = new Animal('human');


function Pet(kind){

//생성자 함수 Animal 상속

Animal.call(this, '애완동물');

this.kind = kind;

}



Pet.prototype = Object.create(Animal.prototype);

// 애니멀의 프로토타입을 상속받도록 구현


Pet.prototype.constructor = Pet;

Pet.prototype.legs = 4;

Pet.prototype.fleas = 0;


var cat = new Pet('고양이');


// 상속을 묶어주기

function inherit(Pet, Animal){

Pet.prototype = Object.create(Animal.prototype);

Pet.prototype.constructor = Pet;

}

// 이것을 다시 바꾸면

function inherit(subClass, superClass){

subClass.prototype = Object.create(superClass.prototype);

subClass.prototype.constructor = subClass;

}


function Cat(name, age, color){

Pet.call(this, '고양이');

this.name = name;

this.age = age;

this.color = color;

}

inherit(Cat, Pet);


Cat.prototype.fleas = 4;


var sebaschan = new Cat('세바스찬', 1, '하얀색');

// -> Cat{type:"애완동물", kind:"고양이", name:"세바스찬", age:1, color:"하얀색"}


// 하지만 작성한 생성자 함수와 상속, 프로토타입 객체 코드를

// 보다 매끄럽게 묶어서 관리하기 즉 캡슐화, 즉시 실행 함수식(IIFE) 패턴 사용하자

// IIFE 패턴을 사용해 생성자 함수와 상속, 프로토타입 객체를 한데 묶어 관리하면

// 충돌 걱정도 없고 단 하나의 클래스에만 집중해서 개발이 가능!

(function(global){

'use strict';


// '상속' 헬퍼 함수

function inherit(sub_class, super_class){

try{

sub_class.prototype = Object.create(super_class.prototype);

sub_class.prototype.constructor = sub_class;

} catch(e){

console.error(e.message);

}

}


// @class Animal

var Animal = (function(){


// @constructor

function Animal(){

'use strict';

}


// @prototype

Animal.prototype.type = '동물';

Animal.prototype.brain = true;

Animal.prototype.legs = 0;

Animal.prototype.run = function(){ return this.type + ' 달리다'; };


return Animal;

})();


// @class Pet

var Pet = (function(Animal){


// @constructor

function Pet(){

'use strict';

}


// @inherit Animal

inherit(Pet, Animal);


//@prototype

Pet.prototype.type = '애완동물';

Pet.prototype.legs = 4;

Pet.prototype.fleas = 0;


return Pet;


})(Animal);


// @class Cat

var Cat = (function(Pet){


// @constructor

function Cat(name, gender, color){

'use strict';

this.name = name;

this.gender = gender;

this.color = color;

}


// @inherit Pet

inherit(Cat, Pet);


// @prototype

Cat.prototype.type = '고양이';

Cat.prototype.fleas = 4;


return Cat;

})(Pet)

// Cat 클래스를 상속하는 새로운 서브 클래스를 만들어야 합니다.

  // 러시안 블루(Russian Blue) 고양이 종을 클래스로 만들어 봅시다.

  // 참고: https://ko.wikipedia.org/wiki/러시안_블루

  var RussianBlue = (function(Cat){

    

    // @constructor

    function RussianBlue(name, gender, color, baby) {

      'use strict';


      // 생성자 함수의 속성 상속

      // arguments는 유사 배열이므로 

      // 함수 객체의 apply() 메서드를 사용해 인자 전달 

      Cat.apply(this, arguments);


      // 자신만의 속성 추가

      this.baby = baby || [];


    }

    

    // @inhert Cat

    inherit(RussianBlue, Cat);

    

    // @prototype

    RussianBlue.prototype.type      = '러시안 블루';

    RussianBlue.prototype.origin    = '러시아(Russia)';

    RussianBlue.prototype.pattern   = '숏헤어(Shorthair)';

    RussianBlue.prototype.character = '주인이 신나면 같이 신나고, 우울하면 같이 위로해주는 감성적인 성격';

    RussianBlue.prototype.nickname  = ['아크엔젤블루(archangel blue)', '포린블루(foreign blue)'];

    RussianBlue.prototype.run       = function(who) { return (who || '주인') + '에게 달려 안긴다' };

    RussianBlue.prototype.charming  = function(who) { return (who || '주인') + '에게 애교를 부린다.' };

    

    return RussianBlue;

    

  })(Cat);


   // 글로벌에 `공개`  

Object.defineProperties(global, {

Animal      : { value: Animal },

    Pet         : { value: Pet },

    Cat         : { value: Cat },

    RussianBlue : { value: RussianBlue },

});


// 확장 및 제거 차단

  Object.freeze(Animal);


})(window);


// Pet 함수 해석 예시

// var Animal(변수 Animal)이 Pet안에 함수 Animal로 들어감

// return Pet -> var Pet (변수 Pet에 담김)