javascript面向对象包装类Class的类库解析
javascript是个入门门槛很低的语言，甚至一个从来没有接触过javascript的技术人员，几小时内就可以写出一个简单有用的程序代码。
但是如果因此你就下结论：javascript是门简单的语言。那你就大错特错了。想写出高性能的代码，同样需要具备一个高级程序员的基本素养。
一个java或者c++程序员，不一定能写出高性能的javascript代码，但更容易写出高性能的javascript代码。
javascript的简单是基于它“胸襟广阔”的包容性。它声明时，不需要指定类型，甚至可以任意的转换类型。它面向对象，却没有类（Class）的限制。它是一门崇尚自由又非常严谨的语言，如果你是一个自由主义者，那么，拥抱javascript吧！
面向对象编程 (OOP) 是一种流行的编程方法。但javascript的OOP，较之JAVA、c++有很大的同，主要体现它的继承方式不同。javascript是基于原型PROTOTYPE继承的。所有对象都是基于原型链，最终追述到Object对象。
这里不想讨论过多的关于javascript的继承方式和其它语言的继承方式的不同之处。主要讨论如何封装javascript的Class，以便更好的管理和维护基础代码，减少重复代码，以及更好的模块化编程。
下面是几个github上找到的比较好的Class封装类库：
一、MY-CLASS
项目地址：https://github.com/jiem/my-class
先看基本用法：
a、新建一个类
(function() { // 新建类 var Person = my.Class({ // 添加静态方法 STATIC: { AGE_OF_MAJORITY: 18 }, // 构造函数 constructor: function(name, age) { this.name = name; this.age = age; }, // 实例方法 sayHello: function() { console.log('Hello from ' + this.name + '!'); }, // 实例方法 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、继承一个类
(function() { //Dreamer 继承 Person var Dreamer = my.Class(Person, { // 构造方法 constructor: function(name, age, dream) { Dreamer.Super.call(this, name, age); this.dream = dream; }, // 实例方法 sayHello: function() { superSayHello.call(this); console.log('I dream of ' + this.dream + '!'); }, // 实例方法 wakeUp: function() { console.log('Wake up!'); } }); // Super访问父类 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、给类添加新方法
// 给myLib.Dreamer添加新方法 my.extendClass(myLib.Dreamer, { // 添加静态方法 STATIC : { s_dongSomeThing : function(){ console.log("do some thing!"); } }, // 添加实例方法 touchTheSky: function() { console.log('Touching the sky'); }, // 添加实例方法 reachTheStars: function() { console.log('She is so pretty!'); } });
d、实现一个类的方法
// 声明一个新类 myLib.ImaginaryTraveler = my.Class({ travel: function() { console.log('Traveling on a carpet!'); }, crossOceans: function() { console.log('Saying hi to Moby Dick!'); } }); (function() { //Dreamer 继承 Person 实现 ImaginaryTraveler的方法 var Dreamer = my.Class(Person, ImaginaryTraveler, { // 构造方法 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实现思路基本是这样的，如果只有一个参数，那么声明的是一个基础类，这个参数是用来声明新类的方法和属以及构造函数。它不是继承而来，但它可以被继承。
继承的思路，就是如果有两个参数，第一个参数做为父类被继承，第二参数用来声明新类的方法和属性以及构造函数，它同样可以被继承。
如果有三个以上参数那么，除出第一个参数做为继承的父类，最后一个参数用声明新类的方法和属性以及构造函数。中间的参数是用类来扩展新类的方法。当然也可以通过my.extendClass扩展新方法。
同时，类库为commonJS和浏览环境都提供了支持！
/*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 // 保证后台可用 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]; // 最后一个参数是指定本身的方法 var SuperClass = len > 1 ? arguments[0] : null; // 第一个参数是指继承的方法，实例和静态部分均继承 var hasImplementClasses = len > 2; // 如果有第三个参数，那么第二个就是implementClass,这里其实只继承实例对象 var Class, SuperClassEmpty; // 保证构造方法 if (body.constructor === Object) { Class = function() {}; } else { Class = body.constructor; // 保证后面不覆盖constructor delete body.constructor; } // 处理superClass部分 if (SuperClass) { // 中间件实现实例属性的继承 SuperClassEmpty = function() {}; SuperClassEmpty.prototype = SuperClass.prototype; Class.prototype = new SuperClassEmpty(); // 原型继承，解除引用 Class.prototype.constructor = Class; // 保证constructor Class.Super = SuperClass; // 父对象访问接口 // 静态方法继承，重载superClass方法 extend(Class, SuperClass, false); } // 处理ImplementClass部分,其实只继承实例属性部分,除SuperClass #arguments[0]# 和 body #arguments[length-1]# if (hasImplementClasses) for (var i = 1; i < len - 1; i++) // implement是继承的实例属性部分, 重载父对象implementClass方法 extend(Class.prototype, arguments[i].prototype, false); // 处理本身声明body部分，静态要STATIC指定,实例部分要删除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) { // 静态部分继承静态部分 if (extension.STATIC) { extend(Class, extension.STATIC, override); // 保证实例部分不继承静态方法 delete extension.STATIC; } // 实例属性继继承实例部 extend(Class.prototype, extension, override); }; //============================================================================ var extend = function (obj, extension, override) { var prop; // 其实这里的flase是表明，覆盖父对象的方法 if (override === false) { for (prop in extension) if (!(prop in obj)) obj[prop] = extension[prop]; } else { // 这里其实不覆盖父对象的方法,包括toString for (prop in extension) obj[prop] = extension[prop]; if (extension.toString !== Object.prototype.toString) obj.toString = extension.toString; } }; })();
二、KLASS
项目地址：https://github.com/ded/klass
先看使用方法：
a、新建一个类
// 声明一个类 var Person = klass(function (name) { this.name = name }) .statics({//静态方法 head: ':)', feet: '_|_' }) .methods({//实例方法 walk: function () {} })
b、继承一个类
// SuperHuman 继承 Person var SuperHuman = Person.extend(function (name) { // 自动调用父类的构造方法 }) .methods({ walk: function() { // 显式声明调用父类的walk方法 this.supr() this.fly() }, fly: function() {} }) new SuperHuman('Zelda').walk()
c、字面量方式声明一个类
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、实现一个类的方法
因为有时候你可能希望覆写或者混合一个实例方法，可以这样：
// 可以传递一个字面量去继承 var Alien = SuperHuman.extend({ beam: function() { this.supr() // beam into space } }) var Spazoid = new Alien('Zoopo') if (beamIsDown) { // 覆写beam方法 Spazoid.implement({ beam: function() { this.supr() // fallback to jets this.jets() } }) }
下面看一下klass源代码解析：
klass的基本设计思路很明确，极力的模仿其它语言的继承方式。比如：子类构造方法调用父类的构造方法，还可以显式的声明调用父类的方法。
这种判断都是基于正则匹配：fnTest = /xyz/.test(function () {xyz;}) ? /\bsupr\b/ : /.*/；关键字"super"
如果显示的声明了要调用父类的方法，那么声明方法的时候，就包装成一个内部调用父类方法且返回相同值的函数，给当前类的方法。
另一方面，构造方法，也是比较灵活的。如果显示的声明了initialize,那么这就是构造方法。否则如果参数是个function那么它就做为构造方法，否则就用父类的构造方法。
通过statics方式添加静态方法，通过实例的implements和静态方法methods添加实例方法。
通过父类的extend实现继承。
同时，类库为commonJS和浏览环境都提供了支持！
/** * 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用来验证是否可能通过正则找出调用super父类方法的方法 var fnTest = /xyz/.test(function () {xyz;}) ? /\bsupr\b/ : /.*/, noop = function (){}, proto = 'prototype', isFn = function (o) { return typeof o === f; }; // 基础类 function klass(o) { return extend.call(typeof o == f ? o : noop, o, 1); } // 包装成一个借用super同名方法的函数 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]; // 借用执行并保存返回值 var ret = fn.apply(this, arguments); // 恢复原this.super this.supr = tmp; // 返回返回值，保证wrap后的返回值跟原来一致 return ret; }; } // 如果o和super有同名方法，且o显式声明借用super的同名方法，就wrap成一个待执行函数供使用 // 如果没有显式的声明借用super的同名方法,或者是o独有的方法，或者不是方法就直接用 function process(what, o, supr) { for (var k in o) { // 如果是非继承方法,按方法注释规则执行,最终都放进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]; } } } // 继承方法的实现,fromSub是用来控制是否继承而来,上面的klass里面fromSub是1,表明非继承而来,构造函数不借用super执行 function extend(o, fromSub) { // noop做为媒介类实现原型继承的解除引用 noop[proto] = this[proto]; var supr = this, prototype = new noop(), // 创建实例对象供原型继承使用，解除引用 isFunction = typeof o == 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; return this; }; // 执行实现新类原型，保证新类的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 = typeof o == 'string' ? (function () { var obj = {}; obj[o] = optFn; return obj; }()) : o; // 添加实例方法或者静态方法,statics:静态方法,implement实例方法 process(this, o, supr); return this; }; return fn; } // 后台用,nodejs if (typeof module !== 'undefined' && module.exports) { module.exports = klass; } else { var old = context.klass; // 防冲突 klass.noConflict = function () { context.klass = old; return this; }; // 前台浏览器用 //window.kclass = kclass; context.klass = klass; } }(this, 'function');
三、还有一种简单实现
实现思路很简单，就是利用ECMAScript 5 原型式继承Object.create方法，封装成一个方法，如果不支持ECMAScript5的环境，就平移退化到
function F() {}; F.prototype = superCtor.prototype; ctor.prototype = new F(); ctor.prototype.constructor = ctor;
同样的，除最后一个参数是当前类的方法声明，其它参数均做为继承父类，需要循环继承，但当这里处理的相对比较简单，没涉及到覆盖。你可以自己动手添加。
var Class = (function() { /** * Inherits function.(node.js) * * @param ctor subclass's constructor. * @param superctor superclass's constructor. */ var inherits = function(ctor, superCtor) { // 显式的指定父类 ctor.super_ = superCtor; // ECMAScript 5 原型式继承并解除引用 if (Object.create) { ctor.prototype = Object.create(superCtor.prototype, { constructor: { value: ctor, enumerable: false, writable: true, configurable: true } }); } else { // 无Object.create方法的平稳退化 function F() {}; F.prototype = superCtor.prototype; ctor.prototype = new F(); ctor.prototype.constructor = ctor; } }; /** * Class function. */ return function() { // 最后一个参数是新类方法、属性和构造函数声明 var subClazz = arguments[arguments.length - 1] || function() {}; // initialize是构造函数，否构造函数就是一个空函数 var fn = subClazz.initialize == null ? function() {} : subClazz.initialize; // 继承除最一个参数以的类，多继承，也可以用作扩展方法 for (var index = 0; index < arguments.length - 1; index++) { inherits(fn, arguments[index]); } // 实现新类的方法 for (var prop in subClazz) { if (prop == "initialize") { continue; } fn.prototype[prop] = subClazz[prop]; } return fn; } })();
看下面实例：
/** * 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类库的Class
源码解析可以看这里：http://www.cnblogs.com/hmking/archive/2011/09/30/2196504.html
看具体用法：
a、新建一个类
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、继承的实现
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、扩充类的实现
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'.
由于写的比较笼统，可能有很多地方没有解析到，也可能有不准确的地方，还望指正。
看完上面几种解析，相信息自己也可以写出一个自己的封装类库出来，至于，怎么实现看个人喜好了。但基本的思都是一样的基于原型的继承方式和循环拷贝新方法。
