首页 > 代码库 > 谈谈JS中的面向对象

谈谈JS中的面向对象

请先看看下面这段代 

1 <script src="http://www.mamicode.com/jquery.js"></script>2 <script type="text/javascript">3  /**
  4      * Object.create() 最近才添加进了ECMAScript第5版规范,有些浏览器不支持  5      * 这里模拟一个Object.create方法解决兼容性问题  6      * Object.create : 该方法只有一个参数,即原型对象,返回一个新对象  7      * 这个新对象的原型就是传入的参数。即传入一个对象,返回一个继承了这个对象的新对象  8      */  9  10     if(typeof Object.create != "function") { 11         Object.create = function (o) { 12             function F() {} 13             F.prototype = o; 14             return F(); 15         } 16     } 17  18     /** 19      * 简单明了的GUID 生成器,用于自动化的生成ID,为保存实例记录增加ID支持 20      */ 21     Math.guid = function(){ 22         return ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, function( c ) { 23             var r = Math.random() * 16 | 0; 24             var v = c == ‘x‘ ? r : (r&0x3|0x8); 25             return v.toString(16); 26         }).toUpperCase(); 27     }; 28  29     /** 30      * creat a object 从这里开始,创建一个对象模型,注意,这里的Model是挂载到Object基类下,比Function、Array等类的级别高 31      */ 32     var Model = { 33         inherited : function () {}, 34         created : function () {}, 35  36         prototype : { 37             init : function () {} 38         }, 39         //这个函数会返回一个新对象,这个对象继承自Model对象 40         //我们使用它来创建新模型 41         create : function () { 42             var object = Object.create(this); 43             object.parent = this; 44             object.prototype = object.fn = Object.create(this.prototype); 45  46             object.created(); 47             this.inherited(); 48             this.inherited(object); 49  50             return object; 51         }, 52         //这个函数会初始化返回一个新对象 53         //它继承自Model.prototype,比如Model对象的一个实例 54         init : function () { 55             var instance = Object.create(this.prototype); 56             instance.parent = this; 57             instance.init.apply(instance, arguments); 58  59             return instance; 60         }, 61         //这个方法为Model对象扩展多个属性 62         extend : function (o) { 63             var extented = o.extended; 64  65             $.extend(this, o); 66             if(extented){ 67                 extented(this); 68             } 69         }, 70         //这个方法为Model对象扩展实例属性 71         include : function(o){ 72             var included = o.included; 73  74             $.extend(this.prototype, o); 75             if(included){ 76                 included(this); 77             } 78         } 79     }; 80  81     //我们需要保持记录的持久化,可以实现保存一个新创建的实例时,就将它添加进这个对象 82     //当删除实例时,就将它从对象中删除 83     Model.records = {}; 84     Model.include({ 85         newRecord : true, 86         //create a isntance 87         create : function () { 88             this.newRecord = false; 89             this.parent.records[this.id] = this; 90         }, 91         //delete a instance 92         destroy : function () { 93             delete this.parent.records[this.id]; 94         }, 95         //update a instance existed 96         update : function () { 97             this.parent.records[this.id] = this; 98         }, 99         //save a instance100         save : function () {101             this.newRecord ? this.create() : this.update();102         },103         init: function(atts) {104             /* ... */105         },106         load: function(attributes){107             /* ... */108         }109 110     });111     /**112      * 增加ID支持113      */114     Model.extend({115         //search a instance by id116         find : function (id){117             return this.records[id];118         }119         create : function(){120             if ( !this.id ) {121                 this.id = Math.guid();122             }123             this.newRecord = false;124             this.parent.records[this.id] = this;125         }126     });127 128     /**129      * for test130      */131     var Asset = Model.create();132     var User = Model.create();133 134     var user = User.init();135 136     var asset = Asset.init();137     asset.name = "same, same";138     asset.id = 1;139     asset.save();140 141     var asset2 = Asset.init();142     asset2.name = "but different";143     asset2.id = 2;144     asset2.save();145 146 147 </script>