티스토리 뷰
상속하는 방법
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(부모객체)를 사용하는 방법, 함수를 사용하는 방법
'javascript' 카테고리의 다른 글
선택한 요소의 크기 알아내기 (0) | 2017.02.04 |
---|---|
scroll이 생긴 요소의 현재 스크롤위치를 알 수 있는 방법 (0) | 2017.02.04 |
javascript 객체 리터럴 생성과 new 연산자를 이용한 객체생성의 차이점 (0) | 2016.12.21 |
함수호출 방식에 따른 this의 바인딩에 대해서...[출처:https://blog.outsider.ne.kr/439] (0) | 2016.09.16 |
[JavaScript] 브라우저 크기 구하기 : 화면 해상도 구하기 (0) | 2016.09.12 |