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去除iframe滚动条的方法
Apr 01 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JavaScript实现星级评价效果
May 17 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
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脚本的10个技巧(6)
2006/10/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
PHP里的中文变量说明
2011/07/23 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
php数组使用规则分析
2015/02/27 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python追加元素到列表的方法
2015/07/28 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
采购内勤岗位职责
2013/12/10 职场文书
项目投资意向书
2014/04/01 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
植物园观后感
2015/06/11 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python