1. 程式人生 > >js 建立物件的9種方式對比

js 建立物件的9種方式對比

@建立物件

##原生建立方法

new func();   
{};

##工廠模式

優點:原生建立方法的封裝。

缺點:物件型別不可知。

function createFunc(args){… return obj;}
var obj=createFunc(args)

##建構函式模式

優點:物件型別可知(instanceof,obj.constructor)

缺點:構造了多個相同功能的方法。(可以通過this.func=window.func,但這樣函式變全域性,失去封裝性)

function Func(args){this.prop…}
var obj=new Func(args);      ||      Func.call(obj,args);     ||     Func(args)  window.prop;…

##原型模式

優點:解決了建構函式缺點

缺點:預設屬性相同,原型的引用型屬性有坑,一個變全都變。

function Func(){}    Func.prototype.prop…        //Func.prototype={,…} Object.defineProperty(Func.prototype,constructor,{enumerable:false,value:Func})   重寫原型更常用,但需在建立例項前定義原型,否則有坑
var obj=new Func();

##構造原型模式結合

優點:結合構造原型兩家之長

缺點:不突出原型程式設計泛型的特點。

例項屬性用構造,方法和共享屬性用原型。

##原型克隆模式(推薦)

優點:顯現出原型程式設計泛型的特點單頁web應用p38

缺點:

var proto={};function makeFunc(){varobj=Object.create(proto);obj.prop=…; return obj;}
var obj=makeFunc();

不支援object.create()的瀏覽器可js實現

##動態原型構造

優點:和其他OO語言更接近。

缺點:不突出原型模式特點。

建構函式中動態初始化原型。

function Func(){this.prop=…;if(typeofthis.func!='function'){Func.prototype=function(){}} };
var obj=new Func();

確保原型方法只定義一次,if檢測只需一次。(若重寫原型會切斷與原有例項的聯絡,原型模式同坑)

##寄生式構造

優點:可用於構造方法的重構。

缺點:物件型別不可知,此法少用。

function NewFunc(){var obj=new Func();obj.prop=…;return obj;}
var obj=new NewFunc();

##穩妥建構函式模式(不用this不用new)

優點:專用於安全執行環境,建構函式的變數只能通過get函式來獲取。

缺點:物件型別不可知

function Func(){var obj=new Object();var_prop;obj.getProp(){};return obj; }
var obj=Func();

和工廠方法的區別在於變數私有,只能通過閉包訪問。保證了安全性。