Javascript 进阶 封装

标签：

js中处处是对象，面向对象的第一步当然就是封装了，由于Js中没有类的概念，所以封装起来也比较麻烦，下面介绍两种js的封装。

1、使用约定优先的原则，将所有的私有变量以_开头

[javascript] view plaincopy

 

1. <script type="text/javascript">  
2.        /** 
3.         * 使用约定优先的原则，把所有的私有变量都使用_开头 
4.         */  
5.        var Person = function (no, name, age)  
6.        {  
7.            this.setNo(no);  
8.            this.setName(name);  
9.            this.setAge(age);  
10.        }  
11.        Person.prototype = {  
12.            constructor: Person,  
13.            checkNo: function (no)  
14.            {  
15.                if (!no.constructor == "string" || no.length != 4)  
16.                    throw new Error("学号必须为4位");  
17.            },  
18.            setNo: function (no)  
19.            {  
20.                this.checkNo(no);  
21.                this._no = no;  
22.            }, getNo: function ()  
23.            {  
24.                return this._no;  
25.            }, setName: function (name)  
26.            {  
27.                this._name = name;  
28.            }, getName: function ()  
29.            {  
30.                return this._name;  
31.            }, setAge: function (age)  
32.            {  
33.                this._age = age;  
34.            }, getAge: function ()  
35.            {  
36.                return this._age;  
37.            }, toString: function ()  
38.            {  
39.                return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;  
40.            }  
41.        };  
42.        var p1 = new Person("0001", "鸿洋", "22");  
43.        console.log(p1.toString());        //no = 0001 , name = 鸿洋 , age = 22  
44.        p1.setNo("0003");  
45.        console.log(p1.toString());      //no = 0003 , name = 鸿洋 , age = 22  
46.        p1.no = "0004";  
47.        p1._no = "0004";  
48.        console.log(p1.toString());    //no = 0004 , name = 鸿洋 , age = 22  
49.   
50.    </script>  

看完代码，是不是有种被坑的感觉，仅仅把所有的变量以_开头，其实还是可以直接访问的，这能叫封装么，当然了，说了是约定优先嘛，这种方式还是不错 的，最起码成员变量的getter，setter方法都是prototype中，并非存在对象中，总体来说还是个不错的选择。如果你觉得，这不行，必须严 格实现封装，那么看第二种方式。

2、严格实现封装

[javascript] view plaincopy

 

1. <script type="text/javascript">  
2.         /** 
3.          *  使用这种方式虽然可以严格实现封装，但是带来的问题是get和set方法都不能存储在prototype中，都是存储在对象中的 
4.          * 这样无形中就增加了开销 
5.          */  
6.         var Person = function (no, name, age)  
7.         {  
8.             var _no , _name, _age ;  
9.             var checkNo = function (no)  
10.             {  
11.                 if (!no.constructor == "string" || no.length != 4)  
12.                     throw new Error("学号必须为4位");  
13.             };  
14.             this.setNo = function (no)  
15.             {  
16.                 checkNo(no);  
17.                 _no = no;  
18.             };  
19.             this.getNo = function ()  
20.             {  
21.                 return _no;  
22.             }  
23.             this.setName = function (name)  
24.             {  
25.                _name = name;  
26.             }  
27.   
28.             this.getName = function ()  
29.             {  
30.                 return _name;  
31.             }  
32.   
33.             this.setAge = function (age)  
34.             {  
35.                 _age = age;  
36.             }  
37.             this.  
38.                     getAge = function ()  
39.             {  
40.                 return _age;  
41.             }  
42.   
43.             this.setNo(no);  
44.             this.setName(name);  
45.             this.setAge(age);  
46.         }  
47.         Person.prototype = {  
48.             constructor: Person,  
49.             toString: function ()  
50.             {  
51.                 return "no = " + this.getNo() + " , name = " + this.getName() + " , age = " + this.getAge();  
52.             }  
53.         }  
54.         ;  
55.         var p1 = new Person("0001", "鸿洋", "22");  
56.         console.log(p1.toString());        //no = 0001 , name = 鸿洋 , age = 22  
57.         p1.setNo("0003");  
58.         console.log(p1.toString());      //no = 0003 , name = 鸿洋 , age = 22  
59.         p1.no = "0004";  
60.         console.log(p1.toString());    //no = 0003 , name = 鸿洋 , age = 22  
61.   
62.     </script>  

看上面的代码，去掉了this.属性名，严格的实现了封装，只能通过getter，setter访问成员变量了，但是存在一个问题，所有的方法都存在对象中，增加了内存的开销。

3、以闭包的方式封装

[javascript] view plaincopy

 

1. <script type="text/javascript">  
2.         /** 
3.          *  使用这种方式虽然可以严格实现封装，但是带来的问题是get和set方法都不能存储在prototype中，都是存储在对象中的 
4.          * 这样无形中就增加了开销 
5.          */  
6.         var Person = (function ()  
7.         {  
8.             var checkNo = function (no)  
9.             {  
10.                 if (!no.constructor == "string" || no.length != 4)  
11.                     throw new Error("学号必须为4位");  
12.             };  
13.             //共享变量  
14.             var times = 0;  
15.   
16.             return function (no, name, age)  
17.             {  
18.                 console.log(times++);    // 0 ,1 , 2  
19.                 var no , name , age;  
20.                 this.setNo = function (no)  
21.                 {  
22.                     checkNo(no);  
23.                     this._no = no;  
24.                 };  
25.                 this.getNo = function ()  
26.                 {  
27.                     return this._no;  
28.                 }  
29.                 this.setName = function (name)  
30.                 {  
31.                     this._name = name;  
32.                 }  
33.   
34.                 this.getName = function ()  
35.                 {  
36.                     return this._name;  
37.                 }  
38.   
39.                 this.setAge = function (age)  
40.                 {  
41.                     this._age = age;  
42.                 }  
43.                 this.  
44.                         getAge = function ()  
45.                 {  
46.                     return this._age;  
47.                 }  
48.   
49.                 this.setNo(no);  
50.                 this.setName(name);  
51.                 this.setAge(age);  
52.             }  
53.         })();  
54.         Person.prototype = {  
55.             constructor: Person,  
56.             toString: function ()  
57.             {  
58.                 return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;  
59.             }  
60.         }  
61.         ;  
62.         var p1 = new Person("0001", "鸿洋", "22");  
63.         var p2 = new Person("0002", "abc", "23");  
64.         var p3 = new Person("0003", "aobama", "24");  
65.   
66.   
67.         console.log(p1.toString());        //no = 0001 , name = 鸿洋 , age = 22  
68.         console.log(p2.toString());      //no = 0002 , name = abc , age = 23  
69.         console.log(p3.toString());    //no = 0003 , name = aobama , age = 24  
70.   
71.     </script>  

上述代码，js引擎加载完后，会直接执行Student = 立即执行函数，然后此函数返回了一个子函数，这个子函数才是new Student所调用的构造函数，又因为子函数中保持了对立即执行函数中checkNo(no) ，times的引用，（很明显的闭包）所以对于checkNo和times，是所有Student对象所共有的，创建3个对象后，times分别为 0，1，2 。这种方式的好处是，可以使Student中需要复用的方法和属性做到私有且对象间共享。 

转载地址：http://blog.csdn.net/lmj623565791/article/details/25080573

Javascript 进阶 封装

标签：

原文地址：http://www.cnblogs.com/smght/p/4819642.html