关于JavaScript继承,方式非常多,包含compile-to-javascript的语言TypeScript, CoffeeScript以及站点MDN, GitHub, Modernizr各种polyfill都给出了稳妥的实现方案。

从ES5的角度看,这当中一些方案在功能上OK,但在语义上却不尽如人意。

本人从这些方案中採取一些比較潮的思路,整理出一份方案,可实现与原生DOM类继承的风格一致,达到功能和语义兼得的效果(当然,就别再老想着99后ES3了)。

假设你的WebApp是基于ES5执行环境的,能够评估或fork此方案。

//exports Function.prototype.extends
//exports global.getPrototypeNames //基于ES5的继承实现函数
Function.prototype.extends=(function(){
function getOwnPropertyDescriptors(object){
return Object.getOwnPropertyNames(object).reduce(function(pds,pn){
return pds[pn]=Object.getOwnPropertyDescriptor(object,pn),pds;
},{});
}
/**
* 继承一个类。
* 若有兴许类,则共享兴许类截至到当前的快照属性(constructor除外),
* 这些属性中的getters,setters和methods须考虑到要是通用的(如Array的那些methods)
**/
function inherits(s){
var c,p;
c=this;
if(typeof s==="function"){
p=Object.create(s.prototype,getOwnPropertyDescriptors(c.prototype));
}else{
p=c.prototype;
}
if(arguments.length>1){
Array.prototype.slice.call(arguments,1).forEach(function(s){
var pds=getOwnPropertyDescriptors(s.prototype);
delete pds.constructor;
Object.defineProperties(p,pds);
});
}
c.prototype=p;
}
return inherits;
}()); //測试准备
//~~~~~~~~~~~~~~~~~~~~~~~~
// BaseList extends Array
//~~~~~~~~~~~~~~~~~~~~~~~~
function BaseList(){
this.length=this.length;
}
BaseList.prototype.add=function(e){
return this.push(e);
};
BaseList.extends(Array); //~~~~~~~~~~~~~~~~~~~~~~~~
// ItemList extends BaseList
//~~~~~~~~~~~~~~~~~~~~~~~~
function ItemList(){
BaseList.call(this);
}
ItemList.extends(BaseList,EventTarget);
ItemList.prototype.item=function item(index){
index>>>=0;
return index<this.length?this[index]:null;
}; //~~~~~~~~~~~~~~~~~~~~~~~~
// ElementList extends ItemList
//~~~~~~~~~~~~~~~~~~~~~~~~
function ElementList(){
ItemList.call(this);
}
ElementList.extends(ItemList);
ElementList.prototype.namedItem=function namedItem(name){
var index=this.findIndex(function(elem){return elem.name===name;});
return index===-1?null:this[index];
}; //測试工具函数之获取原型链名单
var getPrototypeNames=(function(){
function typeOf(value){
return Object.prototype.toString.call(value).slice(8,-1);
}
function isObject(value){
return typeof value==="object"&&value!==null||typeof value==="function"
}
function constructorNameOf(proto){
return typeof proto.constructor==="function"?proto.constructor.name:typeOf(proto)
}
function getPrototypeNames(object){
var names,proto;
names=[];
proto=Object.getPrototypeOf(object);
while(isObject(proto)){
names.push(constructorNameOf(proto));
proto=Object.getPrototypeOf(proto)
}
return names;
}
return getPrototypeNames;
}()); //运行測试
var list=new ElementList(); console.dir(list);
console.log("list: "+getPrototypeNames(list).join(" > ")); list.push(document.documentElement);
list.push(document.head);
console.assert(list.item(1)===document.head,"The second item of list is document.head");

一种基于ES5的JavaScript继承的更多相关文章

  1. JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)

    JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...

  2. javascript继承的三种模式

    javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...

  3. javascript继承(五)—prototype最优两种继承(空函数和循环拷贝)

    一.利用空函数实现继承 参考了文章javascript继承—prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...

  4. javascript继承—prototype最优两种继承(空函数和循环拷贝)

    一.利用空函数实现继承 参考了文章javascript继承-prototype属性介绍(2) 中叶小钗的评论,对这篇文章中的方案二利用一个空函数进行修改,可以解决创建子类对象时,父类实例化的过程中特权 ...

  5. javaScript继承的几种实现方式?

    js继承总共分成5种,包括构造函数式继承.原型链式继承.组合式继承.寄生式继承和寄生组合式继承. 构造函数式继承 首先来看第一种,构造函数式继承,顾名思义,也就是利用函数去实现继承:构造函数继承,使用 ...

  6. javascript继承之学习笔记

    今天记录一下学习javascript的继承. 继承基本上是基于“类”来说的,而javascript中并不存在真正的类,所以就出现了各种模拟“类”的行为,然后就堂而皇之的使用起了类的概念.这里不谈“类” ...

  7. JavaScript 继承小记

    面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分面向对象的编程语言,都是通过“类”(class) ...

  8. 一篇文章图文并茂地带你轻松学完 JavaScript 继承

    JavaScript 继承 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 继承种类 简单的继承种类可以分为 构造函数继承 原型链继承 clas ...

  9. 关于JavaScript继承的那些事

    在JavaScript中,对象的创建可以脱离类型(class free),通过字面量的方式可以很方便的创建出自定义对象. 另外,JavaScript中拥有原型这个强大的概念,当对象进行属性查找的时候, ...

随机推荐

  1. 浅谈malloc/free和new/delete 的区别

    malloc和new的区别 malloc是库函数,需要包头文件才能成功运行编译:new是操作符(C++中的关键字),需要在C++的环境下使用. malloc既可以在C语言中使用也可以在C++中使用,n ...

  2. JavaScript中判断日期是否相等

    问题 做一个节日提示网页,首先获得当前日期,然后与最近的节日比较,如果恰好是同一天,提示"XX节快乐!"否则,提示"离XX节还有X天".判断是否恰好同一天的时候 ...

  3. HBase(七)Hbase过滤器

    一.过滤器(Filter) 基础API中的查询操作在面对大量数据的时候是非常苍白的,这里Hbase提供了高级的查询方法:Filter.Filter可以根据簇.列.版本等更多的条件来对数据进行过滤,基于 ...

  4. 教你如何清除 MyEclipse/Eclipse 中 Web Browser 和 Switch Workspace 的历史记录

    有些许强迫症的开发人员可能会因为 MyEclipse/Eclipse 中 Web Browser 和 Switch Workspace 冗余的历史记录而感到苦恼,下面的方法就可以有效的帮助解决你的痛点 ...

  5. hdoj1203 I NEED A OFFER!(DP,01背包)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1203 思路 求最少能收到一份offer的最大概率,可以先求对立面:一份offer也收不到的最小概率,然 ...

  6. PHP老师没教过你的那些知识点

    另类的写法有惊喜 我们在阅读某些源代码的时候会发现有一种另类的写法,比如 //异常写法 if(false == $result)   //正常写法 if($result == false) 其实这是一 ...

  7. React Native踩坑之The SDK directory 'xxxxx' does not exist

    相信和我一样,自己摸索配置环境的过程中,第一次配,很可能就遇到了这个比较简单地错误,没有配置sdk环境 解决办法 在电脑,系统环境变量中,添加一个sdk的环境变量 uploading-image-95 ...

  8. OpenGL笔记<4> 数据传递二

    Sending data to a shader using uniform Preface 上一节我们介绍了通过顶点属性量进行数据传递,今天我们介绍一下通过uniform变量来进行数据传递的方法. ...

  9. CentOS7启动流程

    同样我也找了一张CentOS7的启动流程图. 第一步.硬件启动阶段 这一步和CentOS6差不多,详细请看CentOS6启动流程(含详细流程图) 第二步.GRUB2引导阶段 从这一步开始,CentOS ...

  10. 深入理解yield

    yield的英文单词意思是生产,刚接触Python的时候感到非常困惑,一直没弄明白yield的用法. 只是粗略的知道yield可以用来为一个函数返回值塞数据,比如下面的例子: 1 2 3 def ad ...