javascript 中類的概念

編寫和維護復雜的Javascipt代碼,必須使用模塊化策略。目前,業(yè)界的主流做法是采用"面向?qū)ο缶幊?。因此,Javascript如何實現(xiàn)面向?qū)ο缶幊?,就成了一個熱門課題。
麻煩的是,Javascipt語法不支持class,導致傳統(tǒng)的面向?qū)ο缶幊谭椒o法直接使用。(當然ES6已經(jīng)支持class),可以還是有一部分前端工作人員在現(xiàn)有的工作環(huán)境上無法使用ES6標準

下面代碼本人使用的一段定義類的方法,代碼不長,但很實用,希望能幫助到想擺脫javascript代碼一多就亂成一坨的同學們
/**
 * 封裝類方法
 * @methodOf Clazz.prototype
 */
var Clazz = function() {};
/**
 * [給基類的原型賦值一個方法 當作類的構(gòu)造器]
 * @return {[Object]} [description]
 */
Clazz.prototype.construct = function() {};
/**
 * 創(chuàng)建類
 * @example
 * var MyClass = Clazz.extend({
 *   //構(gòu)造器,new時執(zhí)行
 *   construct: function(myParam){
 *     // 編寫你的代碼邏輯
 *   }
 * });
 *
 * 繼承類
 * var MySubClass = MyClass.extend({
 *   construct: function(myParam){
 *     // 使用這個來調(diào)用父類的構(gòu)造函數(shù)
 *     arguments.callee.$.construct.apply(this, arguments);
 *     // 編寫你的代碼邏輯
 *   }
 * });
 */
Clazz.extend = function(def) {
    var classDef = function() {
        if (arguments[0] !== Clazz) { this.construct.apply(this, arguments); }
    };
    var proto = new this(Clazz);
    var superClass = this.prototype;
    for (var n in def) {
        var item = def[n];
        if (item instanceof Function) item.$ = superClass;
        proto[n] = item;
    }
    classDef.prototype = proto;
    //給這個新類相同的靜態(tài)擴展方法
    classDef.extend = this.extend;
    return classDef;
};

//========使用實例=========
var MyClass = Clazz.extend({
    construct: function(options){
        this.name = 'MyClass ';
        this.myClassName = 'myClassName ';
    },
    getName: function(){
        return this.name;
    },
    setName: function(name){
        if(name) this.name = name;
    }
});
//繼承MyClass 類
var SubClass1 = MyClass .extend({
    construct: function(){
        //未調(diào)用父類的構(gòu)造函數(shù)
        this.name = 'SubClass ';
    }
});
//繼承MyClass 類
var SubClass2 = MyClass .extend({
    construct: function(){
        //調(diào)用父類構(gòu)造函數(shù)
        arguments.callee.$.construct.apply(this, arguments);
        this.name = 'SubClass ';
    }
});

var myClass = new MyClass();
var subClass1 = new SubClass1();
var subClass2 = new SubClass2();

console.log(myClass.getName());     //MyClass 
console.log(myClass.myClassName);   //myClassName

console.log(subClass1.getName());   //SubClass1
console.log(subClass1.myClassName); //undefined

console.log(subClass2.getName());   //SubClass2
console.log(subClass2.myClassName); //myClassName
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容