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 1.8 Release版本发布了
Aug 14 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
js子页面获取父页面数据示例
May 15 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
js代码实现轮播图
May 04 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之sphinx
2013/05/15 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
PHP实现文件下载详解
2014/11/27 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
2014年乡镇领导个人整改措施
2014/09/19 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
工作后的感想
2015/08/07 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
zabbix配置nginx监控的实现
2022/05/25 Servers