YUI 3中的继承模式及其用法简介-阿里云开发者社区

开发者社区> sp42> 正文

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采集出新的灵感呢?

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4152 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4623 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5845 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5535 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
850 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
4271 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
1162 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
17392 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3668 0
+关注
sp42
移动项目技术负责人。多年全栈经验,熟悉 Java 和 JS,CSDN 博客技术专家,著有《ExtJS 详解与实践》等书。
294
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载