JavaScript设计模式 Item 3 —封装

在JavaScript 中，并没有对抽象类和接口的支持。JavaScript 本身也是一门弱类型语言。在封装类型方面，JavaScript 没有能力，也没有必要做得更多。对于JavaScript 的设计模式实现来说，不区分类型是一种失色，也可以说是一种解脱。

从设计模式的角度出发，封装在更重要的层面体现为封装变化。

通过封装变化的方式，把系统中稳定不变的部分和容易变化的部分隔离开来，在系统的演变过程中，我们只需要替换那些容易变化的部分，如果这些部分是已经封装好的，替换起来也相对容易。这可以最大程度地保证程序的稳定性和可扩展性。

javascript封装的的基本模式有3种。

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.             }, 
  23.             getNo: function ()
  24.             {
  25.                 return this._no;
  26.             setName: function (name)
  27.             {
  28.                 this._name = name;
  29.             }, 
  30.             getName: function ()
  31.             {
  32.                 return this._name;
  33.             },  
  34.             setAge: function (age)
  35.             {
  36.                 this._age = age;
  37.             },  
  38.             getAge: function ()
  39.             {
  40.                 return this._age;
  41.             },  
  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
  55.     </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.             }
  28.             this.getName = function ()
  29.             {
  30.                 return _name;
  31.             }
  33.             this.setAge = function (age)
  34.             {
  35.                 _age = age;
  36.             }
  37.             this.
  38.                     getAge = function ()
  39.             {
  40.                 return _age;
  41.             }
  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
  62.     </script>

那么这与我们先前讲过的其他创建对象的模式有什么不同呢，在上面的例子中，我们在创建和引用对象的属性时总要使用this关键字。而在本例中，我们用var声明这些变量。这意味着它们只存在于Person构造器中。checkno函数也是用同样的方式声明的，因此成了一个私用方法。

需要访问这些变量和函数的方法只需要声明在Person中即可。这些方法被称为特权方法，因为它们是公用方法，但却能够访问私用属性和方法。为了在对象外部能访问这些特权函数，它们的前面被加上了关键字this。因为这些方法定义于Person构造器的作用域，所以它们能访问到私用属性。引用这些属性时并没有使用this关键字，因为它们不是公开的。所有取值器和赋值器方法都被改为不加this地直接引用这些属性。

任何不需要直接访问的私用属性的方法都可以像原来那样在Person.prototype中声明。像toString()方法。只有那些需要直接访问私用成员的方法才应该被设计为特权方法。但特权方法太多又会占用过多的内存，因为每个对象实例都包含所有特权方法的新副本。

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

3、以闭包的方式封装

  1. <script type="text/javascript">
  3.         var Person = (function ()
  4.         {
  5.             //静态方法（共享方法）
  6.             var checkNo = function (no)
  7.             {
  8.                 if (!no.constructor == "string" || no.length != 4)
  9.                     throw new Error("学号必须为4位");
  10.             };
  11.             //静态变量（共享变量）
  12.             var times = 0;
  14.               //return the constructor.
  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.                 }
  33.                 this.getName = function ()
  34.                 {
  35.                     return this._name;
  36.                 }
  38.                 this.setAge = function (age)
  39.                 {
  40.                     this._age = age;
  41.                 }
  42.                 this.getAge = function ()
  43.                 {
  44.                     return this._age;
  45.                 }
  47.                 this.setNo(no);
  48.                 this.setName(name);
  49.                 this.setAge(age);
  50.             }
  51.         })();
  53.         Person.prototype = {
  54.             constructor: Person,
  55.             toString: function ()
  56.             {
  57.                 return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
  58.             }
  59.         };
  61.         var p1 = new Person("0001", "小平果", "22");
  62.         var p2 = new Person("0002", "abc", "23");
  63.         var p3 = new Person("0003", "aobama", "24");
  65.         console.log(p1.toString());        //no = 0001 , name = 小平果 , age = 22
  66.         console.log(p2.toString());      //no = 0002 , name = abc , age = 23
  67.         console.log(p3.toString());    //no = 0003 , name = aobama , age = 24
  69.     </script>

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

这里的私用成员和特权成员仍然被声明在构造器。但那个构造器却从原来的普通函数变成了一个内嵌函数，并且被作为包含它的函数的返回值给变量Person。这就创建了一个闭包，你可以把静态的私用成员声明在里面。位于外层函数声明之后的一对空括号很重要，其作用是代码一载入就立即执行这个函数。这个函数的返回值是另一个函数，它被赋给Person变量，Person因此成了一个构造函数。在实例华Person时，所调用的这个内层函数。外层那个函数只是用于创建一个可以用来存储静态成员的闭包。

在本例中，checkno被设计成为静态方法，原因是为Person的每个实例都生成这个方法的一个新副本毫无道理。此外还有一个静态属性times，其作用在于跟踪Person构造器的总调用次数。