javascript面向?qū)ο蟀�裝類(lèi)Class的類(lèi)庫(kù)解析

項(xiàng)目地址：https://github.com/jiem/my-class

先看基本用法：

a、新建一個(gè)類(lèi)

(function() {
  // 新建類(lèi)
  var Person = my.Class({
    // 添加靜態(tài)方法
    STATIC: {
      AGE_OF_MAJORITY: 18
    },
    // 構(gòu)造函數(shù)
    constructor: function(name, age) {
      this.name = name;
      this.age = age;
    },
    // 實(shí)例方法
    sayHello: function() {
      console.log('Hello from ' + this.name + '!');
    },
    // 實(shí)例方法
    drinkAlcohol: function() {
      this.age < Person.AGE_OF_MAJORITY ?
        console.log('Too young! Drink milk instead!') :
        console.log('Whiskey or beer?');
    }

  });
  // 暴露給命名空間
  myLib.Person = Person;

})();

var john = new myLib.Person('John', 16);
john.sayHello(); //log "Hello from John!"
john.drinkAlcohol(); //log "Too young! Drink milk instead!"

b、繼承一個(gè)類(lèi)

(function() {

  //Dreamer 繼承 Person
  var Dreamer = my.Class(Person, {
    // 構(gòu)造方法
    constructor: function(name, age, dream) {
      Dreamer.Super.call(this, name, age);
      this.dream = dream;
    },
    // 實(shí)例方法
    sayHello: function() {
      superSayHello.call(this);
      console.log('I dream of ' + this.dream + '!');
    },
    // 實(shí)例方法
    wakeUp: function() {
      console.log('Wake up!');
    }

  });
  // Super訪問(wèn)父類(lèi)
  var superSayHello = Dreamer.Super.prototype.sayHello;
  // 暴露給全局命名空間
  myLib.Dreamer = Dreamer;

})();

var sylvester = new myLib.Dreamer('Sylvester', 30, 'eating Tweety');
sylvester.sayHello(); //log "Hello from Sylvester! I dream of eating Tweety!"
sylvester.wakeUp(); //log "Wake up!"

c、給類(lèi)添加新方法

// 給myLib.Dreamer添加新方法
my.extendClass(myLib.Dreamer, {
  // 添加靜態(tài)方法
  STATIC : {
    s_dongSomeThing : function(){
        console.log("do some thing!");    
    }
  },
  // 添加實(shí)例方法
  touchTheSky: function() {
    console.log('Touching the sky');
  },
  // 添加實(shí)例方法
  reachTheStars: function() {
    console.log('She is so pretty!');
  }

});

d、實(shí)現(xiàn)一個(gè)類(lèi)的方法

// 聲明一個(gè)新類(lèi)
myLib.ImaginaryTraveler = my.Class({
  travel: function() { console.log('Traveling on a carpet!'); },
  crossOceans: function() { console.log('Saying hi to Moby Dick!'); }
});

(function() {

  //Dreamer 繼承 Person 實(shí)現(xiàn) ImaginaryTraveler的方法
  var Dreamer = my.Class(Person, ImaginaryTraveler, {
    // 構(gòu)造方法
    constructor: function(name, age, dream) {
      Dreamer.Super.call(this, name, age);
      this.dream = dream;
    }

   // ...

  });
  // 暴露給全局命名空間
  myLib.Dreamer = Dreamer;

})();

var aladdin = new Dreamer('Aladdin');
aladdin instanceof Person; //true
aladdin instanceof ImaginaryTraveler; //false
aladdin.travel();
aladdin.wakeUp();
aladdin.sayHello();

如果怕忘記new操作符

var Person = my.Class({

  //you can now call the constructor with or without new
  constructor: function(name, city) {
    if (!(this instanceof Person))
      return new Person(name, city);
    this.name = name;
    this.city = citye;
  }

});

下面看一下my.class的源代碼解析：

my.Class實(shí)現(xiàn)思路基本是這樣的，如果只有一個(gè)參數(shù)，那么聲明的是一個(gè)基礎(chǔ)類(lèi)，這個(gè)參數(shù)是用來(lái)聲明新類(lèi)的方法和屬以及構(gòu)造函數(shù)。它不是繼承而來(lái)，但它可以被繼承。

繼承的思路，就是如果有兩個(gè)參數(shù)，第一個(gè)參數(shù)做為父類(lèi)被繼承，第二參數(shù)用來(lái)聲明新類(lèi)的方法和屬性以及構(gòu)造函數(shù)，它同樣可以被繼承。

如果有三個(gè)以上參數(shù)那么，除出第一個(gè)參數(shù)做為繼承的父類(lèi)，最后一個(gè)參數(shù)用聲明新類(lèi)的方法和屬性以及構(gòu)造函數(shù)。中間的參數(shù)是用類(lèi)來(lái)擴(kuò)展新類(lèi)的方法。當(dāng)然也可以通過(guò)my.extendClass擴(kuò)展新方法。

同時(shí)，類(lèi)庫(kù)為commonJS和瀏覽環(huán)境都提供了支持！

/*globals define:true, window:true, module:true*/
(function () {
  // Namespace object
  var my = {};
  // 保證AMD分模塊可用
  if (typeof define !== 'undefined')
    define([], function () {
      return my;
    });
  else if (typeof window !== 'undefined')
    // 保證客戶端可用
    window.my = my;
  else
    // 保證后臺(tái)可用
    module.exports = my;

  //============================================================================
  // @method my.Class
  // @params body:Object
  // @params SuperClass:function, ImplementClasses:function..., body:Object
  // @return function
  my.Class = function () {

    var len = arguments.length;
    var body = arguments[len - 1];    // 最后一個(gè)參數(shù)是指定本身的方法
    var SuperClass = len > 1 ? arguments[0] : null;     // 第一個(gè)參數(shù)是指繼承的方法，實(shí)例和靜態(tài)部分均繼承
    var hasImplementClasses = len > 2;    // 如果有第三個(gè)參數(shù)，那么第二個(gè)就是implementClass,這里其實(shí)只繼承實(shí)例對(duì)象
    var Class, SuperClassEmpty;
    
    // 保證構(gòu)造方法
    if (body.constructor === Object) {
      Class = function() {};
    } else {
      Class = body.constructor;
      // 保證后面不覆蓋constructor
      delete body.constructor;
    }
    // 處理superClass部分
    if (SuperClass) {
      // 中間件實(shí)現(xiàn)實(shí)例屬性的繼承
      SuperClassEmpty = function() {};
      SuperClassEmpty.prototype = SuperClass.prototype;
      Class.prototype = new SuperClassEmpty();    // 原型繼承，解除引用
      Class.prototype.constructor = Class;    // 保證constructor
      Class.Super = SuperClass;    // 父對(duì)象訪問(wèn)接口
      
      // 靜態(tài)方法繼承，重載superClass方法
      extend(Class, SuperClass, false);
    }
    
    // 處理ImplementClass部分,其實(shí)只繼承實(shí)例屬性部分,除SuperClass #arguments[0]# 和 body #arguments[length-1]#
    if (hasImplementClasses)
      for (var i = 1; i < len - 1; i++)
        // implement是繼承的實(shí)例屬性部分, 重載父對(duì)象implementClass方法
        extend(Class.prototype, arguments[i].prototype, false);    
    
    // 處理本身聲明body部分，靜態(tài)要STATIC指定,實(shí)例部分要?jiǎng)h除STATIC部分
    extendClass(Class, body);
    
    return Class;

  };

  //============================================================================
  // @method my.extendClass
  // @params Class:function, extension:Object, ?override:boolean=true
  var extendClass = my.extendClass = function (Class, extension, override) {
    // 靜態(tài)部分繼承靜態(tài)部分
    if (extension.STATIC) {
      extend(Class, extension.STATIC, override);
      // 保證實(shí)例部分不繼承靜態(tài)方法
      delete extension.STATIC;
    }
    // 實(shí)例屬性繼繼承實(shí)例部
    extend(Class.prototype, extension, override);
  };

  //============================================================================
  var extend = function (obj, extension, override) {
    var prop;
    // 其實(shí)這里的flase是表明，覆蓋父對(duì)象的方法
    if (override === false) {
      for (prop in extension)
        if (!(prop in obj))
          obj[prop] = extension[prop];
    } else {
       // 這里其實(shí)不覆蓋父對(duì)象的方法,包括toString
      for (prop in extension)
        obj[prop] = extension[prop];
      if (extension.toString !== Object.prototype.toString)
        obj.toString = extension.toString;
    }
  };

})();

二、KLASS

 項(xiàng)目地址：https://github.com/ded/klass

先看使用方法：

a、新建一個(gè)類(lèi)

// 聲明一個(gè)類(lèi)
var Person = klass(function (name) {
  this.name = name
})
  .statics({//靜態(tài)方法
    head: ':)',
    feet: '_|_'
  })
  .methods({//實(shí)例方法
    walk: function () {}
  })

b、繼承一個(gè)類(lèi)

// SuperHuman 繼承 Person
var SuperHuman = Person.extend(function (name) {
  // 自動(dòng)調(diào)用父類(lèi)的構(gòu)造方法
})
  .methods({
    walk: function() {
      // 顯式聲明調(diào)用父類(lèi)的walk方法
      this.supr()
      this.fly()
    },

    fly: function() {}

  })

new SuperHuman('Zelda').walk()

c、字面量方式聲明一個(gè)類(lèi)

var Foo = klass({
  foo: 0,
  initialize: function() {
    this.foo = 1
  },
  getFoo: function () {
    return this.foo
  },
  setFoo: function (x) {
    this.foo = x
    return this.getFoo()
  }
})

d、實(shí)現(xiàn)一個(gè)類(lèi)的方法

因?yàn)橛袝r(shí)候你可能希望覆寫(xiě)或者混合一個(gè)實(shí)例方法，可以這樣：

// 可以傳遞一個(gè)字面量去繼承
var Alien = SuperHuman.extend({
  beam: function() {
    this.supr()
    // beam into space
  }
})

var Spazoid = new Alien('Zoopo')

if (beamIsDown) {
  // 覆寫(xiě)beam方法
  Spazoid.implement({
    beam: function() {
      this.supr()
      // fallback to jets
      this.jets()
    }
  })
}

下面看一下klass源代碼解析：

klass的基本設(shè)計(jì)思路很明確，極力的模仿其它語(yǔ)言的繼承方式。比如：子類(lèi)構(gòu)造方法調(diào)用父類(lèi)的構(gòu)造方法，還可以顯式的聲明調(diào)用父類(lèi)的方法。

這種判斷都是基于正則匹配：fnTest = /xyz/.test(function () {xyz;}) ? /\bsupr\b/ : /.*/；關(guān)鍵字"super"

如果顯示的聲明了要調(diào)用父類(lèi)的方法，那么聲明方法的時(shí)候，就包裝成一個(gè)內(nèi)部調(diào)用父類(lèi)方法且返回相同值的函數(shù)，給當(dāng)前類(lèi)的方法。

另一方面，構(gòu)造方法，也是比較靈活的。如果顯示的聲明了initialize,那么這就是構(gòu)造方法。否則如果參數(shù)是個(gè)function那么它就做為構(gòu)造方法，否則就用父類(lèi)的構(gòu)造方法。

通過(guò)statics方式添加靜態(tài)方法，通過(guò)實(shí)例的implements和靜態(tài)方法methods添加實(shí)例方法。

通過(guò)父類(lèi)的extend實(shí)現(xiàn)繼承。

同時(shí)，類(lèi)庫(kù)為commonJS和瀏覽環(huán)境都提供了支持！

/**
  * Klass.js - copyright @dedfat
  * version 1.0
  * https://github.com/ded/klass
  * Follow our software http://twitter.com/dedfat :)
  * MIT License
  */
!function (context, f) {
  // fnTest用來(lái)驗(yàn)證是否可能通過(guò)正則找出調(diào)用super父類(lèi)方法的方法
  var fnTest = /xyz/.test(function () {xyz;}) ? /\bsupr\b/ : /.*/,
      noop = function (){},
      proto = 'prototype',
      isFn = function (o) {
        return typeof o === f;
      };
  // 基礎(chǔ)類(lèi)
  function klass(o) {
    return extend.call(typeof o == f ? o : noop, o, 1);
  }

  // 包裝成一個(gè)借用super同名方法的函數(shù)
  function wrap(k, fn, supr) {
    return function () {
      // 緩存原this.super
      var tmp = this.supr;
      // 暫把this.super改造成借用super的同名方法above
      // 供o里顯式的聲明(fnTest.text(fn)==true)要借用super的同名方法使用
      this.supr = supr[proto][k];
      // 借用執(zhí)行并保存返回值
      var ret = fn.apply(this, arguments);
      // 恢復(fù)原this.super
      this.supr = tmp;
      // 返回返回值，保證wrap后的返回值跟原來(lái)一致
      return ret;
    };
  }
   // 如果o和super有同名方法，且o顯式聲明借用super的同名方法，就wrap成一個(gè)待執(zhí)行函數(shù)供使用
   // 如果沒(méi)有顯式的聲明借用super的同名方法,或者是o獨(dú)有的方法，或者不是方法就直接用
  function process(what, o, supr) {
    for (var k in o) {
      // 如果是非繼承方法,按方法注釋規(guī)則執(zhí)行,最終都放進(jìn)what
      if (o.hasOwnProperty(k)) {
        what[k] = typeof o[k] == f
          && typeof supr[proto][k] == f
          && fnTest.test(o[k])
          ? wrap(k, o[k], supr) : o[k];
      }
    }
  }
  // 繼承方法的實(shí)現(xiàn),fromSub是用來(lái)控制是否繼承而來(lái),上面的klass里面fromSub是1,表明非繼承而來(lái),構(gòu)造函數(shù)不借用super執(zhí)行
  function extend(o, fromSub) {
    // noop做為媒介類(lèi)實(shí)現(xiàn)原型繼承的解除引用
    noop[proto] = this[proto];
    
    var supr = this,
        prototype = new noop(), // 創(chuàng)建實(shí)例對(duì)象供原型繼承使用，解除引用
        isFunction = typeof o == f,
        _constructor = isFunction ? o : this,// 如果o是一個(gè)構(gòu)造方法就用,否則由this來(lái)決定構(gòu)造函數(shù)
        _methods = isFunction ? {} : o,    // 如果o是一個(gè){...}應(yīng)該用methods放到fn原型里,如果里面有initialize就是構(gòu)造函數(shù),如果o是函數(shù)就由上面_constructor決定o是構(gòu)造函數(shù)
        fn = function () { // 因?yàn)閗class借助了kclass,所以最終實(shí)際上返回的就是fn,fn其實(shí)就新類(lèi)的構(gòu)造函數(shù)
          
          //1 如果o是{...}就會(huì)被methods直接過(guò)濾并添加到fn的原型里,如果o里面有initialize,那么fn的原型里就有initialize,那么它就是構(gòu)造方法
          //2 如果o是function,methods什么也添加不到fn的原型里,但是_constructor會(huì)接受o當(dāng)構(gòu)造函數(shù)
          //3 如果o是{....},同時(shí)里面也沒(méi)有initialize,那么就是this當(dāng)構(gòu)造函數(shù),如果在klass里由call決定,顯然構(gòu)造函數(shù)是noop,如果在非基礎(chǔ)類(lèi)里,構(gòu)造函數(shù)就是父類(lèi)的構(gòu)造函數(shù)
          //  由于o不是函數(shù)不會(huì)自動(dòng)調(diào)用父類(lèi)的構(gòu)造函數(shù),只是把父類(lèi)的構(gòu)造函數(shù)當(dāng)做當(dāng)前類(lèi)的構(gòu)造函數(shù)----這都是由于this的指向決定的
          console.log(this);
          if (this.initialize) {
            this.initialize.apply(this, arguments);
          } else {
            // 調(diào)用父類(lèi)構(gòu)造方法
            // 如上面3,o不是函數(shù),不會(huì)調(diào)用父類(lèi)的構(gòu)造方法
            // 基礎(chǔ)類(lèi)無(wú)父類(lèi),不會(huì)調(diào)用父類(lèi)構(gòu)造方法
            fromSub || isFn(o) && supr.apply(this, arguments);
            // 調(diào)用本類(lèi)構(gòu)造方法
            // 參考上面2,3要么是noop要么是o
            console.log(_constructor==noop);
            _constructor.apply(this, arguments);
          }
        };
    // 構(gòu)造原型方法的接口
    fn.methods = function (o) {
      process(prototype, o, supr);
      fn[proto] = prototype;
      return this;
    };
    // 執(zhí)行實(shí)現(xiàn)新類(lèi)原型，保證新類(lèi)的constructor
    fn.methods.call(fn, _methods).prototype.constructor = fn;
    // 保證新類(lèi)可以被繼承
    fn.extend = arguments.callee;
    // 添加實(shí)例方法或者靜態(tài)方法,statics:靜態(tài)方法,implement實(shí)例方法
    fn[proto].implement = fn.statics = function (o, optFn) {
      // 保證o是一個(gè)object對(duì)象，如果o是一個(gè)字符串，那么就是添一個(gè)方法的情況，如果o是一個(gè)object對(duì)象說(shuō)明是批量添加的
      // 因?yàn)橐獜膐里面拷貝
      o = typeof o == 'string' ? (function () {
        var obj = {};
        obj[o] = optFn;
        return obj;
      }()) : o;
      // 添加實(shí)例方法或者靜態(tài)方法,statics:靜態(tài)方法,implement實(shí)例方法
      process(this, o, supr);
      return this;
    };

    return fn;
  }

  // 后臺(tái)用,nodejs
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = klass;
  } else {
    
    var old = context.klass;
    // 防沖突
    klass.noConflict = function () {
      context.klass = old;
      return this;
    };
    // 前臺(tái)瀏覽器用
    //window.kclass = kclass;
    context.klass = klass;
  }

}(this, 'function');

三、還有一種簡(jiǎn)單實(shí)現(xiàn)

實(shí)現(xiàn)思路很簡(jiǎn)單，就是利用ECMAScript 5 原型式繼承Object.create方法，封裝成一個(gè)方法，如果不支持ECMAScript5的環(huán)境，就平移退化到

function F() {};  
F.prototype = superCtor.prototype;  
ctor.prototype = new F();  
ctor.prototype.constructor = ctor;

同樣的，除最后一個(gè)參數(shù)是當(dāng)前類(lèi)的方法聲明，其它參數(shù)均做為繼承父類(lèi)，需要循環(huán)繼承，但當(dāng)這里處理的相對(duì)比較簡(jiǎn)單，沒(méi)涉及到覆蓋。你可以自己動(dòng)手添加。

var Class = (function() {  
      
    /**  
     * Inherits function.(node.js)  
     *   
     * @param ctor subclass's constructor.  
     * @param superctor superclass's constructor.  
     */  
    var inherits = function(ctor, superCtor) { 
        // 顯式的指定父類(lèi)
        ctor.super_ = superCtor;  
          
        // ECMAScript 5  原型式繼承并解除引用
        if (Object.create) {  
            ctor.prototype = Object.create(superCtor.prototype, {  
                constructor: {  
                    value: ctor,  
                    enumerable: false,  
                    writable: true,  
                    configurable: true  
                }  
            });  
        } else {  
            // 無(wú)Object.create方法的平穩(wěn)退化
            function F() {};  
            F.prototype = superCtor.prototype;  
            ctor.prototype = new F();  
            ctor.prototype.constructor = ctor;  
        }  
    };  
      
    /**  
     * Class function.  
     */  
    return function() {  
        // 最后一個(gè)參數(shù)是新類(lèi)方法、屬性和構(gòu)造函數(shù)聲明
        var subClazz = arguments[arguments.length - 1] || function() {};  
        // initialize是構(gòu)造函數(shù)，否構(gòu)造函數(shù)就是一個(gè)空函數(shù)
        var fn = subClazz.initialize == null ? function() {} : subClazz.initialize;  
        // 繼承除最一個(gè)參數(shù)以的類(lèi)，多繼承，也可以用作擴(kuò)展方法 
        for (var index = 0; index < arguments.length - 1; index++) {  
            inherits(fn, arguments[index]);  
        }  
        // 實(shí)現(xiàn)新類(lèi)的方法
        for (var prop in subClazz) {  
              
            if (prop == "initialize") {  
                continue;  
            }  
              
            fn.prototype[prop] = subClazz[prop];  
        }  
        
        return fn;  
    }  
      
})(); 

看下面實(shí)例：

/**  
 * The definition of Cat Class.  
 */  
var Cat = Class({  
      
    /**  
     * Constructor.  
     *   
     * @param name Cat's name  
     */  
    initialize: function(name) {
        this.name = name;  
    },  
      
    /**  
     * Eat function.  
     */  
    eat: function() {  
        alert(this.name + " is eating fish.");  
    }  
});  
  
/**  
 * The definition of Black Cat Class.  
 */  
var BlackCat = Class(Cat, {  
      
    /**  
     * Constructor.  
     *   
     * @param name Cat's name.  
     * @param age Cat's age.  
     */  
    initialize: function(name, age) {  
        // call the constructor of super class.  
        BlackCat.super_.call(this, name);  
        this.age = age;  
          
    },  
      
    /**  
     * Eat function.  
     */  
    eat: function() {  
        alert(this.name + "(" + this.age + ") is eating dog.");  
    }  
});  
  
/**  
 * The definition of Black Fat Cat Class.  
 */  
var BlackFatCat = Class(BlackCat, {  
      
    /**  
     * Constructor.  
     *   
     * @param name Cat's name.  
     * @param age Cat's age.  
     * @param weight Cat's weight.  
     */  
    initialize: function(name, age, weight) {  
        // call the constructor of super class.  
        BlackFatCat.super_.call(this, name, age);  
        this.weight = weight;  
    },  
      
    /**  
     * Eat function.  
     */  
    eat: function() {  
        alert(this.name + "(" + this.age + ") is eating dog. My weight: " + this.weight);  
    }  
});  
  
  
/**  
 * The definition of Dog Class.  
 */  
var Dog = Class({});  
  
var cat = new BlackFatCat("John", 24, "100kg");  
cat.eat();  
  
// true  
alert(cat instanceof Cat);  
  
// true  
alert(cat instanceof BlackCat);  
  
// true  
alert(cat instanceof BlackFatCat);  
  
// true  
alert(cat.constructor === BlackFatCat);  
  
// false  
alert(cat instanceof Dog);  

四、mootools類(lèi)庫(kù)的Class

源碼解析可以看這里：http://www.cnblogs.com/hmking/archive/2011/09/30/2196504.html

看具體用法：

a、新建一個(gè)類(lèi)

var Cat = new Class({
    initialize: function(name){
        this.name = name;
    }
});
var myCat = new Cat('Micia');
alert(myCat.name); // alerts 'Micia'
 
var Cow = new Class({
    initialize: function(){
        alert('moooo');
    }
});

b、繼承的實(shí)現(xiàn)

var Animal = new Class({
    initialize: function(age){
        this.age = age;
    }
});
var Cat = new Class({
    Extends: Animal,
    initialize: function(name, age){
        this.parent(age); // calls initalize method of Animal class
        this.name = name;
    }
});
var myCat = new Cat('Micia', 20);
alert(myCat.name); // alerts 'Micia'.
alert(myCat.age); // alerts 20.

c、擴(kuò)充類(lèi)的實(shí)現(xiàn)

var Animal = new Class({
    initialize: function(age){
        this.age = age;
    }
});
var Cat = new Class({
    Implements: Animal,
    setName: function(name){
        this.name = name
    }
});
var myAnimal = new Cat(20);
myAnimal.setName('Micia');
alert(myAnimal.name); // alerts 'Micia'.

由于寫(xiě)的比較籠統(tǒng)，可能有很多地方?jīng)]有解析到，也可能有不準(zhǔn)確的地方，還望指正。

看完上面幾種解析，相信息自己也可以寫(xiě)出一個(gè)自己的封裝類(lèi)庫(kù)出來(lái)，至于，怎么實(shí)現(xiàn)看個(gè)人喜好了。但基本的思都是一樣的基于原型的繼承方式和循環(huán)拷貝新方法。