YUI 3中的继承模式及其用法简介

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 所产生的属性和方法都继承下来到自己身上。

假设现在有这两个构造的函数：

// 父类 function Person() { // “本身的”成员 this.name = "Adam"; } // 父类原型的属性 Person.prototype.getName = function() { return this.name; }; // 子类 function Programmer(){}

YUI 3之中的oop 模块提供了继承方法Y.extend(...) ，其用法如下：

var guru = new Programmer();guru = new Programmer(); alert(typeof guru.getName); // "function"

注意Y.extend(...) 是继承那些原型（prototype）的成员，非“本身的”成员。怎么才算好的实践呢？就是把可复用的那些函数写在prototype上面，属性就通过this 来添加全部的实例属性。上例中，只有getName() 继承了，而name 就没有被继承（文本稍后提到的“原型继承”方案，就允许继承原型成员和“本身的”成员）。

继承并加入新成员

让您在使用Y.extend(...) 继承父类的同时，可以为子类增加新的成员。实际上这就是YUI项目中构建“类”扩展时所采用的模式。

具体地说，Y.extend(...) 的第三个参数，就是您为子类新增加成员的地方，加入到子类构造器的prototype中去。第四个参数，是子类构造器本身的属性（即静态类属性class static properties）。

下面是一个继承并有所扩展的例子：个继承并有所扩展的例子：

Y.extend(Programmer, Person, {groksHTML: true}, {LIMIT: "sky"}); // groksHTML现在是子类原型的一个属性 alert(typeof Programmer.prototype.groksHTML); // "boolean" // 新的实例拥有了新的属性 var bob = new Programmer(); alert(bob.groksHTML);// 该成员加入到构造器本身，更像是“静态的（static）”属性，一般充当常量之角色。 alert(Programmer.LIMIT); // "sky" var limit = bob.LIMIT; // undefined

父类对象（Superclass）

貌似类的模式下，要访问父类的原型prototype的话，就要通过构造器下面的静态属性superclass ，——这个特殊的条目。

superclass 是父类prototpye的引用所以superclass.constructor 就指向了父类的构造器函数。请思考例子：

// 继承 Y.extend(Programmer, Person); // 从子类身上访问到父类的构造器 var parent = Programmer.superclass.constructor; // 测试一下 alert(parent === Person); // true，没错！ // 从子类的石林身上访问到父类的构造器 var guru = new Programmer(); guru.constructor.superclass.constructor === Person; // true

前面已经说到，类继承模型下你只能继承那些prototpye成员。但借助superclass 你就可以从子类身上取出父类构造器，或者取出父类的属性，来作为子类的属性。

你可以通过调用Programmer 的父类来修改Programmer 其构造过程，即apply() 送入当前实例this，改变父类的当前作用域，当然还有针对父类的初始化参数。

// ... 一如既往地定义了父类... // 子类 function Programmer() { // 初始化父类，此时此刻“this”就是当前的子类 Programmer.superclass.constructor.apply(this, arguments); } // 执行继承的命令 Y.extend(Programmer, Person); // 测试一下 var pro = new Programmer(); alert(pro.name); // "Adam"

如您所见，实例programmer现在就拥有了属于自身的name 属性。

alert(pro.hasOwnProperty('name')); // true alert(pro.hasOwnProperty('getName')); // false

访问被重写了的那些方法

既然superclass 指向了父类原型对象，那么子类中也就可以访问方法、属性，包括那些已被覆盖的方法、属性。请参见Triangle 继承Shape 的例子：

// 父类 function Shape(){} Shape.prototype.toString = function() { return "shape"; }; // 子类 function Triangle(){} // 执行继承的命令 Y.extend(Triangle, Shape); // child虽然表面上覆盖了父类的toString()方法，但superclass对象由于保留了通往原父类方法的途径，我们还是可以寻址的。 Triangle.prototype.toString = function(){ return Triangle.superclass.toString() + ", triangle"; }; var acute = new Tacute.toString(); "shape, triangle"

原型继承方式

这是Douglas Crockford所建议的继承模式，当您摆脱了类的思维方式，您就可以用别的思路来让一个新的对象，继承于另外一个对象，同样达到继承之目的，举例：

// 父对象，对象字面化的一个对象 var parent = { name: "John", family: "Wayne", say: function() { return "I am " + this.name + " " + this.family; } }; // 继承魔法，从现有的对象复制一个新的出来 var batman = Y.Object(parent); // 对新对象进行自定义操作 batman.name = "Bruce"; // 使用…… batman.say(); // I am Bruce Wayne

使用这个模式的过程中，经历了两个步骤设置您的对象：

1. 从现有的对象的基础上，完全复制一个新的对象，一切属性和方法都会继承。
2. 自定义这个新对象，您可以覆盖或增加成员。

请了解Y.Object(...) 在YUI核心代码里就有，不需要包含oop 的模块。

原型继承的讨论

如果您好奇原型继承是怎么来的，欲揭开神秘面纱后面的实质，您可以看看Douglas Crockford’的原话是怎么说的 ，以便深入了解。

使用该模式的话，便是透过继承链（prototype chain）来继承父类的成员。这样的话，哪怕子类有相同名称的属性也不会覆盖掉父类的，但就较为优先。换句话说，你可重新定义say 方法：

batman.say = function() { return "Can't tell you my real name"; }; // 测试一下 batman.say(); // "Can't tell you my real name"

不像类继承那般，有Y.extend 提供的superclass 的方式来引用父类的say 方法，然而，你若删除子对象的say 方法，父对象的say 方法又会回来。

delete bbatman.say(); // "I am Bruce Wayne"

新的ECMAScript 5又是怎么样的呢？

ECMAScript标准之最新版本 就包括了原生的方法来实现原型继承模式，称作Object.create(...) 。

// YUI3 var batman = Y.Object(parent); // ECMAScript 5 （将来的新写法） var batman = Object.create(parent);

延伸阅读

感谢阅读！有关该两种模式的更多内容和例子，你可以参考以下的链接：

• Todd Kloot的"YUI 3语法糖"幻灯片 from YUIConf on YUI Theater
• oop模块的 API文档
• oop模块的 的高亮代码
• 针对extend 的特项例子
• Y.Object 源码
• 《Ext详解与实践 v3》阅读补充资料：Ext.extend()中使用super关键字