/**
*Klass.js-copyright@dedfat *version1.0
*https://github.com/ded/klass
*追蹤我們的軟體http://twitter.com /dedfat:)
*MIT 授權
*/
!function(context,f){
//fnTest用來驗證是否可能透過正規找出呼叫super父類別方法的方法
varfnTest=/xyz/.test(function(){xyz;})?/bsuprb/:/.*/,
noop=function(){},
proto='prototype',
isFn =function(o){
returntypeofo===f;
};
//基礎類別
functionklass(o){
returnextend.call(typeofo==f?o:noop ,o,1);
}
//包裝成借用super同名方法的函數
functionwrap(k,fn,supr){
returnfunction(){
//緩存原this.super
vartmp=this.supr;
//暫把this.super改造成借用super的同名方法above
//供o裡顯式的聲明(fnTest.text(fn)= =true)要藉用super的同名方法使用
this.supr=supr[proto][k];
//借用執行並儲存回傳值
varret=fn.apply(this,arguments);
//恢復原this.super
this.supr=tmp;
//回傳回值，保證wrap後的回傳值跟原來一致
returnret;
};
}
//如果o和super有同名方法，且o明確宣告借用super的同名方法，就wrap成一個待執行函式供使用
//如果沒有明確的宣告借用super的同名方法,或o獨有的方法，或不是方法就直接用
functionprocess(what,o,supr){
for(varkino){
//如果是非繼承方法,按方法註釋規則執行,最後都放進what
if(o.hasOwnProperty(k)){
what[k]=typeofo[k]==f
&&typeofsupr[proto][k]==f
&&fnTest.test(o[k])
?wrap(k,o[k],supr):o[k];
}
}
}
//繼承方法的實作,fromSub是用來控制是否繼承而來,上面的klass裡面fromSub是1,表明非繼承而來,構造函數不借用super執行
functionextend(o,fromSub){
//noop做為媒介類別實作原型繼承的解除引用
noop[proto]=this[proto];
varsupr=this,
prototype=newnoop(),//建立實例物件供原型繼承使用，解除引用
isFunction=typeofo==f,
_constructor=isFunction?o:this,//如果o是一個構造方法就用,否則由this來決定構造函數
_methods=isFunction?{}:o, //如果o是一個{...}應該用methods放到fn原型裡,如果裡面有initialize就是建構子,如果o是函數就由上面_constructor決定o是建構子
fn=function() {//因為kclass借助了kclass,所以最終實際上返回的就是fn,fn其實就新類別的建構子
//1如果o是{...}就會被methods直接過濾並加入fn的原型裡,如果o裡面有initialize,那麼fn的原型裡就有initialize,那麼它就是構造方法
//2如果o是function,methods什麼也添加不到fn的原型裡,但是_constructor會接受o當建構子
//3如果o是{....},同時裡面也沒有initialize,那麼就是this當建構子,如果在klass裡由call決定,顯然建構子是noop,如果在非基礎類別裡,建構子就是父類別的建構子
//由於o不是函式不會自動呼叫父類別的建構子,只是把父類別的建構子當做目前類別的建構子----這都是由於this的指向決定的
console.log(this);
if(this.initialize){
this.initialize.apply(this,arguments);
}else{
//呼叫父類別建構方法
//如上面3,o不是函數,不會呼叫父類別的建構方法
//基礎類別無父類別,不會呼叫父類別建構方法
fromSub||isFn(o)&&supr.apply(this,arguments);
//呼叫本類構造方法
//參考上面2,3要不是noop就是o
console.log(_constructor ==noop);
_constructor.apply(this,arguments);
}
};
//建構原型方法的介面
fn.methods=function(o){
process(prototype,o,supr);
fn[proto]=prototype;
returnthis;
};
//執行實作新類別原型，保證新類別的constructor
fn .methods.call(fn,_methods).prototype.constructor=fn;
//保證新類別可以被繼承
fn.extend=arguments.callee;
//新增實例方法或靜態方法, statics:靜態方法,implement實例方法
fn[proto].implement=fn.statics=function(o,optFn){
//保證o是object對象，如果o是字串，那就是添一個方法的情況，如果o是一個object物件說明是批量添加的
//因為要從o裡面拷貝
o=typeofo=='string'?(function(){
varobj= {};
obj[o]=optFn;
returnobj;
}()):o;
//新增實例方法或靜態方法,statics:靜態方法,implement實例方法
process(this,o,supr);
returnthis;
};
returnfn;
}
//後台用,nodejs
if(typeofmodule!=='undefined' &&module.exports){
module.exports=klass;
}else{
varold=context.klass;
//防衝突
klass.noConflict=function(){
context.klass=old;
returnthis;
};
//前台瀏覽器用
//window.kclass=kclass;
context.klass=klass;
}
}(this,'function');
3. 간단한 구현도 있습니다 구현 아이디어는 매우 간단합니다. 즉, ECMAScript5 프로토타입을 사용하여 Object.create 메서드를 상속하고 이를 메서드로 캡슐화하는 것입니다. ECMAScript5 환경은 지원하지 않으므로 번역되어 성능이 저하됩니다.
functionF(){};
F.prototype=superCtor.prototype;
ctor.prototype=newF()
ctor.prototype.constructor=ctor;
마지막 매개변수가 현재 클래스의 메서드 선언이라는 점을 제외하면 다른 매개변수는 상위 클래스에서 상속되어 순환 상속이 필요하지만 여기에서의 처리는 비교적 간단하고 덮어쓰기가 포함되지 않습니다. 직접 추가할 수 있습니다.
varClass=(function(){
/* *
*함수 상속.(node.js)
*
*@paramctorsubclass'sconstructor.
*@paramsuperctorsuperclass의 생성자입니다.
*/
varinherits=function(ctor,superCtor){
//부모 클래스를 명시적으로 지정
ctor.super_=superCtor;
//ECMAScript5 프로토타입 상속 및 역참조
if(Object.create){
ctor.prototype=Object.create(superCtor.prototype,{
생성자:{
값:ctor,
열거 가능:false,
쓰기 가능 :true,
configurable:true
}
});
}else{
//Object.create 메서드 없이 원활한 성능 저하
functionF(){}; .prototype=superCtor.prototype;
ctor.prototype=newF();
ctor.prototype.constructor=ctor;
}
}; 🎜>returnfunction(){
//마지막 매개변수는 새 클래스 메서드, 특성 및 생성자 선언입니다.
varsubClazz=arguments[arguments.length-1]||function(){}; 초기화는 생성자이고 그렇지 않으면 생성자는 빈 함수입니다.
varfn=subClazz.initialize==null?function(){}:subClazz.initialize;
//마지막 매개변수를 제외하고 클래스를 상속하면 더 많은 상속이 가능합니다. 확장 메서드로도 사용 가능
for(varindex=0;index
inherits(fn,arguments[index])
}
// 메서드 새로운 클래스 구현
for(varpropinsubClazz){
if(prop=="initialize"){
continue;
}
fn.prototype[prop]=subClazz[prop]
}
returnfn;
}
})()
다음 예를 참조하세요.
복사 코드
코드는 다음과 같습니다.
*/
initialize:function(name){
this.name=name
},
/**
*건축자.
*
*@paramname고양이 이름
*/
eat:function(){
alert (this. name "iseatingfish.");
}
})
/**
*먹기 기능.
*/
varBlackCat=Class(Cat,{
/**
*BlackCat 클래스의 정의.
*/
initialize:function(name,age){
//calltheconstructorofsuperclass.
BlackCat.super_.call(this,name)
this.age=age
} 🎜>/ **
*건축자.
*
*@paramname고양이 이름.
*@paramageCat'sage.
*/
eat:function(){
alert(this.name "(" this.age ")iseatingdog.")
}
});
/**
*먹기 기능.
*/
varBlackFatCat=Class(BlackCat,{
/**
*BlackFatCat 클래스의 정의입니다.
*@paramweightCat'sweight.
*/
초기화:함수(이름, age,weight ){
//calltheconstructorofsuperclass.
BlackFatCat.super_.call(this,name,age)
this.weight=weight;
/**
*건축자.
*
*@paramname고양이 이름.
*@paramageCat'sage.
*@paramweightCat의 체중입니다.
*/
eat:function(){
alert(this.name "(" this.age ")iseatingdog.Myweight:" this.weight)
}
}); >/* *
*먹기 기능.
*/
varDog=Class({});
varcat=newBlackFatCat("John",24,"100kg")
cat.eat(); //true
alert(catinstanceofCat);
//true
alert(catinstanceofBlackCat);//true
alert(catinstanceofBlackFatCat)
//true
alert( cat.constructor ===BlackFatCat);
//false
alert(catinstanceofDog);
mootools 클래스의 소스 코드 분석 라이브러리는 여기에서 볼 수 있습니다: http://www.cnblogs.com/hmking/archive/2011/09/30/2196504.html
구체적인 사용법 보기:
a 새 클래스 만들기
코드 복사
코드는 다음과 같습니다.
varCat=newClass({
initialize:function(name ){
this.name=name ;
}
})
varmyCat=newCat('Micia')
alert(myCat.name);//alerts'Micia' varCow=newClass({ 초기화:function(){ alert('moooo'); } });
b、繼承的實作
varAnimal=Class( {
initialize:function(age){
this.age=age;
}
});
varCat=newClass({
Extends:Animal,
initialize function(name,age){
this.parent(age);//callsinitalizemethodofAnimalclass
this.name=name;
}
});
varmyCat=newCat('M)'icia, 20);
alert(myCat.name);//alerts'Micia'.
alert(myCat.age);//alerts20.
c、擴充類別的實作
varAnimal=newClass({
varAnimal=newClass({
varAnimal=newClass({
this.age=age;
}
});
varCat=newClass({
Implements:Animal,
setName:function(name){
this .name=name
}
});
varmyAnimal=newCat(20); myAnimal.setName('Micia');
alert(myAnimal.name);//alerts' Micia'.
複製程式碼
程式碼如下:
//建立類別Person
varPerson=Class(object,{
Create:function(reate name,age){
this.name=name;
this.age=age;
},
SayHello:function(){
alert("Hello,I'm" this .name "," this.age "yearsold.");
}
});
varBillGates=New(Person,["BillGates",53]);
BillGates.SayHello() ; b、繼承類別
複製程式碼
程式碼如下:
//Employee繼承Person
varEmployee=Class(Person,{
Create:function(name,age,salary){
Person.Create.call(this,name,age);
//呼叫基底類別的建構子
this.salary=salary;
},
ShowMeTheMoney:function(){
alert(this.name "$" this.salary);
}
});
varSteveJobs=New(Employee,["SteveJobs",53,1234]);
SteveJobs.SayHello();
SteveJobs.ShowMeTheMoney();
下面是原始碼分析：顯然，多了一個New方法，創建類別和新建類別的實例都被巧妙的封裝了。形成了一個有意義的整體！還有一點不同的地方，所有的類別都基於字面量，而不是基於函數。程式碼很簡短，但其中原理卻很豐富也很巧妙，可以細細品味一番！ 複製程式碼
程式碼如下:
//建立類別的函數，用於宣告類別及繼承關係
functionClass(aBaseClass,aClassDefine){
//建立類別的臨時函數殼
functionclass_(){
this.Type=aBaseClass;
//我們給每一個類別約定一個Type屬性，引用其繼承的類別
for(varmemberinaClassDefine)
this[member]=aClassDefine[member];
//複製類別的全部定義到目前建立的類別
};
class_.prototype=aBaseClass;
returnnewclass_();
};
//建立物件的函數，用於任意類別的物件建立
functionNew(aClass,aParams){
//建立物件的暫存函數殼
functionnew_(){
this.Type=aClass;
//我們也給予每個物件約定一個Type屬性，據此可以存取到物件所屬的類別
if(aClass.Create)
aClass.Create.apply(this,aParams);
//我們約定所有類別的建構子都叫做Create，這和DELPHI比較相似
};
new_.prototype=aClass;
returnnewnew_();
};
由於寫的比較籠統，可能有很多地方沒有解析到，也可能有不準確的地方，還望指正。 看完上面幾種解析，相資訊自己也可以寫出一個自己的封裝類別庫出來，至於，怎麼實現看個人喜好了。但基本的思都是一樣的基於原型的繼承方式和循環拷貝新方法。 原文出自：穆乙 http://www.cnblogs.com/pigtail/
