JavaScript不使用prototype和new实现继承机制


Posted in Javascript onDecember 29, 2014

此方法并非笔者原创,笔者只是在前辈的基础上,加以总结,得出一种简洁实用的JavaScript继承方法。

      传统的JavaScript继承基于prototype原型链,并且需要使用大量的new操作,代码不够简洁,可读性也不是很强,貌似还容易受到原型链污染。

      笔者总结的继承方式,简洁明了,虽然不是最好的方式,但希望能给读者带来启发。

      好了,废话不多说,直接看代码,注释详尽,一看就懂~~~

 /**

  * Created by 杨元 on 14-11-11.

  * 不使用prototype实现继承

  *

  */

 /**

  * Javascript对象复制,仅复制一层,且仅复制function属性,不通用!

  * @param obj  要复制的对象

  * @returns  Object

  */

 Object.prototype.clone = function(){

     var _s = this,

         newObj = {};

     _s.each(function(key, value){

         if(Object.prototype.toString.call(value) === "[object Function]"){

             newObj[key] = value;

         }

     });

     return newObj;

 };

 /**

  * 遍历obj所有自身属性

  *

  * @param callback 回调函数。回调时会包含两个参数: key 属性名,value 属性值

  */

 Object.prototype.each = function(callback){

     var key = "",

         _this = this;

     for (key in _this){

         if(Object.prototype.hasOwnProperty.call(_this, key)){

             callback(key, _this[key]);

         }

     }

 };

 /**

  * 创建子类

  * @param ext obj,包含需要重写或扩展的方法。

  * @returns Object

  */

 Object.prototype.extend = function(ext){

     var child = this.clone();

     ext.each(function(key, value){

         child[key] = value;

     });

     return child;

 };

 /**

  * 创建对象(实例)

  * @param arguments 可接受任意数量参数,作为构造器参数列表

  * @returns Object

  */

 Object.prototype.create = function(){

     var obj = this.clone();

     if(obj.construct){

         obj.construct.apply(obj, arguments);

     }

     return obj;

 };

 /**

  * Useage Example

  * 使用此种方式继承,避免了繁琐的prototype和new。

  * 但是目前笔者写的这段示例,只能继承父类的function(可以理解为成员方法)。

  * 如果想继承更丰富的内容,请完善clone方法。

  *

  *

  */

 /**

  * 动物(父类)

  * @type {{construct: construct, eat: eat}}

  */

 var Animal = {

     construct: function(name){

         this.name = name;

     },

     eat: function(){

         console.log("My name is "+this.name+". I can eat!");

     }

 };

 /**

  * 鸟(子类)

  * 鸟类重写了父类eat方法,并扩展出fly方法

  * @type {子类|void}

  */

 var Bird = Animal.extend({

     eat: function(food){

         console.log("My name is "+this.name+". I can eat "+food+"!");

     },

     fly: function(){

         console.log("I can fly!");

     }

 });

 /**

  * 创建鸟类实例

  * @type {Jim}

  */

 var birdJim = Bird.create("Jim"),

     birdTom = Bird.create("Tom");

 birdJim.eat("worm");  //My name is Jim. I can eat worm!

 birdJim.fly();  //I can fly!

 birdTom.eat("rice");  //My name is Tom. I can eat rice!

 birdTom.fly();  //I can fly!
Javascript 相关文章推荐
jquery图片放大镜功能的实例代码
Mar 26 Javascript
js创建元素(节点)示例
Jan 02 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 #Javascript
jQuery中:eq()选择器用法实例
Dec 29 #Javascript
根据配置文件加载js依赖模块
Dec 29 #Javascript
JavaScript中的console.dir()函数介绍
Dec 29 #Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 #Javascript
小米公司JavaScript面试题
Dec 29 #Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 #Javascript
You might like
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python解析json实例方法
2013/11/19 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
python机器学习之随机森林(七)
2018/03/26 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python tornado微信开发入门代码
2018/08/24 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
设计毕业生简历中的自我评价
2013/10/01 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
行政总经理岗位职责
2013/12/05 职场文书
自我鉴定书面格式
2014/01/13 职场文书
村委会贫困证明
2014/01/14 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2014年团支书工作总结
2014/11/14 职场文书
幼儿园感谢信
2015/01/21 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
入党群众意见范文
2015/06/02 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang