如何封装自己的js类库

标签：

js中的很多变量（除了基本数据类型数字和字符串之外）可以看成类似java中的class是经过实例化的对象，有自己的成员方法，和成员变量。
比如：window对象表示一个浏览器窗口或一个框架，在js中window对象是全局对象，如图下图所示。 

接下来谈谈，如何实现自己的类库，先展示一个最简单的例子：

 1 (function(a) {
 2     function Person(name, age) {
 3         this.name = name;
 4         this.age = age;
 5     }
 6     Person.prototype = {
 7         constructor : Person,
 8         getName : function() {
 9             return this.name;
10         },
11         getAge : function() {
12             return this.age;
13         }
14     }
15     a.Person = Person;
16 })(window);

1. 为何要用自执行匿名函数这种闭包形式？
2. 如何理解函数中this？
3. 为什么不能使用var声明所封装的类的属性？

 注意点：

1. 为何要用自执行匿名函数这种闭包形式？
   是为了防止命名空间污染。下面举例子说明下：
   第一种：

   1 (function(a) {
   2     var name = "zhangsan";
   3     function A(name) {
   4         this.name = name;
   5     }
   6     a.A= A;
   7 })(window);

   第二种：

   1 var name = "zhangsan";
   2 function A(name) {
   3     this.name = name;
   4 }

   如果我们new A()对象的时候，第一种不会对window对象的name属性有影响，而第二种则会对window对象的name属性产生影响。

2. 如何理解函数中this？
   通常在函数内部用this定义变量时，变量是存在于当前this指向的对象。 如果直接调用函数，那么this指向的可能是window对象；
   

   1 Person("zhangsan", 20);
   2 console.log(window.age); //输出为 20

   如果通过new来生成函数对象，那么this就一定是指向这个新产生的对象。

   1 var p = new Person("zhangsan", 30);
   2 console.log(p.age); //输出为 30

   两个age，一个是全局window对象的变量，一个是Person实例化对象的变量 说明：js中的通过this给变量赋值，实际上是这个变量属于当前this指向的对象。

3. 为什么不能使用var声明所封装的类的属性？
   因为在自执行匿名函数中var定义的是当前作用域的局部变量，当js脚本运行完，这个变量就会销毁，及时在我们new出新的对象之后，这个变量也不能成为对象的属性；有一种情况特殊，在window作用域下通过var声明变量，那么这个变量就会一直存在，但这样也就失去封装类的意义了，一定要将变量封装为对象的属性。

如何封装自己的js类库

标签：

原文地址：http://www.cnblogs.com/chenhao1990/p/4628802.html