YUI 3中的继承模式及其用法简介
文中讨论了YUI 3 两种代码复用的方式:基于类的继承(classical inheritance pattern)和原型继承(prototypal inheritance)模式。
依赖
在种子文件yui-min.js中就有属于core YUI 3 API 部分的原型模式(prototypal pattern)继承。如果需要类模式(classical pattern)的话,就要加载oop
的模块了,不过一般情形您不需要这样做,因为整个YUI很大程度都需要这个oop模块来完成工作,所以一般引用都含有的了。如果您想创建一张最简单的页面,只是测试而已,那么你必须满足以下的YUI依赖,如下:
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI().use('oop', function(Y){
// 这儿写您的代码。Y是YUI实例。
});
</script>
类继承(伪类Pseudo Classical)
大家可以叫这种模式为“classical 模式”——但它不是经典(Plato’s ancient Greece)的那个意思,只是说让大家用类(Classes)的意思去理解。JavaScript没有真正的类(故名曰“伪Pseudo”的形容来修饰),但就用构造函数充当。
在Java或者其他的语言中Programmer
类直接继承于Person
类。但在JavaScript中,实际上Programmer
是一个构造的函数,Person
也是一个构造的函数。我们目标就是,让构造函数Programmer
产生的对象,是能够把Person
所产生的属性和方法都继承下来到自己身上。
假设现在有这两个构造的函数:
YUI 3之中的oop
模块提供了继承方法Y.extend(...)
,其用法如下:
getName()
是一个继承了的方法:
注意Y.extend(...)
是继承那些原型(prototype)的成员,非“本身的”成员。怎么才算好的实践呢?就是把可复用的那些函数写在prototype上面,属性就通过this
来添加全部的实例属性。上例中,只有getName()
继承了,而name
就没有被继承(文本稍后提到的“原型继承”方案,就允许继承原型成员和“本身的”成员)。
继承并加入新成员
让您在使用Y.extend(...)
继承父类的同时,可以为子类增加新的成员。实际上这就是YUI项目中构建“类”扩展时所采用的模式。
具体地说,Y.extend(...)
的第三个参数,就是您为子类新增加成员的地方,加入到子类构造器的prototype中去。第四个参数,是子类构造器本身的属性(即静态类属性class static properties)。
下面是一个继承并有所扩展的例子:个继承并有所扩展的例子:
父类对象(Superclass)
貌似类的模式下,要访问父类的原型prototype的话,就要通过构造器下面的静态属性superclass
,——这个特殊的条目。
superclass
是父类prototpye的引用所以superclass.constructor
就指向了父类的构造器函数。请思考例子:
前面已经说到,类继承模型下你只能继承那些prototpye成员。但借助superclass
你就可以从子类身上取出父类构造器,或者取出父类的属性,来作为子类的属性。
你可以通过调用Programmer
的父类来修改Programmer
其构造过程,即apply()
送入当前实例this,改变父类的当前作用域,当然还有针对父类的初始化参数。
如您所见,实例programmer现在就拥有了属于自身的name
属性。
访问被重写了的那些方法
既然superclass
指向了父类原型对象,那么子类中也就可以访问方法、属性,包括那些已被覆盖的方法、属性。请参见Triangle
继承Shape
的例子:
原型继承方式
这是Douglas Crockford所建议的继承模式,当您摆脱了类的思维方式,您就可以用别的思路来让一个新的对象,继承于另外一个对象,同样达到继承之目的,举例:
使用这个模式的过程中,经历了两个步骤设置您的对象:
- 从现有的对象的基础上,完全复制一个新的对象,一切属性和方法都会继承。
- 自定义这个新对象,您可以覆盖或增加成员。
请了解Y.Object(...)
在YUI核心代码里就有,不需要包含oop
的模块。
原型继承的讨论
如果您好奇原型继承是怎么来的,欲揭开神秘面纱后面的实质,您可以看看Douglas Crockford’的原话是怎么说的 ,以便深入了解。
使用该模式的话,便是透过继承链(prototype chain)来继承父类的成员。这样的话,哪怕子类有相同名称的属性也不会覆盖掉父类的,但就较为优先。换句话说,你可重新定义say
方法:
不像类继承那般,有Y.extend
提供的superclass
的方式来引用父类的say
方法,然而,你若删除子对象的say
方法,父对象的say
方法又会回来。
新的ECMAScript 5又是怎么样的呢?
ECMAScript标准之最新版本 就包括了原生的方法来实现原型继承模式,称作Object.create(...)
。
延伸阅读
感谢阅读!有关该两种模式的更多内容和例子,你可以参考以下的链接:
- Todd Kloot的"YUI 3语法糖"幻灯片 from YUIConf on YUI Theater
oop模块的
API文档oop模块的
的高亮代码- 针对extend 的特项例子
- Y.Object 源码
- 《Ext详解与实践 v3》阅读补充资料:Ext.extend()中使用super关键字
后记:YUI与Ext的继承一脉相承,原理可谓几乎相同无几。现在两者都有新版本发布,明显YUI的改进幅度较大,——不知道Ext这边厢的Classic继承是否会从YUI采集出新的灵感呢?