首页 > 代码库 > 一种基于ES5的JavaScript继承
一种基于ES5的JavaScript继承
关于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=http://www.mamicode.com/=="object"&&value!==null||typeof value==="function">
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。