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!

 

你可能感兴趣的:(JavaScript)