JavaScript中有哪些常見的構造模式

本篇文章給大家分享的是有關JavaScript中有哪些常見的構造模式，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

1.工廠模式

沒有解決對象識別的問題。因為函數內部使用了new Object來創建對象

function Factory(name,age)
{
  var o=new Object();
  o.name=name;
  o.age=age;
  o.what=what;//用函數引用的方式消除重復創建相同函數的弊端，節省資源.函數引用可以修改this的指向，函數調用不可以！
  return o;
}
what=funciton()
{
  alert(this.name+this.age);
}
var o=Factory("12",12);
o.what();//what中的this指向o對象

這時候的constructor是Object，同時所有通過工廠模式返回的對象都是Object類型，所以instanceof操作符沒有意義

console.log(o.constructor);
//打印function Object() { [native code] }
console.log(o instanceof Object);
//而且這時候所有的對象都是Object類型的

2.構造函數模式

function Person(name,age)
{
this.name=name;
this.age=age;
this.sayName=function(){ alert(this.name);}//相當于this.sayName=new Function("alert(this.name)")
}
var p1=new Person("xx",12);
var p2=new Person("yy",13);
alert(p1.sayName==p2.sayName)//內存地址不一樣!返回false

構造函數相比工廠模式的優點在于能夠正確的返回對象的類型，instanceof返回正確的結果。缺點在于如果向上面那樣，那么在每一個對象上面都要有一個sayName方法，而且這些sayName方法不是同一個Function實例，因為ECMAScript中函數是對象，因此每定義一個函數，也就是實例化了一個對象！

對上面的方法進行優化：

function Person(name,age)
{
this.name=name;
this.age=age;
this.sayName=sayName;//函數引用的方法，共享了同一個sayName,p1,p2的內存地址一樣，p1.sayName==p2.sayName返回true
}
function sayName()
{
alert(this.name);
}

缺點：全局函數sayName只能被某個對象調用p1.sayName，讓全局函數名不副實；如果對象要定義很多方法，那么就要定義很多的全局函數，所以自定義的引用類型沒有封裝性可言

3.原型模式

（1）無法通過構造函數參數向原型屬性動態傳值，后果就是：沒有個性，改變原型屬性的值，所有的實例都會受到干擾！

（2）當原型屬性的是引用類型的時候，如果在一個對象實例上修改屬性，將會影響所有實例！

總之一句話：牽一發而動全身（包括屬性和引用類型的值）是原型模式的特點。但是相比于構造函數類型，原型類型滿足

person1.sayName===person2.sayName//兩者的引用是一樣的

4.構造函數原型模式

用構造函數定義個性，用原型模式定義共性

function Person(name,age)
{
 this.name=name;
 this.age=age;
 this.friends=['liangklfang','qinliang'];
}
//用原型定義共性
Person.prototype={
 constructor:Person,
 sayName:function()
 {
  console.log(this.name);
 }
}
var person1=new Person('liangklfang',"12");
var person2=new Person('liangklf',"14");
console.log(person1.sayName===person2.sayName);
//共性是函數，打印true
console.log(person1.friends===person2.friends);
//friends是個性，打印false

也可以對構造函數原型模式進行優化，就是常說的動態原型模式

function Book(title,page)
{
 this.title=title;
 this.page=page;
 if(typeof Book.isLock=="undefined")
//第一次的時候，Book.isLock是undefined，給原型綁定函數，以后就不需要了，他相比于構造函數原型模式的優點在于把所有的邏輯全部封裝到構造函數里面！
  {
   alert("Enter!");
Book.prototype.what=function() 
     {
   alert(this.title+this.pages);
     }
   Book.isLock=true;
 }
}
//下面的兩次調用alert("Enter!")只會調用因此i，因為第一次已經通過Book.isLock設置為true了！相當于靜態方法！;
var b1=new Book("me",12);
b1.what();
var b2=new Book("he",13);
b2.what();

也可以在this中直接檢測，而不用給函數對象一個屬性

function Book(title,page)
{
 this.title=title;
 this.page=page;
  if(typeof this.sayName!='function')
  //第二次構造對象的時候會在原型中查找到sayName!
  {
   Book.prototype.sayName=function()
 {
  console.log(this.title);
 }
  }
}

5.寄生構造函數模式

除了使用new操作符以外，和工廠設計模式是一模一樣的！可以在特殊的情況下為對象創建構造函數，例如想用構造函數方式創建一個具有額外方法的特殊數組，因為不能直接修改Array的構造函數，因此可以用這個模式！

function SpecialArray()
{
  var value=new Array();
  value.push.apply(value,arguments);
  value.toPipedString=function()
  {
    return this.join("|");
}
 return value;
}

總之，寄生構造函數的特點就是：有點像java中的裝飾模式！把原來的對象進行裝飾，同時返回裝飾后的對象！這里就是把Array對象進行了裝飾！添加了toPipe的String方法。缺點就是不能依賴instanceof操作符確定對象類型了，因為和不再包裝類里面創建的對象是一模一樣的！

6. 穩妥構造函數模式

特點：沒有公共屬性，而且其方法也不引用this的對象，instanceof失效。和寄生構造函數的不同在于不使用new來構造函數，同時實例方法不引用this。實際是閉包

function Person(name,age,job)
{
   var o=new Object();
    o.sayName=funciton(){alert(name)}//這里實例方法沒有引用this，除了sayName不會有方法訪問傳入到構造函數中的原始數據！
   return o;
}
var friend=Person("xx",12,"teacher");
friend.name="female";//即使可以為這個對象修改了屬性name
friend.sayName();//不會被修改，依然彈出xx。不是female。但是，如果把上面的修改成：o.sayName=function(){alert(this.name)}//那么就會彈出female，也就是friend.name被修改成功了,如果沒有this，那么name的值一直引用的是原來的參數值！

以上就是JavaScript中有哪些常見的構造模式，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。