首页 > 网站 > WEB开发 > 正文

JavaScript简洁继承机制实现(不使用prototype和new)

2024-04-27 14:16:25
字体:
来源:转载
供稿:网友

javaScript简洁继承机制实现(不使用PRototype和new)

此方法并非笔者原创,笔者只是在前辈的基础上,加以总结,得出一种简洁实用的Javascript继承方法。

传统的JavaScript继承基于prototype原型链,并且需要使用大量的new操作,代码不够简洁,可读性也不是很强,貌似还容易受到原型链污染。

笔者总结的继承方式,简洁明了,虽然不是最好的方式,但希望能给读者带来启发。

好了,废话不多说,直接看代码,注释详尽,一看就懂~~~

  1 /**  2  * Created by 杨元 on 14-11-11.  3  * 不使用prototype实现继承  4  *  5  */  6   7 /**  8  * Javascript对象复制,仅复制一层,且仅复制function属性,不通用!  9  * @param obj  要复制的对象 10  * @returns  Object 11  */ 12 Object.prototype.clone = function(){ 13     var _s = this, 14         newObj = {}; 15     _s.each(function(key, value){ 16         if(Object.prototype.toString.call(value) === "[object Function]"){ 17             newObj[key] = value; 18         } 19     }); 20     return newObj; 21 }; 22  23 /** 24  * 遍历obj所有自身属性 25  * 26  * @param callback 回调函数。回调时会包含两个参数: key 属性名,value 属性值 27  */ 28 Object.prototype.each = function(callback){ 29     var key = "", 30         _this = this; 31     for (key in _this){ 32         if(Object.prototype.hasOwnProperty.call(_this, key)){ 33             callback(key, _this[key]); 34         } 35     } 36 }; 37  38 /** 39  * 创建子类 40  * @param ext obj,包含需要重写或扩展的方法。 41  * @returns Object 42  */ 43 Object.prototype.extend = function(ext){ 44     var child = this.clone(); 45     ext.each(function(key, value){ 46         child[key] = value; 47     }); 48     return child; 49 }; 50  51 /** 52  * 创建对象(实例) 53  * @param arguments 可接受任意数量参数,作为构造器参数列表 54  * @returns Object 55  */ 56 Object.prototype.create = function(){ 57     var obj = this.clone(); 58     if(obj.construct){ 59         obj.construct.apply(obj, arguments); 60     } 61     return obj; 62 }; 63  64  65 /** 66  * Useage Example 67  * 使用此种方式继承,避免了繁琐的prototype和new。 68  * 但是目前笔者写的这段示例,只能继承父类的function(可以理解为成员方法)。 69  * 如果想继承更丰富的内容,请完善clone方法。 70  * 71  * 72  */ 73  74 /** 75  * 动物(父类) 76  * @type {{construct: construct, eat: eat}} 77  */ 78 var Animal = { 79     construct: function(name){ 80         this.name = name; 81     }, 82     eat: function(){ 83         console.log("My name is "+this.name+". I can eat!"); 84     } 85 }; 86  87 /** 88  * 鸟(子类) 89  * 鸟类重写了父类eat方法,并扩展出fly方法 90  * @type {子类|void} 91  */ 92 var Bird = Animal.extend({ 93     eat: function(food){ 94         console.log("My name is "+this.name+". I can eat "+food+"!"); 95     }, 96     fly: function(){ 97         console.log("I can fly!"); 98     } 99 });100 101 /**102  * 创建鸟类实例103  * @type {Jim}104  */105 var birdJim = Bird.create("Jim"),106     birdTom = Bird.create("Tom");107 108 birdJim.eat("worm");  //My name is Jim. I can eat worm!109 birdJim.fly();  //I can fly!110 111 birdTom.eat("rice");  //My name is Tom. I can eat rice!112 birdTom.fly();  //I can fly!


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表