JavaScript創(chuàng)建對象方式總結【工廠模式、構造函數(shù)模式、原型模式等】

更新時間：2018年12月19日 12:01:23 作者：huansky

這篇文章主要介紹了JavaScript創(chuàng)建對象方式,結合實例形式總結分析了工廠模式、構造函數(shù)模式、原型模式等各種常見的javascript對象創(chuàng)建方式與相關操作注意事項,需要的朋友可以參考下

本文實例總結了JavaScript創(chuàng)建對象方式。分享給大家供大家參考，具體如下：

這里主要是對《JavaScript高級程序設計》第六章（面向對象的程序設計）的總結，書上的這章至少看了4遍是有的。該章主要講對象的創(chuàng)建與繼承。其中創(chuàng)建對象和繼承方式至少6種，再加上一些方法屬性，很容易搞得暈頭轉向的。因此有必要對本章的內容理一理，以后忘了也好過來看一看。

由于文章長度的限制，本文主要講創(chuàng)建對象。

1 創(chuàng)建對象

1.1 一般方法

使用Object或者采用對象字面量的方法。

var o = {a: 1};
var o2=new Object();
o2.a=1;

缺點：使用同一個接口創(chuàng)建很多對象，會產生大量重復的代碼。

1.2工廠模式

function parent(name,age){
  var Child = new Object();
  Child.name=name;
  Child.age=age;
  Child.sayHi=function(){
    console.log("Hi");
  }
  return Child;
};
var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

函數(shù)parent能夠根據(jù)接受的參數(shù)來構建一個包含所有必要信息的child對象。可以無限次調用這個函數(shù)，都會返回一個包含兩個屬性和一個方法的對象。

解決了創(chuàng)建多個相似對象的問題，但卻沒有解決對象識別的問題（即怎樣知道一個對象的類型）。

1.3構造函數(shù)模式

對于構造函數(shù)這個名字，學過java或者c++的同學應該都是知道的，在js里也是差不多的。

用構造函數(shù)將上面的例子重寫如下：

function Parent(name,age){
  this.name=name;
  this.age=age;
  this.sayHi=function(){
    console.log("Hi");
  };
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

對于構造函數(shù)，我們需要在調用的時候加關鍵字 new。要注意的是，構造函數(shù)始終是以一個大寫字母開頭，而非構造函數(shù)始終是以一個小寫字母開頭。

與工廠模式相比，主要有以下幾個不同之處：

沒有顯示地創(chuàng)建對象；
直接將屬性和方法賦給了this對象；
沒有return語句。

缺點：使用構造函數(shù)的缺點就是每個方法都需要在每個實例上重新創(chuàng)建一遍。

1.4原型模式

我們創(chuàng)建的每一個函數(shù)都有一個prototype（原型）屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性與方法。使用原型對象的好處是可以讓所有的對象實例共享其包含的屬性與方法。

function Parent(name,age){
  Parent.prototype.name=name;
  Parent.prototype.age=age;
  Parent.prototype.sayHi=function(){
    console.log("Hi");
  };
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

缺點：優(yōu)點就是其缺點，方法屬性都可以共享。具體可以看下面這個例子

function Parent(name,age){
  Parent.prototype.name=name;
  Parent.prototype.age=age;
  Parent.prototype.arr=["123","we"];
  Parent.prototype.sayHi=function(){
    console.log("Hi");
  };
}
var x = new Parent("Tom",12);
var y = new Parent("Tom1",12);
x.arr.push("x");
y.arr.push("y");
console.log(x.arr);//["123", "we", "x", "y"]
console.log(y.arr);//["123", "we", "x", "y"]

對象x修改自己的屬性，竟然會影響到y(tǒng)對象；同理，對y也一樣。這個明顯就很不合理啊，太可怕了！

1.5組合使用構造函數(shù)模式和原型模式

function Parent(name,age){
　　//只把屬性留在這里定義，方法放在原型對象中
  this.name=name;
  this.age=age;
}
//第一種方式
Parent.prototype.sayHi=function(){
  console.log("Hi");
};
//第二種方式
//由于采用對象字面量，因此必須修正其constructor屬性；
Parent.prototype={
  constructor:Parent,
  sayHi:function(){
    console.log("Hi");
  }
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

在這個例子中，實例屬性都是在構造函數(shù)中定義的，而由所有實例共享的屬性constructor和方法則是在原型中定義的。

是目前使用最廣泛、認同度最高的一種創(chuàng)建自定義類型的方法。

--------------------------感覺后面幾種方法有些變態(tài)了--------------------------------

1.6 動態(tài)原型模式

function Parent(name,age){
  this.name=name;
  this.age=age;
  if( typeof this.sayHi !="function"){
    Parent.prototype.sayHi=function(){
      console.log("Hi");
    };
  }
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

先檢查某個應該存在方法是否有效再來決定是否需要初始化原型。

1.7寄生構造函數(shù)模式

當前面幾種都不適用的情況下，可以使用寄生構造函數(shù)模式。這種函數(shù)的基本思想是創(chuàng)建一個函數(shù)，該函數(shù)的作用僅僅是封裝創(chuàng)建對象的代碼，然后再返回新創(chuàng)建的對象。

function parent(name,age){
  var Child = new Object();
  Child.name=name;
  Child.age=age;
  Child.sayHi=function(){
    console.log("Hi");
  }
  return Child;
};
var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

但是其實就是和工廠模式一模一樣，你ＴＭ在逗我嗎？？？？？

1.8穩(wěn)妥構造函數(shù)模式

穩(wěn)妥構造函數(shù)遵循與寄生構造函數(shù)模式類似的模式，但有兩點不同：一是新創(chuàng)建對象的實例方法不引用this; 二是不使用new操作調用構造函數(shù)。

function Parent(name,age){
  var o=new Object();
　　 //私有變量或者方法
  var name=name,
    age=age;
  o.sayName=function(){
　　　　 //name前面沒有this
    console.log(name+" "+age)
  }
  return o;
}
var x = Parent("Tom",12);
x.sayName(); //Tom 12

變量x中保存的是一個穩(wěn)妥對象，而除了調用sayName()方法外，沒有別的方式可以訪問其數(shù)據(jù)成員。

更多關于JavaScript相關內容還可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: