js 中使用工厂方法和构造器方法

1 直接创建对象

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <script type="text/javascript">
 8 
 9         /**
10          * 在js中并不存在类，所以可以直接通过Object来创建
11          * 但是使用如下方式创建，带来最大的问题：由于没有类的约束
12          * 无法实现对象的重复利用，并且没有一种约束，在操作时会带来问题
13          */
14         var person = new Object();
15         person.name = "Leon";
16         person.age = 33;
17         person.say = function(){
18             console.info(this.name + "  ,  "  + this.age);
19         }
20     </script>
21 
22 </head>
23 <body>
24 
25 </body>
26 </html>

View Code

2 使用json的方式创建对象

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <script type="text/javascript">
 8 
 9         /**
10          * json的意思就是javascript simple object notation
11          * json就是js的对象，但是他省去了xml中便签，而是通过｛｝来完成对象的说明
12          */
13         var person = {
14             name : "张三",
15             age  :23 ,
16             say : function(){
17                 console.info(this.name + "  ,  "  + this.age);
18             }
19         }
20         person.say();
21 
22         /**
23          * 通过json依然可以创建对象数组，创建的方式饿js的数组一样
24          */
25         var ps = [
26             {
27                 name : "Leon",
28                 age : 22
29             },{
30                 name : "Ada",
31                 age : 33
32             }
33         ];
34         for(var i = 0 ; i < ps.length ; i ++){
35             console.info(ps[i].name);
36         }
37 
38         /**
39          * 创建一组用户，用户的属性有
40          * name : string
41          * age : int
42          * friends : array
43          * List<Person> ps = new ArrayList<Person>();
44          * ps.add(new Person("Leon" , 22 , ["Ada","Alice"]));
45          * ps.add(new Person("John" , 33 , ["Ada","Chris"]));
46          * 把ps转换为json
47          */
48         ps = [
49             {
50                 name : "Leon",
51                 age : 22,
52                 friends:["Ada" , "Alice"]
53             },{
54                 name : "John",
55                 age : 33,
56                 friends : ["Ada","Chris"]
57             }
58         ];
59 
60     </script>
61 
62 </head>
63 <body>
64 
65 </body>
66 </html>

View Code

3 使用工厂方式创建

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <script type="text/javascript">
 8 
 9         /**
10          * 通过工厂的方式来创建Person对象
11          * 在createPerson中创建一个对象
12          * 然后为这个对象设置相应的属性和方法
13          * 之后返回这个对象
14          */
15         function createPerson( name , age ){
16             var  o = new Object();
17             o.name = name ;
18             o.age = age ;
19             o.say = function(){
20                 console.info(this.name + "  ,  " + this.age);
21             }
22             return o ;
23         }
24         /**
25          * 使用工厂的方式，虽然有效的解决了类的问题，
26          * 但是依然存在另外一个问题:无法获取对象的数据类型,即：
27          *     通过p1 instanceof ？ 无法获取对象p1 和p2 的数据类型,
28          *     通过typeof仅仅只能检测出object类型，如果希望使用instanceof来检测的话，无法确定检测的类型
29          *  解决方式：使用构造函数的方式解决问题
30          */
31         var p1 = createPerson("Leon" , 22);
32         var p2 = createPerson("Ada" , 33);
33         p1.say();
34         p2.say();
35         console.info(p1 + "  " + p1 instanceof ? );
36 
37     </script>
38 
39 </head>
40 <body>
41 
42 </body>
43 </html>

4 使用构造器创建

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <script type="text/javascript">
 8 
 9         /**
10          * 通过构造函数的方式创建，和基于工厂的创建类似
11          * 最大的区别就是函数的名称就是类的名称，按照java的约定，第一个字母大写。
12          * 使用构造函数创建时,在函数内部是通过this关键字来完成属性的定义
13          */
14         function Person(name , age){
15             this.name = name;
16             this.age = age ;
17             //以下方式带来的问题就是所有的对象都会为该行为分配控件
18             this.say = function(){
19                 console.info(this.name + "  ,  " + this.age);
20             }
21         }
22 
23         //通过new Person来创建对象
24         var p1 = new Person("Jhon" , 22);
25         var p2 = new Person("Ada" , 32);
26         p1.say();  //Jhon  ,  22
27         p2.say();  //Ada  ,  32
28         //使用构造函数的方式可以通过以下方恨死来检测对象的类型
29         console.info( p1 instanceof  Person) ;//true
30 
31         /**
32          * 使用构造函数穿件带来的问题
33          *   在java中:
34          *      class Person{
35          *          int id ;
36          *          String name ;
37          *          public void say(){
38          *
39          *          }
40          *      }
41          *    Person p1 = new Person();
42          *    Person p2 = new Person();
43          *      person的say方法里面的变量在栈中分配，在调用say方式的时候才分配空间，
44          *    而内存堆中只会存放id和name,不管创建多少个Person对象，say方法只会调用一块空间，在调用的时候才创建，
45          *    所有say是不占用空间的
46          *
47          *   在js中使用构造函数：
48          *      带来的问题就是每一个对象中都会存放一个方法的拷贝，如果对象的行为很多的话，
49          *    控件的占用率就会大大增加，即每创建一个person对象就分配一个say空间
50          *
51          *  解决方法：
52          *      可以将函数放到全局变量中定义，这样就可以让所有的类中的行为指向同一个函数
53          */
54         console.info(p1.say == p2.say); //false
55 
56 
57         //以下内容为解决方法：
58 
59         function Person2(name , age){
60             this.name = name;
61             this.age = age ;
62             this.say = say;
63         }
64         /**
65          * 将行为设置为全局的行为，如果将所有的方法都设计为全局函数的时候，
66          * 这个函数就可以被window调用,此时就破坏了对象了封装性,
67          * 而且如果某个对象有大量的方法，就会导致整个代码充斥着大量的全局函数
68          * 这样将不利于开发
69          */
70         function say(){
71             console.info(this.name + "  ,  " + this.age);
72         }
73 
74         var p1 = new Person2("Jhon" , 22);
75         var p2 = new Person2("Ada" , 32);
76         p1.say();  //Jhon  ,  22
77         p2.say();  //Ada  ,  32
78         console.info(p1.say == p2.say);  // true
79 
80     </script>
81 
82 </head>
83 <body>
84 
85 </body>
86 </html>