js設計模式小結

標籤：綜合   小結   需要   模式   this   判斷   blog   執行個體   xiaomi   

1 建構函式模式

var Person = function(name){this.name = name;this.getName = function(){console.log(this.name);}};var Person1= new Person(‘xiaoming‘);Person1.getName();var Person2 = new Person(‘xiaohua‘);Person2.getName();

使用建構函式模式可以實現重複建立多個相似對象，且可以實現自訂傳參，但缺點是每次執行個體化一個對象時就相當於將該對象方法重新建立了一遍。

 2 原型模式

var Person = function(){};Person.prototype.name = ‘xiaoming‘;Person.prototype.getName = function() {console.log(this.name);};var Person1 = new Person();Person1.getName();var Person2 = new Person();Person2.getName();

原型模式的優點在於，每次執行個體化一個對象時，不需要重新建立該對象方法，而是通過指標引用原型鏈的方法，缺點是不能自訂傳參，所以就有了下面的建構函式和原型組合使用的模式
 3 建構函式+原型模式

var Person = function(name){this.name = name;};Person.prototype.getName = function() {console.log(this.name);};var Person1 = new Person(‘xiaoming‘);Person1.getName();var Person2 = new Person(‘xiaohua‘);Person2.getName();

綜合了建構函式和原型模式的雙方優點
4 原廠模式

function createPerson(name){var Person = new Object();Person.name = name;Person.getName = function(){console.log(this.name);} return Person;}var Person1= createPerson(‘xiaoming‘);Person1.getName();var Person2= createPerson(‘xiaohua‘);Person2.getName();

原廠模式也可以用於建立多個相似對象，與建構函式函數模式相似，主要區別是在內部通過new Object()建立對象最後return 出來，但是存在無法判斷物件類型的問題

5 模組模式

var person = function(name){function getName(name){console.log(name);}return {getName: getName}}();person.getName(‘xiaoming‘);

特別是在單頁應用中常用的模式,可以理解為引入了私人變數特權方法的單例。

js設計模式小結