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列表框操作函数集合汇总
Nov 28 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
React组件refs的使用详解
Feb 09 Javascript
React 组件间的通信示例
Jun 14 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
js 单引号 传递方法
2009/06/22 Javascript
js tab效果的实现代码
2009/12/26 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
高三历史教学反思
2014/01/09 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
投资入股合作协议书
2014/10/28 职场文书
共青团员自我评价
2015/03/10 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS