Javascript 进阶 封装

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

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

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. </script>

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

2、严格实现封装

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. this.getName = function ()
28. {
29. return _name;
30. }
31. this.setAge = function (age)
32. {
33. _age = age;
34. }
35. this.
36. getAge = function ()
37. {
38. return _age;
39. }
40. this.setNo(no);
41. this.setName(name);
42. this.setAge(age);
43. }
44. Person.prototype = {
45. constructor: Person,
46. toString: function ()
47. {
48. return "no = " + this.getNo() + " , name = " + this.getName() + " , age = " + this.getAge();
49. }
50. }
51. ;
52. var p1 = new Person("0001", "鸿洋", "22");
53. console.log(p1.toString());        //no = 0001 , name = 鸿洋 , age = 22
54. p1.setNo("0003");
55. console.log(p1.toString());      //no = 0003 , name = 鸿洋 , age = 22
56. p1.no = "0004";
57. console.log(p1.toString());    //no = 0003 , name = 鸿洋 , age = 22
58. </script>

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

3、以闭包的方式封装

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. return function (no, name, age)
16. {
17. console.log(times++);    // 0 ,1 , 2
18. var no , name , age;
19. this.setNo = function (no)
20. {
21. checkNo(no);
22. this._no = no;
23. };
24. this.getNo = function ()
25. {
26. return this._no;
27. }
28. this.setName = function (name)
29. {
30. this._name = name;
31. }
32. this.getName = function ()
33. {
34. return this._name;
35. }
36. this.setAge = function (age)
37. {
38. this._age = age;
39. }
40. this.
41. getAge = function ()
42. {
43. return this._age;
44. }
45. this.setNo(no);
46. this.setName(name);
47. this.setAge(age);
48. }
49. })();
50. Person.prototype = {
51. constructor: Person,
52. toString: function ()
53. {
54. return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
55. }
56. }
57. ;
58. var p1 = new Person("0001", "鸿洋", "22");
59. var p2 = new Person("0002", "abc", "23");
60. var p3 = new Person("0003", "aobama", "24");
61. console.log(p1.toString());        //no = 0001 , name = 鸿洋 , age = 22
62. console.log(p2.toString());      //no = 0002 , name = abc , age = 23
63. console.log(p3.toString());    //no = 0003 , name = aobama , age = 24
64. </script>

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

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