js 对象建立设计模式

建立js对象可使用多种模式，每种模式有着不一样的特色：以下：

1.工厂模式：建立一个函数，在函数中实例化一个对象，当每次调用函数时，就实例化一个对象，并返回这个对象；

咱们知道，对象是引用形式的，每次实例化一个对象，就是在内存中开辟一个内存空间，因此每次实例化出来的内存空间是不同的

一旦执行完调用，就是一个返回一个新对象，和原先调用的函数对象没有关系了

 1   <script>
 2         function createPeraon(name, age, job) {
 3             var o = new Object(); 4 o.name = name; 5 o.age = age; 6 o.job = job; 7 o.sayName = function() { 8 console.log(this.name); 9  } 10 return o; 11  } 12 13 var person1 = createPeraon('huanying2015', 25, '程序员工程师'); 14 var person2 = createPeraon('aluoha', 26, '架构师'); 15  person1.sayName(); 16  person2.sayName(); 17 </script>

 

备注：解决了创造多个类似对象的问题

 

2. 构造函数模式：

函数也是对象，建立一个函数，而后对这个函数的属性和方法进行设置。当须要新对象时，直接实例化这个对象函数，在实例化的时候，一块儿初始化必要属性，这样，就生成了一个新的对象，构造函数的属性和方法在实例化的新对象中都有，只是对参数进行了初始化

构造函数中，没有返回值

因此，构造函数要想建立新对象，就须要使用 new  来调用

 1  <script>
 2         function Person(name, age, job) {
 3             this.name = name; 4 this.age = age; 5 this.job = job; 6 this.sayName = function() { 7 console.log(this.name); 8  } 9  } 10 var aa = Person('nanna', 18, '学生'); 11 console.log(aa); // undefined 没有返回值 12 var person1 = new Person('huanying2015', 25, '程序员工程师'); 13 var person2 = new Person('aluoha', 26, '架构师'); 14  person1.sayName(); 15  person2.sayName(); 16 </script>

 

备注：构造函数的问题，是每一个方法都要在实例上从新建立一遍，这样就会形成不少浪费

 

3.原型模式：

咱们把对象的属性和方法都放到函数原型上，这样，在调用的时候，没必要从新建立属性和方法，直接就能够调用了；

原型上的属性和方法能够实现共享

 1     <script>
 2         function Person() {};
 3         Person.prototype.name = "huanying2015"; 4 Person.prototype.age = 25; 5 Person.prototype.job = "架构师"; 6 Person.prototype.sayName = function() { 7 console.log(this.name); 8  } 9 var person1 = new Person(); 10  person1.sayName(); 11 var person2 = new Person(); 12  person2.sayName(); 13 console.log(person1.sayName == person2.sayName) 14 </script>

 备注：缺点：引用类型的属性若是进行修改，会影响其它实例的结果，由于都指向同一个内存空间

4.构造+原型模式

综合构造和原型模式：把私有属性和方法放在构造函数中，把共有属性和方法放在原型中，这样，私有属性和方法的修改，只会影响操做对象的自己，不会对其余实例形成影响

 1   <script>
 2         function Person(name, age, job) {
 3             this.name = name; 4 this.age = age; 5 this.job = job; 6 this.friends = ['hali', 'jack']; 7  } 8 Person.prototype = { 9  constructor: Person, 10 sayName: function() { 11 console.log(this.name); 12  } 13  } 14 15 var person1 = new Person('huanying2015', 25, '首席架构师'); 16 var person2 = new Person('aluoha', 27, '常务事务官'); 17 18  person1.sayName(); 19  person2.sayName(); 20 console.log(person1.sayName == person2.sayName); 21 person1.friends.push('zhangsan'); 22 23  console.log(person1.friends); 24  console.log(person2.friends); 25 </script>

 

 

5. 动态原型模式：

把全部信息都封装在构造函数中，经过在构造函数中初始化原型（在必要的状况下），又保持了同时使用构造函数和原型的优势。便可以经过先检查某个方法是否 存在有效，来决定是否须要初始化原型

 <script>
        function Person(name, age, job) {
            this.name = name; this.age = age; this.job = job; this.friends = ['hali', 'jack']; if (typeof this.sayName != "function") { Person.prototype.sayName = function() { console.log(this.name); } } } var person1 = new Person('huanying2015', 25, '首席架构师'); var person2 = new Person('aluoha', 27, '常务事务官'); person1.sayName(); person2.sayName(); console.log(person1.sayName == person2.sayName); </script>

6.寄生构造函数模式：

 1     <script>
 2         function Person(name, age, job) {
 3             var o = new Object(); 4 o.name = name; 5 o.age = age; 6 o.job = job; 7 o.sayName = function() { 8 console.log(this.name); 9  } 10 return o; 11  } 12 13 var person1 = new Person('huanying2015', 25, '首席架构师'); 14  person1.sayName(); 15 </script>

 

这里：和工厂模式相似，只是使用new 来调用。引伸一下，以下：

 1    <script>
 2         function Person() {
 3             var values = new Array(); 4  values.push.apply(values, arguments); // 借用数组的方法，将arguments 压入数组对象中 5 values.toPipedString = function() { // 数组对象的方法 6 return this.join("---->"); 7  } 8 return values; 9  } 10 11 var person1 = new Person('huanying2015', 25, '首席架构师'); 12  console.log(person1.toPipedString()); 13 </script>

 

备注：返回的对象与构造函数，及构造函数的原型之间，没有任何关系，因此，不能使用instanceof 操做符来肯定对象类型

 

 

7.稳妥构造函数模式：（这里没有搞懂，是瞎写的，之后再来修改）

稳妥构造模式遵循与寄生构造模式相似的模式，也有不一样：1.新建立对象的方法，不引用this；2.不使用构造函数调用构造函数

 1   <script>
 2         function Person(name, age, job) {
 3             var o = new Object(); 4 o.name = name; 5 o.age = age; 6 o.job = job; 7 o.sayName = function() { 8  console.log(name); 9  } 10 return o; 11  } 12 13 var person1 = Person('huanying2015', 25, '首席架构师'); 14  person1.sayName(); 15 </script>