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技术很烂的五个原因
Apr 26 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
一些常用的Javascript函数
2006/12/22 Javascript
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Django开发中复选框用法示例
2018/03/20 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python如何将两个txt文件内容合并
2019/10/18 Python
python线程里哪种模块比较适合
2020/08/02 Python
python tkinter实现连连看游戏
2020/11/16 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
C#中的验证控件有几种
2014/03/08 面试题
医学专业职业生涯规划范文
2014/02/05 职场文书
保护黄河倡议书
2014/05/16 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
论文答辩开场白大全
2015/05/27 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
python之django路由和视图案例教程
2021/07/26 Python