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 相关文章推荐
javascript this用法小结
Dec 19 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 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如何透过ODBC来存取数据库
2006/10/09 PHP
数据库的日期格式转换
2006/10/09 PHP
php提高网站效率的技巧
2015/09/29 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python实现下载整个ftp目录的方法
2017/01/17 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
如何教少儿学习Python编程
2020/07/10 Python
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
会计系中文个人求职信
2013/12/24 职场文书
库房主管岗位职责
2013/12/31 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
教师病假条范文
2015/08/17 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python