深入淺析JavaScript物件導向與原型函數_javascript技巧

對象，是javascript中非常重要的一個梗，是否能透徹的理解它直接關係到你對整個javascript體系的基礎理解，說白了，javascript就是一群對像在攪。 。 （嗶！）。

以下為大家介紹下常用的幾種物件建立模式

使用new關鍵字建立

最基礎的對象創建方式，無非就是和其他多數語言一樣說的一樣：沒對象，你new一個呀！

var gf = new Object(); gf.name = "tangwei"; gf.bar = "c++"; gf.sayWhat = function() { console.log(this.name + "said:love you forever"); }

用字面量建立

這樣似乎妥妥的了，但是宅寂的geek們豈能喜歡如此復雜和low土的定義變量的方式，作為一門腳本語言那應該有和其他兄弟們一樣的範兒，於是出現了物件字面量的定義方式：

var gf = { name : "tangwei", bar : "c++", sayWhat : function() { console.log(this.name + "said:love you forever"); } }

工廠模式

其實這是我們在實際中最常用的物件定義方式，但是我要有好多擁有相似屬性的物件（想想都讓人興奮。。。）怎麼辦呢？那要是一個個的定義，就會產生大量的程式碼，何不建個工廠，大量的生產出我們的物件呢，於是，javascript世界中第一個充氣娃。 。 。不，「工廠模式」誕生了！

function createGf(name, bar) { var o = new Object(); o.name = name; o.bar = bar; o.sayWhat = function() { alert(this.name + "said:love you forever"); } return o; } var gf1 = createGf("bingbing","d"); var gf2 = createGf("mimi","a");

建構子

工廠模式解決了多個相似物件的創建問題，但是問題又來了，這些物件都是Object整出來的，怎麼區分它們的物件具體型別呢？這時候我們就需要切換到另一種模式了，建構函式模式：

function Gf(name,bar){ this.name = name; this.bar = bar; this.sayWhat = function(){ alert(this.name + "said:love you forever"); } } var gf1 = new Gf("vivian","f"); var gf2 = new Gf("vivian2","f");

這裡我們使用一個大寫字母開頭的建構子取代了上例中的createGf，注意按照約定建構子的首字母要大寫。在這裡我們建立一個新對象，然後將建構函式的作用域賦給新對象，呼叫建構函式中的方法。

上面的方式似乎沒什麼不妥，但我們可以發現，兩個實例中呼叫的建構子中的sayWhat方法不是同一個Function實例：

console.log(gf1.sayWhat == gf2.sayWhat); //false

呼叫同一個方法，卻宣告了不同的實例，實在浪費資源。我們可以優化一下將sayWhat函式放到建構函式外面宣告：

function Gf(name,bar){ this.name = name; this.bar = bar; this.sayWhat = sayWhat } function sayWhat(){ alert(this.name + "said:love you forever"); }

這樣解決了，多個實例多次定義同一個方法實例的問題，但是新問題又來了，我們定義的sayWhat是一個全域作用域的方法，但這個方法其實是沒辦法直接呼叫的，這就有點矛盾了。如何更優雅的定義一個具備一定封裝性的物件呢？我們來看看javascript原型物件模式。

原型物件模式

理解原型物件

當我們建立一個函數時，該函數就會具備一個prototype屬性，這個屬性指向透過建構函式所建立的那個函數的原型物件。通俗點講原型物件就是記憶體中為其他物件提供共享屬性和方法的物件。

在原型模式中，不必再建構函式中定義實例屬性，可以將屬性資訊直接賦予原型物件：

function Gf(){ Gf.prototype.name = "vivian"; Gf.prototype.bar = "c++"; Gf.prototype.sayWhat = function(){ alert(this.name + "said:love you forever"); } } var gf1 = new Gf(); gf1.sayWhat(); var gf2 = new Gf();

和建構子不同的是這裡新物件的屬性和方法是所有實例都可以共享的，換句話說gf1和gf2存取的是同一份屬性和方法。原型物件中除了我們賦予的屬性外，還有一些內建的屬性，所有原型物件都具備一個constructor屬性，這個屬性是一個指向包含prototype屬性函數的一個指標（敢不敢再繞點！）。透過一幅圖我們來清楚的理一下這個繞口的流程：

所有的物件都有一個原型物件（prototype），原型物件中有一個constructor屬性指向包含prototype屬性的函數，Gf的實例gf1和gf2都包含一個內部屬性指向原型物件（在firefox瀏覽器中表現為私有屬性proto），當我們存取一個物件中的屬性時，首先會詢問實例物件中有沒有該屬性，如果沒有則繼續尋找原型物件。

使用原型物件

在前面的範例中，我們注意到在為原型物件添加屬性時，需要每個增加Gf.prototype，這個工作很重複，在上面物件的建立模式中，我們知道可以透過字面量的形式建立一個對象，這裡我們也可以改進一下：

function Gf(){} Gf.prototype = { name : "vivian", bar : "c++", sayWhat : function(){ alert(this.name + "said:love you forever"); } }

這裡有一個地方需要特別注意下，constructor屬性不再指向對象Gf，因為每定義一個函數，就會同時為其創建一個prototype對象，這個對像也會自動獲取一個新的constructor屬性，這個地方我們使用Gf.prototype本質上覆寫了原有的prototype對象，因此constructor也變成了新對象的constructor屬性，不再指向Gf，而是Object:

var gf1 = new Gf(); console.log(gf1.constructor == Gf);//false console.log(gf1.constructor == Object)//true

一般情况下，这个微妙的改变是不会对我们造成影响的，但如果你对constructor有特殊的需求，我们也可以显式的指定下Gf.prototype的constructor属性：

Gf.prototype = { constructor : Gf, name : "vivian", bar : "c++", sayWhat : function() { alert(this.name + "said:love you forever"); } } var gf1 = new Gf(); console.log(gf1.constructor == Gf);//true

通过对原型对象模式的初步了解，我们发现所有的实例对象都共享相同的属性，这是原型模式的基本特点，但往往对于开发者来说这是把“双刃剑”，在实际开发中，我们希望的实例应该是具备自己的属性，这也是在实际开发中很少有人单独使用原型模式的主要原因。

构造函数和原型组合模式

在实际开发中，我们可以使用构造函数来定义对象的属性，使用原型来定义共享的属性和方法，这样我们就可以传递不同的参数来创建出不同的对象，同时又拥有了共享的方法和属性。

function Gf(name,bar){ this.name = name; this.bar = bar; } Gf.prototype = { constructor : Gf, sayWhat : function() { alert(this.name + "said:love you forever"); } } var gf1 = new Gf("vivian", "f"); var gf2 = new Gf("vivian1", "c");

在这个例子中，我们再构造函数中定义了对象各自的属性值，在原型对象中定义了constructor属性和sayWhat函数，这样gf1和gf2属性之间就不会产生影响了。这种模式也是实际开发中最常用的对象定义方式，包括很多JS库（bootstrap等）默认的采用的模式。

以上所述是小编给大家介绍的JavaScript面向对象和原型函数，希望对大家有所帮助。