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中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
JS常用表单验证方法总结
May 22 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 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
解析thinkphp基本配置 convention.php
2013/06/18 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
PHP6新特性分析
2016/03/03 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
JavaScript单元测试ABC
2012/04/12 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python使用itchat实现手机控制电脑
2018/02/22 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
上班玩手机检讨书
2014/02/17 职场文书
出生证明公证书
2014/04/09 职场文书