JavaScript创建对象的几种模式-蒲公英云

1. 工厂模式

其基本思想是：创建一个函数，在函数中创建一个对象，给对象增加属性和方法，最后返回该对象。下面是一个简单的工厂模式：

function createPerson(name, age){ var obj = new Object(); //创建一个新对象 obj.name = name; //给对象增加属性和方法 obj.age = age; obj.show = function(){ alert("我的名字叫"+this.name+";性别："+this.age); }; return obj; //返回该对象 } var person1 = createPerson("sean","male"); person1.show(); 
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

这样，函数createPerson()就能够接收对应的参数来创建对象，可以多次调用createPerson()函数，所以工厂模式能解决创建多个相似对象的问题。当然，也存在一些缺点：例如每个对象都有自己的方法，这样是很浪费资源的。

2. 构造函数模式

通过自定义构造函数来自定义对象类型的属性和方法。构造函数模式如下：

function Person(name, age){ this.name = name; this.age = age; this.show = function(){ alert("我的名字叫"+this.name+";性别："+this.age); }; } var person1 = new Person("sean","male"); person1.show(); 
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

我们可以发现，上面的Person()函数内没有创建一个新的对象，也没有返回对象，而是在函数外部通过new Person()来创建对象的实例。所以通过new Person();调用构造函数实际上需要经过一下步骤：

创建一个新的对象；
将this指向该对象；
为这个新对象添加属性和方法；
最后返回该对象
上述代码运行之后，person1对象有一个constructor（构造函数）属性，该属性指向Person，person1是Person的一个实例。这样我们能知道person1的特定类型。
另外，上述讲的构造函数和普通函数又有什么区别，其实通过观察我们可以发现构造函数和普通函数在形式上是没有差别的，真正的差别在于调用形式：任何函数，只要通过new操作符来调用，那么就可以当作构造函数，如果不通过new操作符调用，那就是普通函数（通过为了区别构造函数和普通，在写法上也有区别，构造函数一般首字母都会大写）。

//构造函数
var person1 = new Person(“sean”,”male”);
person1.show(); //sean
//普通函数
Person(“jack”,”male”);
show(); //jack, 其实是window.show();

构造函数方法虽然简化了工厂模式，但是还是每一个实例上就有一个独立的方法。因为上面的show()方法其实是：

this.show = new Function("alert('我的名字叫'+this.name+';性别：'+this.age);");
   1
   1

因此，在构造函数模式中，不同实例上的同名函数是不相等的。

3. 原型模式

为了节约内存，实现属性和方法的共享，引出了原型对象。原型对象的好处是可以让所有的对象实例共享它所包含的属性和方法。原型模式的写法如下：

function Person(){       
    }
    Person.prototype.name="sean";
    Person.prototype.sex="male";
    Person.prototype.friends=["jack","mary"];
    Person.prototype.show = function(){ alert("我是"+this.name);};
    var person1 = new Person();
    person1.show(); //sean
    var person2 = new Person();
    person2.name="Tom";
    person2.show(); //Tom
    alert(person2.show===person1.show); //true
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17

由此可以看出，person1和person2的共享一个show方法，而不是像上面两种方法一样每个实例都有一个show方法。默认情况下，每个原型对象都会自动获得一个constructor(构造函数)属性，该属性指向prototype属性所在函数的指针。上面的构造函数属性Person.prototype.constructor指向Person。上面代码也可简写成如下：

function Person(){       
    }
    Person.prototype = {
        constructor: Person,
        name:"sean",
        sex:"male",
        friends:["jack","mary"],
        show : function(){ alert("我是"+this.name);},
    };
    var person1 = new Person();
    person1.friends.push("Lily"); //jack, mary, Lily
    alert(person1.friends);
    var person2 = new Person();
    alert(person2.friends); //jack, mary, Lily
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18

通过上面的实例，我们可以发现，在创建新的实例对象时，所有的实例对象都或者相同的初始化属性值，这个可以通过设置实例中的值来隐藏原型中的属性值。但是原型模式最大的一个缺点是，如果属性中包含引用类型值的属性，只要改变了其中一个实例中的属性值，那么其他实例中的属性值也将被改变。就比如上述代码中person1的friends属性改变后，person2中的friends属性值也会被改变。
这是我们就需要将属性分开，哪些是实例属性，哪些是共享的属性，这样就出现了第四种创建对象的模式。

4、组合使用构造函数和原型模式

这种创建对象的思想是：使用构造函数定义实例属性，而使用原型模式定义方法和共享的属性，这样每个实例都有自己的一份实例属性的副本，但同时又共享着对方法的使用，最大限度的节省了内存。上面的代码可以改写成：

function Person(name, sex, friends){ 
        this.name=name;
        this.sex=sex;
        this.friends=friends;   
    }
    Person.prototype = {
        constructor: Person,
        show : function(){ alert("我是"+this.name);},
    };
    var person1 = new Person("sean", "male", ["jack", "mary"]);
    person1.friends.push("Lily"); //jack, mary, Lily
    alert(person1.friends);
    var person2 = new Person("leo", "male", ["john", "Lucy"]);
    alert(person2.friends); //john, Lucy
    alert(person1.friends===person2.friends); //false
    alert(person2.show===person1.show); //true
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

上述代码中，属于实例的属性都被定义在构造函数中，而所有实例共享的属性以及方法定义在原型中。这样，即使修改了person1中的friends属性，person2中的friends属性并没有改变。这种设计模式是目前使用最广泛，认可度最高的一种自定义类型的方式。

5、动态原型模式

动态原型模式设计思想是：将所有的信息都放在构造函数中，在满足一定的条件时动态添加原型。这种方法保证了构造函数和原型的优点。

function Person(name, sex, friends){ 
        this.name=name;
        this.sex=sex;
        this.friends=friends;
        if (typeof this.show !="function") {
            alert("创建原型方法");
            Person.prototype.show = function(){ 
                alert("我是"+this.name);
            };
        }
        }
    var person1 = new Person("sean", "male", ["jack", "mary"]);
    person1.show(); //弹出"创建原型方法"和"我是sean"
    var person2 = new Person("leo", "male", ["Tom"]);
    person2.show(); //只弹出"我是Tom"
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18