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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
vue实现通讯录功能
Jul 14 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
原生javascript如何实现共享onload事件
Jul 03 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
js 表格隔行颜色
2009/12/02 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
three.js搭建室内场景教程
2018/12/30 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
js实现无缝轮播图特效
2020/05/09 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python实现自动登录百度空间的方法
2017/06/10 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
师范大学毕业自我鉴定
2013/11/21 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
总经理岗位职责范本
2015/04/01 职场文书
如何书写邀请函?
2019/06/24 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android