js的封装
1 js中处处是对象,面向对象的第一步当然就是封装了,由于Js中没有类的概念,所以封装起来也比较麻烦,下面介绍两种js的封装。 2 3 1、使用约定优先的原则,将所有的私有变量以_开头 4 5 [javascript] view plain copy 6 <script type="text/javascript"> 7 /** 8 * 使用约定优先的原则,把所有的私有变量都使用_开头 9 */ 10 var Person = function (no, name, age) 11 { 12 this.setNo(no); 13 this.setName(name); 14 this.setAge(age); 15 } 16 Person.prototype = { 17 constructor: Person, 18 checkNo: function (no) 19 { 20 if (!no.constructor == "string" || no.length != 4) 21 throw new Error("学号必须为4位"); 22 }, 23 setNo: function (no) 24 { 25 this.checkNo(no); 26 this._no = no; 27 }, getNo: function () 28 { 29 return this._no; 30 }, setName: function (name) 31 { 32 this._name = name; 33 }, getName: function () 34 { 35 return this._name; 36 }, setAge: function (age) 37 { 38 this._age = age; 39 }, getAge: function () 40 { 41 return this._age; 42 }, toString: function () 43 { 44 return "no = " + this._no + " , name = " + this._name + " , age = " + this._age; 45 } 46 }; 47 var p1 = new Person("0001", "鸿洋", "22"); 48 console.log(p1.toString()); //no = 0001 , name = 鸿洋 , age = 22 49 p1.setNo("0003"); 50 console.log(p1.toString()); //no = 0003 , name = 鸿洋 , age = 22 51 p1.no = "0004"; 52 p1._no = "0004"; 53 console.log(p1.toString()); //no = 0004 , name = 鸿洋 , age = 22 54 55 </script> 56 看完代码,是不是有种被坑的感觉,仅仅把所有的变量以_开头,其实还是可以直接访问的,这能叫封装么,当然了,说了是约定优先嘛,这种方式还是不错的,最起码成员变量的getter,setter方法都是prototype中,并非存在对象中,总体来说还是个不错的选择。如果你觉得,这不行,必须严格实现封装,那么看第二种方式。 57 58 2、严格实现封装 59 60 [javascript] view plain copy 61 <script type="text/javascript"> 62 /** 63 * 使用这种方式虽然可以严格实现封装,但是带来的问题是get和set方法都不能存储在prototype中,都是存储在对象中的 64 * 这样无形中就增加了开销 65 */ 66 var Person = function (no, name, age) 67 { 68 var _no , _name, _age ; 69 var checkNo = function (no) 70 { 71 if (!no.constructor == "string" || no.length != 4) 72 throw new Error("学号必须为4位"); 73 }; 74 this.setNo = function (no) 75 { 76 checkNo(no); 77 _no = no; 78 }; 79 this.getNo = function () 80 { 81 return _no; 82 } 83 this.setName = function (name) 84 { 85 _name = name; 86 } 87 88 this.getName = function () 89 { 90 return _name; 91 } 92 93 this.setAge = function (age) 94 { 95 _age = age; 96 } 97 this. 98 getAge = function () 99 { 100 return _age; 101 } 102 103 this.setNo(no); 104 this.setName(name); 105 this.setAge(age); 106 } 107 Person.prototype = { 108 constructor: Person, 109 toString: function () 110 { 111 return "no = " + this.getNo() + " , name = " + this.getName() + " , age = " + this.getAge(); 112 } 113 } 114 ; 115 var p1 = new Person("0001", "鸿洋", "22"); 116 console.log(p1.toString()); //no = 0001 , name = 鸿洋 , age = 22 117 p1.setNo("0003"); 118 console.log(p1.toString()); //no = 0003 , name = 鸿洋 , age = 22 119 p1.no = "0004"; 120 console.log(p1.toString()); //no = 0003 , name = 鸿洋 , age = 22 121 122 </script> 123 124 看上面的代码,去掉了this.属性名,严格的实现了封装,只能通过getter,setter访问成员变量了,但是存在一个问题,所有的方法都存在对象中,增加了内存的开销。 125 3、以闭包的方式封装 126 127 [javascript] view plain copy 128 <script type="text/javascript"> 129 /** 130 * 使用这种方式虽然可以严格实现封装,但是带来的问题是get和set方法都不能存储在prototype中,都是存储在对象中的 131 * 这样无形中就增加了开销 132 */ 133 var Person = (function () 134 { 135 var checkNo = function (no) 136 { 137 if (!no.constructor == "string" || no.length != 4) 138 throw new Error("学号必须为4位"); 139 }; 140 //共享变量 141 var times = 0; 142 143 return function (no, name, age) 144 { 145 console.log(times++); // 0 ,1 , 2 146 var no , name , age; 147 this.setNo = function (no) 148 { 149 checkNo(no); 150 this._no = no; 151 }; 152 this.getNo = function () 153 { 154 return this._no; 155 } 156 this.setName = function (name) 157 { 158 this._name = name; 159 } 160 161 this.getName = function () 162 { 163 return this._name; 164 } 165 166 this.setAge = function (age) 167 { 168 this._age = age; 169 } 170 this. 171 getAge = function () 172 { 173 return this._age; 174 } 175 176 this.setNo(no); 177 this.setName(name); 178 this.setAge(age); 179 } 180 })(); 181 Person.prototype = { 182 constructor: Person, 183 toString: function () 184 { 185 return "no = " + this._no + " , name = " + this._name + " , age = " + this._age; 186 } 187 } 188 ; 189 var p1 = new Person("0001", "鸿洋", "22"); 190 var p2 = new Person("0002", "abc", "23"); 191 var p3 = new Person("0003", "aobama", "24"); 192 193 194 console.log(p1.toString()); //no = 0001 , name = 鸿洋 , age = 22 195 console.log(p2.toString()); //no = 0002 , name = abc , age = 23 196 console.log(p3.toString()); //no = 0003 , name = aobama , age = 24 197 198 </script> 199 200 上述代码,js引擎加载完后,会直接执行Student = 立即执行函数,然后此函数返回了一个子函数,这个子函数才是new Student所调用的构造函数,又因为子函数中保持了对立即执行函数中checkNo(no) ,times的引用,(很明显的闭包)所以对于checkNo和times,是所有Student对象所共有的,创建3个对象后,times分别为0,1,2 。这种方式的好处是,可以使Student中需要复用的方法和属性做到私有且对象间共享。
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;