MooTools实现类的继承有两种模式:原型式继承和多亲继承,原型式继承由内建的Extends Mutator来实现,多亲继承由Implements Mutator或implement方法来实现。
原型式继承这里就不多讲了,着重讲一下多亲继承。在JavaScript里,因为一个对象只能拥有一个原型对象,所以不允许子类继承多个超类,不过我们可以利用多个掺元类(minix class)或掺元对象对一个类进行扩充,这样类的实例就可以拥有mixin类(对象)中的方法、属性,所以这实际上实现了多继承的效果。通常mixin类(对象)包含一些通用的方法,大家可以看看MooTools里Class.Extras模块中三个mixin类的定义(Chain、Events、Options)。
这里还需要注意的的一点是,在派生具有私有成员的的类或implement mixin类(对象)时,因为在父类(或mixin)中访问这些私有变量的方法是公有的,所以他们也会被遗传下来。所以子类可以间接访问父类(或mixin)的私有成员,但子类自身的实例方法都不能直接访问这些私有属性,而且你也不能在子类中添加能够直接访问他们的方法(作用域变量,你想访问也访问不了啦,呵呵)。
首先我们先建立一个基类:
- var Animal = new Class({
- initialize: function (age) {
- this.age = age;
- }
- });
使用Extends Mutator派生一个子类:
- var Cat = new Class({
- Extends: Animal,
- initialize: function (name, age) {
- this.parent(age); // calls initalize method of Animal class
- this.name = name;
- }
- });
- var cat = new Cat('Micia', 20);
- console.log(cat.name); // 'Micia'
- console.log(cat.age); // 20
利用Implements Mutator扩充一个类,首先建立一个mixin类:
- var Mixin = new Class({
- getName: function () {
- return this.name;
- },
- setName: function (value) {
- this.name = value
- }
- });
- var Cat = new Class({
- Extends: Animal,
- Implements: Mixin,
- initialize: function (name, age) {
- this.parent(age); // calls initalize method of Animal class
- this.name = name;
- }
- });
- var cat = new Cat('Micia', 20);
- console.log(cat.name); // 'Micia'
- console.log(cat.age); // 20
- cat.setName('Dog');
- console.log(cat.getName()); // 'Dog'
使用implement方法扩充一个类,首先家里一个mixin对象:
- // mixin对象存储一些通用方法,可以被不同的类implement
- var objMixin = (function () {
- var counter = 0;
- return {
- init: function () {
- counter += 1;
- },
- getCounter: function () {
- return counter;
- },
- getAge: function () {
- return this.age;
- },
- setAge: function (value) {
- this.age = value;
- }
- };
- })();
- var Cat = new Class({
- Extends: Animal,
- Implements: Mixin,
- initialize: function (name, age) {
- this.parent(age); // calls initalize method of Animal class
- this.name = name;
- }
- });
- Cat.implement(objMixin);
- var Dog = new Class({
- Extends: Animal,
- Implements: Mixin,
- initialize: function (name, age) {
- this.parent(age); // calls initalize method of Animal class
- this.name = name;
- }
- });
- Dog.implement(objMixin);
- var cat = new Cat('Micia', 20);
- console.log(cat.name); // 'Micia'
- console.log(cat.age); // 20
- cat.setName('汤姆');
- console.log(cat.getName()); // '汤姆'
- cat.setAge(12);
- console.log(cat.getAge()); // 12
- // 对mixin对象的私有属性进行操作
- cat.init();
- console.log(cat.getCounter()); // 1
- var dog = new Dog('小狗', 6);
- console.log(dog.name); // '小狗'
- console.log(dog.age); // 6
- dog.setName('布鲁托');
- console.log(dog.getName()); // '布鲁托'
- dog.setAge(8);
- console.log(cat.getAge()); // 8
- // 对mixin对象的私有属性进行操作
- dog.init();
- console.log(dog.getCounter()); // 2
- console.log(cat.getCounter()); // 2
大家都看明白了吧,呵呵,不过通过上面的代码我们引申出另外一个问题,注意上面的Cat类的设计,我们首先设计了Extends,然后是Implements,再就是Cat类本身的方法属性,MooTools内部对Class构造函数解析时是按照我们设计时的顺序解析的吗?答案是按照我们设计时的顺序解释的。简单来讲MooTools通过for-in对对象进行枚举来遍历每个成员进行解释的,等等......那个ECMAScript最新版对for-in 语句的遍历机制又做了调整,属性遍历的顺序是没有被规定的,也就是说随机的,那么MooTools是怎样保证按顺序解释的呢?先看下面这段代码:
- var obj = {
- Waa: "Waa",
- aa: 'aa',
- 68: '68',
- 15: '15',
- tt: 'tt',
- '-7': '-7',
- _: "___",
- online: true
- };
- for (var k in obj) {
- console.log(k);
- }
把它放在各个浏览器都执行一遍,你会发现IE、火狐、Safari浏览器的JavaScript 解析引擎遵循的是较老的ECMA-262第三版规范,属性遍历顺序由属性构建的顺序决定,而Chrome、Opera中使用 for-in 语句遍历对象属性时会遵循一个规律,它们会先提取所有 key 的 parseFloat 值为非负整数的属性, 然后根据数字顺序对属性排序首先遍历出来,然后按照对象定义的顺序遍历余下的所有属性。其它浏览器则完全按照对象定义的顺序遍历属性。
这下明白了吧,只要你为类设计的方法、属性还有Mutator的名称不为数字就可以了(当然如果你非要有这样的嗜好,我也只能@#%&$......)。请看下面的代码:
- var Super = new Class({
- log: function () {
- console.log('Super');
- }
- });
- var Mixin = new Class({
- log: function () {
- console.log('Mixin');
- }
- });
- var Sub = new Class({
- Extends: Super,
- Implements: Mixin
- });
- var obj = new Sub();
- obj.log(); // ?
在这里obj.log()会返回什么呢?对了是'Maxin',这里Sub类首先继承了Super类,Sub的原型实际就是Super类的一个实例,Super的log方法也就是成了Sub的原型上的一个方法,然后执行Implements Mutator 为Sub类的原型扩展了一个Mixin类的实例上的方法,这时Mixin类实例上的log方法就覆盖了Sub类原型上原来的log方法(继承自Super类)。
如果把Extends、Implements的顺序颠倒一下:
- var Sub = new Class({
- Implements: Mixin,
- Extends: Super
- });
- var obj = new Sub();
- obj.log(); // ?
这时obj.log()会返回什么呢?还是'Maxin'吗?其实这里返回的是'Super',Why?前面我们介绍了MooTools对Class构造函数解析时是按照我们设计的顺序解析的,所以在这里首先执行的是Implements Mutator,它首先为Sub类的原型扩展了一个Mixin类的实例上的log方法,然后才是对超类Super的继承,因为在JavaScrpt里每个对象只有一个原型,原型式继承的原理就是超类的一个实例赋予子类的原型,子类原来的原型这时会被超类的实例替换掉,所以这是Sub类原型的引用已经指向了超类的实例,而他自己的原型对象这时被消除了,所以之前从Mixin类得来的那个log方法,对不起跟着一起魂飞湮灭了,所以这里返回的是'Super'。
Class.Mutators源码解析:
* 好了,接下来着重介绍一下Class.Mutators对象:
196 *
197 * Mutator是一个可以改变你的类的结构的一个很特殊的函数,它们是产生特别功能和优雅化继承和掺元的的有力工具。
198 *
199 * 建立一个Mutatorr有二个部分:mutator的关键字 和mutator的实际函数,关键字既是mutator的名字,
200 * 也是在构建类时候的keyword。Mootools把mutators 储存在Class.Mutators对象中。
201 *
202 * 当你传一个对象给Class构造函数的时候,Mootools检查这个对象的的每一个键在Class.Mutators对象的是不是有
203 * mutator函数的对应的名字在里面。如果找到了,它就调用这个函数并且把键的值传给它做处理。
204 *
205 * Class.Mutators对象包含了两个内建的Mutator: Extends 和 Implements,分别实现原型式继承和多亲继承。
206 *
207 * MooTools在Class.Extras模块中提供了三个掺元类Chain、Events、Options,至于作用就不用多说了吧,呵呵。
208 **/
209 Class.Mutators = {
210
211 // 取得传送给它的class的名字后,直接继承这个class
212 Extends: function (parent) {
213 // 静态属性,存储父类对象
214 this.parent = parent;
215 // 原型式继承
216 this.prototype = getInstance(parent);
217 },
218
219 // Implements mutator取得传送给它的class的名字后,把它们的方法和属性添加到新类。
220 // 利用掺元类实现多亲继承
221 Implements: function (items) {
222 Array.from(items).each(function (item) {
223 var instance = new item;
224 for (var key in instance) {
225 implement.call(this, key, instance[key], true);
226 }
227 }, this);
228 }
229 };
230
231 // #endregion
232
233 })();
转载自: MooTools 1.4 源码分析 - Class 修正版