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>