JS 클래스 의 패키지 및 구현 코드

1.js 류 js 를 정의 하 는 것 은 방향 을 향 한 언어 가 아니 라 클래스 에 대한 지원 을 제공 하지 않 기 때문에 우 리 는 전통 적 인 언어 에서 처럼 class 로 클래스 를 정의 할 수 없다.그러나 우 리 는 js 의 패 킷 패 키 징 체 제 를 이용 하여 js 류 를 실현 할 수 있다.우 리 는 간단 한 Shape 류 를 패키지 할 수 있다.

 
function ShapeBase() { 
this.show = function() 
{ 
alert("ShapeBase show"); 
}; 
this.init = function(){ 
alert("ShapeBase init"); 
}; 
} 

이런 유형 에서 두 가지 방법 을 정의 했다.show 와 init,주의해 야 할 것 은 var 가 아 닌 this 를 사용 하여 설명 하 는 것 입 니 다.var 를 사용 하 는 것 은 개인 적 인 방법 을 정의 하 는 것 이기 때 문 입 니 다.또한,우 리 는 prototype 속성 으로 Shape 를 정의 하 는 방법 도 사용 할 수 있 습 니 다.

 
ShapeBase.prototype.show=function() 
{ 
alert("ShapeBase show"); 
} 
ShapeBase.prototype.init=function() 
{ 
alert("ShapeBase init"); 
} 

위 에 있 는 이 표기 법 은 직관 적 이지 않 기 때문에 우 리 는 모든 방법 을 함께 쓸 수 있 습 니 다.

 
ShapeBase.prototype={ 
show:function() 
{ 
alert("ShapeBase show"); 
}, 
init:function() { 
alert("ShapeBase init"); 
} 
}; 

현재,종 류 는 다 썼 습 니 다.js 를 써 서 테스트 해 보 겠 습 니 다.결과 가 저희 가 생각 했 던 것 과 같 지 않 나 요?

 
function test(src){ 
var s=new ShapeBase(); 
s.init(); 
s.show(); 
} 

보 셨 죠?그 호출 방식 은 C\#와 똑 같 습 니 다.결 과 는 우리 가 예상 한 바 와 같 습 니 다.지금까지 우 리 는 js 류 를 만 드 는 방법 을 배 웠 지만 아직 인 스 턴 스 방법 일 뿐 입 니 다.C\#와 의 정적 방법 을 실현 하려 면 어떻게 해 야 합 니까?사실은 js 를 실현 하 는 정태 적 인 방법 은 매우 간단 하 다.다음 과 같이 어떻게 실현 하 는 지 살 펴 보 자.

 
//     
ShapeBase.StaticDraw = function() 
{ 
alert("method draw is static"); 
} 

2.JS 류 추상 과 계승 을 실현 하 는 것 과 마찬가지 로 js 에서 도 클래스 계승 체 제 를 지원 하지 않 지만 우 리 는 부모 류 prototype 중의 구성원 방법 을 하위 클래스 의 prototype 에 복사 하여 실현 할 수 있다.클래스 의 계승 과 마찬가지 로JavaScript 는 추상 류 를 지원 하 는 어떠한 메커니즘 도 없습니다.그러나 JavaScript 언어 자체 의 성질 을 이용 하여 자신의 추상 류 를 실현 할 수 있 습 니 다.먼저 js 중의 가상 방법 을 살 펴 보 겠 습 니 다.전통 언어 에서 가상 방법 은 먼저 정의 해 야 합 니 다.가상 방법 을 포함 하 는 유형 은 추상 류 입 니 다.예화 되 어 서 는 안 됩 니 다.JavaScript 에서 가상 방법 은 이러한 유형 에서 정의 되 지 않 은 방법 으로 볼 수 있 습 니 다.그러나 이미 this 지침 을 통 해 사용 되 었 습 니 다.전통 적 인 대상 을 대상 으로 하 는 것 과 달리 이 방법 은 성명 을 거치 지 않 고 직접 사용 할 수 있 으 며 클래스 도 예화 할 수 있 습 니 다.먼저 object 의 extend 방법 을 정의 하고 하 나 는 정적 방법 이 며 하 나 는 인 스 턴 스 방법 입 니 다.이 두 가지 방법 은 계승 을 실현 하 는 prototype 복사

 
Object.extend = function(destination, source) { 
for (property in source) { 
destination[property] = source[property]; 
} 
return destination; 
} 
Object.prototype.extend = function(object) { 
return Object.extend.apply(this, [this, object]); 
} 

다음 에 우 리 는 계승 류 Rect 를 실현 합 니 다.여기 서 먼저 간단 한 방법 으로 실현 한다.

 
function Rect() { 
} 
Rect.prototype = ShapeBase.prototype; //        
//       
Rect.prototype.add=function() { 
alert("Rect add"); 
} 

이 방법 은 재 작성 에 사용 할 수 없습니다.show 방법 이 바 뀌 면 ShapeBase 의 show 도 같은 함 수 를 가리 킬 수 있 습 니 다.prototype 할당 값 이 가리 키 는 주 소 를 간단하게 바 꾸 었 기 때 문 일 수 있 습 니 다.위 에서 도 정의 되 었 다 면 Rect.prototype.show=function(){alert("Rect show");}그러면 실행 결 과 는 다음 과 같다.function test(){var s=new ShapeBase();s.show(); //결과:Rect show var r=new Rect();r.show(); //결과:Rect show r.add();}우 리 는 object.extend 를 사용 하여 계승 을 실현 하고 oninit 가상 방법 을 실현 합 니 다.ShapeBase 를 다음 과 같이 수정 합 니 다.

 
ShapeBase.prototype={ 
show:function() 
{ 
alert("ShapeBase show"); 
}, 
initialize:function () { 
this.oninit(); 
} 
}; 

은 Rect 류 계승 을 실현 합 니 다.

 
Rect.prototype=(new ShapeBase).extend({ 
//       
add:function() { 
alert("Rect add"); 
}, 
//          show   
show:function() { 
alert("Rect show"); 
}, 
//      
oninit:function() { 
alert("Rect oninit"); 
} 
}) 

현재 우리 의 종 류 는 다 썼 습 니 다.테스트 해 보 겠 습 니 다.

 
function test(src){ 
ShapeBase.StaticDraw(); 
var s=new ShapeBase(); 
s.show(); //alert("ShapeBase show") 
var r=new Rect(); 
r.show(); //alert("Rect show") 
r.add(); 
r.initialize(); //alert("Rect oninit") 
} 

또한 인터넷 에서 전문 적 인 대상 으로 종 류 를 만 드 는 것 을 보 았 습 니 다.코드 는 다음 과 같 습 니 다.

 
// 
//        ,       , PrototypeJS   extend Ext   Ext.apply 
// 
function extend(des, src) { 
if (!des) 
des = {}; 
if (src) { 
for (var i in src) { 
des[i] = src[i]; 
} 
} 
return des; 
} 
var CC = {}; //     
// 
//create       
// 
CC.create = function(superclass, constructor){ 
var clazz = (function() { 
this.initialize.apply(this, arguments); 
}); 
//     ,     . 
if(arguments.length == 0) 
return clazz; 
//     ,  constructor        ,        . 
if(!superclass){ 
extend(clazz.prototype, constructor); 
return clazz; 
} 
var absObj = clazz.prototype, 
sprPropty = superclass.prototype; 
if(sprPropty){ 
//         
clazz.superclass = sprPropty; 
extend(absObj, sprPropty); 
//            ,       . 
extend(absObj, constructor(sprPropty)); 
//         obj.superclass      , 
//           ,        ,           . 
absObj.superclass = sprPropty; 
// 
clazz.constructor = constructor; 
} 
return clazz; 
} 
// 
//        
// 
var Animal = CC.create(null, { 
//   
footprint : '- - - - - - =', 
//      ,   ,   new               ,     . 
initialize : function(options){ 
extend(this, options); 
alert('Animal initialize method is called.'); 
}, 
eat : function(){ 
alert('Animal eat method is called.'); 
}, 
move : function(){ 
alert('I am moving like this '+ this.footprint +' .'); 
} 
}); 
// 
//    Duke  
// 
var Duke = CC.create(Animal, function(superclass){ 
//               ,             . 
//      ,       . 
var static_instance_counter = 0; 
function classUtilityFuncHere(){ } 
//       . 
return { 
//        
//@override 
initialize : function(options) { 
alert('Initializing Duke class..'); 
//       ,                ,         . 
superclass.initialize.call(this, options); 
//          . 
alert('Duke initialize method is called.'); 
//           
static_instance_counter++; 
}, 
//  move  ,  Duke       . 
move : function(){ 
this.footprint = this.footprint + 'zzzzzzzz'; 
superclass.move.call(this); 
}, 
//  eat  ,  ,         ,   eat    . 
eat : function(){ 
alert('Duke is eating..'); 
}, 
//    say  ,          Duke     . 
say : function(){ 
alert('the number of Duke instances is '+static_instance_counter); 
} 
}; 
}); 
var DukeChild = CC.create(Duke, function(superclass){ 
return { 
move : function(){ 
this.footprint = this.footprint + '++++++++++++='; 
superclass.move.call(this); 
}, 
say : function(){ 
alert(this.msg || ''); 
} 
}; 
}); 
(function test() { 
var animal = new Animal(); 
animal.eat(); 
animal.move(); 
var dukeA = new Duke(); 
dukeA.eat(); 
dukeA.move(); 
dukeA.say(); 
var dukeB = new Duke(); 
dukeB.eat(); 
dukeB.move(); 
dukeB.say(); 
var dukeC = new DukeChild({msg : 'I am a child of duke.'}); 
dukeC.move(); 
dukeC.say(); 
})();