js的封裝

本文轉載自查看原文 2018-03-08 11:28 14676
  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中需要復用的方法和屬性做到私有且對象間共享。
免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找 JS的封裝（JS插件的封裝） js中的對象封裝 js模塊的封裝 js常見的封裝 JS JSONP 函數封裝封裝JS實現Ajax js封裝/繼承/多態 Js的封裝和閉包 js封裝一個websocket js 對localStorage的封裝