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에 담김)
'웹 > JavaScript & JQuery' 카테고리의 다른 글
[Js] input[type=file], reset (0) | 2019.12.20 |
---|---|
[JavaScript] this (0) | 2019.02.15 |
[JavaScript] prototype이란? (0) | 2019.02.14 |
[JavaScript] function 객체의 메서드 call(), apply() (0) | 2019.02.14 |
[JQuery] 제이쿼리 기본구조, 체이닝기법 (0) | 2018.07.10 |