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 Flash/MP3/Video多媒体插件
Jan 18 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
vue项目持久化存储数据的实现代码
Oct 01 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
es6函数之尾调用优化实例分析
Apr 25 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图像处理类分享
2014/11/18 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
基于python实现模拟数据结构模型
2020/06/12 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
python 实现图片批量压缩的示例
2020/12/18 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
工作时间上网检讨书
2014/02/03 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
工作证明格式及范本
2014/09/12 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript