`
MirrorAvatar
  • 浏览: 47944 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

YUI用的寄生组合式继承

阅读更多

什么是“寄生组合式继承”?

通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。构造函数 + 原型链。

寄生组合式继承是引用类型最理想的继承范式。

寄生组合式继承的基本模式

function inheritPrototype(subType, superType) {
    //创建对象
    var prototype = Object(superType.prototype);
    //增强对象
    prototype.constructor = subType;
    //制定对象
    subType.prototype = prototype;
}
 

函数内部的过程:

第一步,创建超类原型的一个副本;

第二步,创建的副本添加constructor属性,从而弥补因重写原型而失去的默认的constructor属性;

第三步,将新创建的对象(即副本)赋值给子类型的原型。

实例

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
    alert(this.name);
};

function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function() {
    alert(this.age);
};
 

YUI的寄生组合式继承

//定义
function extend(subClass,superClass){
    var F = function(){};
    F.prototype = superClass.prototype;
    subClass.prototype = new F(); //创建超类的一个副本,本质是执行对给定对象的浅复制            
    subClass.prototype.constructor = subClass;  //原来constructor指向superClass,现在改指成subClass本身

    subClass.superclass = superClass.prototype;//加多了个属性指向父类本身以便调用父类函数
    if(superClass.prototype.constructor == Object.prototype.constructor) {//新创建的属性对象会指向Object,因此要重写指向本身
        superClass.prototype.constructor = superClass;
    }
}
//应用
function Person(name) {
    this.name = name;
}
Person.prototype.sayName = function() {
    alert(this.name);
};
function Chinese(name,job) {
    Person.call(this, name);
    this.job = job;
}

extend(Chinese, Person);

Chinese.prototype.sayJob = function() {
    alert(this.job);
};

var c = new Chinese("MirrorAvatar", "coder");
alert(c.sayName());  //MirrorAvatar
 

参考资料:

  1. 《JavaScript高级程序设计》
  2. JS类式继承
1
0
分享到:
评论

相关推荐

    《YUI使用文档》汉语版的yui学习材料

    《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。YUI,全称Yahoo! User Interface Library,是Yahoo开发的一个开放源代码的JavaScript库,旨在帮助开发者创建交互式...

    YUI-EXT使用详解

    **YUI-EXT使用详解** YUI-EXT是基于Yahoo! User Interface Library (YUI)的一个扩展库,专为构建富互联网应用程序(RIA)而设计。YUI-EXT提供了许多高级组件,如表格、菜单、窗口、表单、布局管理器等,极大地丰富...

    yui3-master.zip

    YUI3也考虑到了移动设备的兼容性,提供了响应式设计的支持。例如,“querystring”模块用于解析和序列化查询字符串,这对于适应不同屏幕尺寸和设备类型的应用来说是必不可少的。 8. **国际化支持** “i18n”模块...

    yui 资源包

    2. **响应式设计**:YUI提供了响应式设计工具,如Grids布局系统,能根据屏幕尺寸自动调整页面布局,适应各种设备。 3. **事件处理**:YUI的事件系统强大,支持事件绑定、解绑、事件冒泡等,使得用户交互编程简单易行...

    yui.rar 例子

    例如,例子中可能用到了“yui-button”来创建交互式的按钮,或者使用“yui-menu”构建导航菜单,这些组件大大简化了开发工作,提升了用户体验。 在实际开发中,YUI的调试工具也非常实用。YUI Logger可以帮助开发者...

    YUI3.6文档及示例

    9. **响应式设计**:YUI3.6支持响应式布局,帮助开发者构建适应不同设备和屏幕尺寸的应用。 10. **国际化与本地化**:提供多语言支持,便于实现应用的全球化。 在压缩包中的示例,你可以看到如何实际应用这些功能...

    yui_3.0.0(雅虎官方)

    2. **响应式设计支持**:在YUI 3.0.0中,雅虎增强了对响应式设计的支持,提供了多种工具和组件,如Grids布局系统,帮助开发者创建适应不同屏幕尺寸和设备的网页。 3. **事件系统**:YUI 3.0.0提供了一个强大的事件...

    yuicompressor-yui compressor

    --charset <charset> 指定读取输入文件使用的编码 --line-break <column> 在指定的列后插入一个 line-bread 符号 -v, --verbose 显示info和warn级别的信息 -o <file> 指定输出文件。默认输出是控制台。 ...

    yui_2.9.0前端UI

    是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具: YUI Compressor ...

    【YUI组件】基于YUI的表单验证器

    YUI是一个开源的JavaScript库,它包含了丰富的工具和组件,用于创建交互式、高性能的Web应用。这个表单验证器是YUI库中的一个关键部分,用于确保用户在提交表单时输入的数据符合预设的规则和格式,从而提高数据质量...

    yui_3.8.1.zip

    四、YUI的使用与学习 学习YUI,首先需要掌握JavaScript基础知识,然后通过官方文档了解YUI的模块化结构和API。官方文档详细且全面,包含了大量的示例代码,便于开发者快速上手。同时,社区资源丰富,有许多优秀的...

    YUI js方法使用列子

    在"YUI js方法使用例子"中,我们可以通过以下步骤来体验YUI的强大功能: 1. **引入YUI**:在HTML文件中,通过`<script>`标签引入YUI库,可以选择性地加载所需模块。 ```html <script src="http://yui.yahooapis....

    yahoo3.0 YUI Examples

    这个压缩包很可能是包含了一系列的代码示例,演示了如何在实际项目中使用YUI 3.0的各种组件和功能。 【描述】提到这是一个"Examples"集合,并提醒用户这不是"spring2.0中文参考手册.pdf",暗示了压缩包的内容与...

    yuicompressor-2.4.8.jar

    在使用yuicompressor时,开发者可以通过命令行或者集成到IDE(如IntelliJ IDEA,简称Idea)中来操作。对于Idea用户,可以通过安装第三方插件实现yuicompressor的集成,这样在编译项目时,可以直接对JavaScript和CSS...

    YUI3.7.3 最新版本 带API

    9. **响应式设计支持**:YUI3包含了一些工具,如Resize Utility,帮助开发者实现响应式设计,使应用在不同设备和屏幕尺寸上都能良好运行。 10. **可定制性**:YUI3允许开发者根据项目需求选择需要的模块,通过构建...

    YUI JS CSS 打包工具

    YUI安装文档.doc 提供了详细的安装和使用指南,包括如何配置环境、运行工具以及解决常见问题的方法。对于初次使用者来说,这份文档是了解和上手YUI打包工具的重要参考资料。 yuicompressor-2.4.7.jar 和 yui...

    yui3.10.3最新版

    在YUI 3.10.3的压缩包中,它将指导用户如何开始使用这个库。 - **docs**:文档目录,可能包含了YUI 3.10.3的API参考、教程、最佳实践等详细文档,是开发者学习和查阅API的重要资源。 - **tests**:测试目录,通常...

    Yahoo YUI 插件库

    YUI的核心理念是模块化,允许开发者根据项目需求选择和组合不同的功能模块,以实现高效且轻量级的代码。 在"Yahoo YUI 插件库"中,我们通常会发现各种扩展和增强YUI核心功能的插件。这些插件可能涵盖以下方面: 1....

    YAHOO yui2.7 文档+ 代码+例子

    YUI 2.7是这个库的一个版本,包含了文档、源代码以及实例,使得开发者能够深入理解并有效地使用这一框架。 **1. YUI的核心组件** YUI由多个核心模块组成,包括事件处理、DOM操作、动画效果、拖放功能、Ajax通信、...

    yuitest YUI测试工具

    YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...

Global site tag (gtag.js) - Google Analytics