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

简介: YUI 3中的继承模式及其用法简介 January 6, 2010 at 6:30 am by Stoyan Stefanov 文中讨论了YUI 3 两种代码复用的方式:基于类的继承(classical inheritance pattern)和原型继承(prototypal inheritance)模式。

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

January 6, 2010 at 6:30 am by Stoyan Stefanov

文中讨论了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(...) ,其用法如下:

Y.extend(Programmer, Person); 这样您就可以测试出来 getName() 是一个继承了的方法:

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);

延伸阅读

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

后记:YUI与Ext的继承一脉相承,原理可谓几乎相同无几。现在两者都有新版本发布,明显YUI的改进幅度较大,——不知道Ext这边厢的Classic继承是否会从YUI采集出新的灵感呢?

目录
相关文章
|
2月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
36 2
|
2月前
|
JavaScript
TypeScript 类的特性、使用方法以及注意事项
TypeScript 类的特性、使用方法以及注意事项
54 0
|
25天前
|
JavaScript 前端开发 Java
深入ES6:解锁 JavaScript 类与继承的高级玩法
深入ES6:解锁 JavaScript 类与继承的高级玩法
|
2月前
|
前端开发 JavaScript 安全
对象属性值的黑魔法:ES8的简化语法让你的代码更简洁
对象属性值的黑魔法:ES8的简化语法让你的代码更简洁
|
2月前
|
存储 JavaScript 前端开发
对象和类:JS是一种基于对象的语言,可以创建和使用自定义对象。ES6引入了类的概念,使得面向对象编程更加方便。
对象和类:JS是一种基于对象的语言,可以创建和使用自定义对象。ES6引入了类的概念,使得面向对象编程更加方便。
32 0
|
7月前
ES6学习(十一)—Class 的基本语法和继承
ES6学习(十一)—Class 的基本语法和继承
|
10月前
|
JavaScript
Extjs中给一个组件命名时,id,name,hiddenName这三者的用法和区别是什么
Extjs中给一个组件命名时,id,name,hiddenName这三者的用法和区别是什么
|
JavaScript 前端开发
🍉JavaScript进阶——类的本质及ES5的新增方法
🍉JavaScript进阶——类的本质及ES5的新增方法
78 9
🍉JavaScript进阶——类的本质及ES5的新增方法
|
JavaScript
js基础笔记学习113-继承2扩展性
js基础笔记学习113-继承2扩展性
67 0
js基础笔记学习113-继承2扩展性
|
JavaScript
js基础笔记学习113-继承3
js基础笔记学习113-继承3
43 0
js基础笔记学习113-继承3