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 相关文章推荐
动态样式类封装JS代码
Sep 02 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
vuex存储token示例
Nov 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文件上传类实例详解
2016/04/08 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
解析python的局部变量和全局变量
2019/08/15 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
护士演讲稿范文
2014/01/05 职场文书
家长会主持词开场白
2014/03/18 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
元旦趣味活动方案
2014/08/22 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
阿甘正传观后感
2015/06/01 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
php引用传递
2021/04/01 PHP
springboot读取resources下文件的方式详解
2022/06/21 Java/Android