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 Array对象基础知识小结
Nov 16 Javascript
一个网马的tips实现分析
Nov 28 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 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
escape unescape的php下的实现方法
2007/04/27 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python多进程fork()函数详解
2019/02/22 Python
Python使用python-docx读写word文档
2019/08/26 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python能开发游戏吗
2020/06/11 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
公司委托书范本
2014/04/04 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
给领导的感谢信范文
2015/01/23 职场文书
大国崛起英国观后感
2015/06/02 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
分享python函数常见关键字
2022/04/26 Python
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL