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 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
详解vue 组件注册
Nov 20 Vue.js
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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
js实现随机8位验证码
2020/07/24 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
英文留学推荐信范文
2014/01/25 职场文书
2014和解协议书范文
2014/09/15 职场文书
2014年工人工作总结
2014/11/25 职场文书
团员自我评价范文
2015/03/10 职场文书
法律讲堂观后感
2015/06/11 职场文书
《比的意义》教学反思
2016/02/18 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
方法汇总:Python 安装第三方库常用
2022/04/26 Python