`
MirrorAvatar
  • 浏览: 46341 次
  • 性别: 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教程YUI 入门教程YUI 入门教程YUI 入门教程

    yui_2.9.0前端UI

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

    YUI js方法使用列子

    YUI 是 jquery 一样网页使用的javascrpit 方法库。

    yuicompressor-yui compressor

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

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

    YUI的使用文档,汉语版的,个人日记,是别人写的,不是我写的

    yui3-master.zip

    yui3-master.zip

    YUI-EXT使用详解

    YUI-EXT使用详解,免费送给大家

    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 ...

    yui_2.6.0r2

    yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2

    yuicompressor,给YUI Compressor添加右键命令

    可惜官网提供的版本都不具备右键功能,每次压缩都要cmd输入一些命令实在是繁琐,本文就介绍如何给YUI Compressor添加右键命令,方便使用。 网上已有一些网友写好的安装包,但对应的版本太低,目前最新最多人使用的...

    js 压缩YUI

    雅虎的东西,简单的操作很好用 使用例子:java -jar D:\yuicompressor\yuicompressor\yuicompressor.jar E:\js\all.js -o E:\wap\wap2\js\all-min.js --charset utf-8 当然要装jdk了 不然就玩完了

    从YUI2到YUI3看前端的演变 pdf

    YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...

    yahoo yui 实例教程

    利用Yahoo YUI库做的一个TREE实例,很详细的阐述了YUI的使用原理

    yui 资源包

    yui 源码下载,3.9.0 r2 包,最新版本

    YUI中文文档CHM

    YAHOO YUI 中文文档 AJAX 详细 比较好用

    YUI3 完整包

    Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。

    从YUI2到YUI3看前端的演变

    从YUI2到YUI3看前端的演变

    yui压缩

    yui压缩

    YUI3 dialog组件

    基于YUI3的dialog组件该组件是基于YUI3开发的,功能强大,详细见http://www.qiqicartoon.com

    雅虎 用户接口库YUI

    YUI资料 雅虎 用户接口库 中文说明及如何使用学习 Yui组件分成2类:工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发(in-browser devolvement),使用DHTML和AJAX的特性开发所有的Web程序。...

Global site tag (gtag.js) - Google Analytics