深入javascript——構(gòu)造函數(shù)和原型對(duì)象

jsbintask 發(fā)布于2019-08-21 12:24 / 764人閱讀

摘要：原型對(duì)象模式理解原型對(duì)象當(dāng)我們創(chuàng)建一個(gè)函數(shù)時(shí)，該函數(shù)就會(huì)具備一個(gè)屬性，這個(gè)屬性指向通過構(gòu)造函數(shù)創(chuàng)建的那個(gè)函數(shù)的原型對(duì)象。在這個(gè)例子中，我們?cè)贅?gòu)造函數(shù)中定義了對(duì)象各自的屬性值，在原型對(duì)象中定義了屬性和函數(shù)，這樣和屬性之間就不會(huì)產(chǎn)生影響了。

對(duì)象，是javascript中非常重要的一個(gè)梗，是否能透徹的理解它直接關(guān)系到你對(duì)整個(gè)javascript體系的基礎(chǔ)理解，說白了，javascript就是一群對(duì)象在攪。。（嗶！）。

常用的幾種對(duì)象創(chuàng)建模式

使用new關(guān)鍵字創(chuàng)建

最基礎(chǔ)的對(duì)象創(chuàng)建方式，無非就是和其他多數(shù)語言一樣說的一樣：沒對(duì)象，你new一個(gè)呀！

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

使用字面量創(chuàng)建

這樣似乎妥妥的了，但是宅寂的geek們豈能喜歡如此復(fù)雜和low土的定義變量的方式，作為一門腳本語言那應(yīng)該有和其他兄弟們一樣的范兒，于是出現(xiàn)了對(duì)象字面量的定義方式：

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

工廠模式

實(shí)際上這是我們?cè)趯?shí)際中最常用的對(duì)象定義方式，但是我要有好多擁有相似屬性的對(duì)象（想想都讓人激動(dòng)。。。）怎么辦呢？那要是一個(gè)個(gè)的定義，就會(huì)產(chǎn)生大量的代碼，何不建個(gè)工廠，批量的生產(chǎn)出我們的對(duì)象呢，于是，javascript世界中第一個(gè)充氣娃。。。不，“工廠模式”誕生了！

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");

構(gòu)造函數(shù)

工廠模式解決了多個(gè)相似對(duì)象的創(chuàng)建問題，但是問題又來了，這些對(duì)象都是Object整出來的，怎么區(qū)分它們的對(duì)象具體類型呢？這時(shí)候我們就需要切換到另一種模式了，構(gòu)造函數(shù)模式：

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");

這里我們使用一個(gè)大寫字母開頭的構(gòu)造函數(shù)替代了上例中的createGf，注意按照約定構(gòu)造函數(shù)的首字母要大寫。在這里我們創(chuàng)建一個(gè)新對(duì)象，然后將構(gòu)造函數(shù)的作用域賦給新對(duì)象，調(diào)用構(gòu)造函數(shù)中的方法。
上面的方式似乎沒什么不妥，但是我們可以發(fā)現(xiàn)，兩個(gè)實(shí)例中調(diào)用的構(gòu)造函數(shù)中的sayWhat方法不是同一個(gè)Function實(shí)例：

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

調(diào)用同一個(gè)方法，卻聲明了不同的實(shí)例，實(shí)在浪費(fèi)資源。我們可以優(yōu)化一下將sayWhat函數(shù)放到構(gòu)造函數(shù)外面聲明：

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

這樣解決了，多個(gè)實(shí)例多次定義同一個(gè)方法實(shí)例的問題，但是新問題又來了，我們定義的sayWhat是一個(gè)全局作用域的方法，但這個(gè)方法其實(shí)是沒法直接調(diào)用的，這就有點(diǎn)矛盾了。如何更優(yōu)雅的定義一個(gè)具備一定封裝性的對(duì)象呢？我們來看一下javascript原型對(duì)象模式。

原型對(duì)象模式

理解原型對(duì)象

當(dāng)我們創(chuàng)建一個(gè)函數(shù)時(shí)，該函數(shù)就會(huì)具備一個(gè)prototype屬性，這個(gè)屬性指向通過構(gòu)造函數(shù)創(chuàng)建的那個(gè)函數(shù)的原型對(duì)象。通俗點(diǎn)講原型對(duì)象就是內(nèi)存中為其他對(duì)象提供共享屬性和方法的對(duì)象。

在原型模式中，不必再構(gòu)造函數(shù)中定義實(shí)例屬性，可以將屬性信息直接賦予原型對(duì)象：

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();

和構(gòu)造函數(shù)不同的是這里新對(duì)象的屬性和方法是所有實(shí)例都可以共享的，換句話說gf1和gf2訪問的是同一份屬性和方法。原型對(duì)象中除了我們賦予的屬性外，還有一些內(nèi)置的屬性，所有原型對(duì)象都具備一個(gè)constructor屬性，這個(gè)屬性是一個(gè)指向包含prototype屬性函數(shù)的一個(gè)指針（敢不敢再繞點(diǎn)！）。通過一幅圖我們來清楚的理一下這個(gè)繞口的流程：

所有的對(duì)象都有一個(gè)原型對(duì)象（prototype），原型對(duì)象中有一個(gè)constructor屬性指向包含prototype屬性的函數(shù)，Gf的實(shí)例gf1和gf2都包含一個(gè)內(nèi)部屬性指向原型對(duì)象（在firefox瀏覽器中表現(xiàn)為私有屬性proto），當(dāng)我們?cè)L問一個(gè)對(duì)象中的屬性時(shí)，首先會(huì)詢問實(shí)例對(duì)象中有沒有該屬性，如果沒有則繼續(xù)查找原型對(duì)象。

使用原型對(duì)象

在前面的示例中，我們注意到在為原型對(duì)象添加屬性時(shí)，需要每個(gè)都增加Gf.prototype，這個(gè)工作很重復(fù)，在上面對(duì)象的創(chuàng)建模式中，我們知道可以通過字面量的形式創(chuàng)建一個(gè)對(duì)象，這里我們也可以改進(jìn)一下：

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

這里有一個(gè)地方需要特別注意下，constructor屬性不再指向?qū)ο驡f，因?yàn)槊慷x一個(gè)函數(shù)，就會(huì)同時(shí)為其創(chuàng)建一個(gè)prototype對(duì)象，這個(gè)對(duì)象也會(huì)自動(dòng)獲取一個(gè)新的constructor屬性，這個(gè)地方我們使用Gf.prototype本質(zhì)上覆寫了原有的prototype對(duì)象，因此constructor也變成了新對(duì)象的constructor屬性，不再指向Gf，而是Object:

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

一般情況下，這個(gè)微妙的改變是不會(huì)對(duì)我們?cè)斐捎绊懙模绻銓?duì)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

通過對(duì)原型對(duì)象模式的初步了解，我們發(fā)現(xiàn)所有的實(shí)例對(duì)象都共享相同的屬性，這是原型模式的基本特點(diǎn)，但往往對(duì)于開發(fā)者來說這是把“雙刃劍”，在實(shí)際開發(fā)中，我們希望的實(shí)例應(yīng)該是具備自己的屬性，這也是在實(shí)際開發(fā)中很少有人多帶帶使用原型模式的主要原因。

構(gòu)造函數(shù)和原型組合模式

在實(shí)際開發(fā)中，我們可以使用構(gòu)造函數(shù)來定義對(duì)象的屬性，使用原型來定義共享的屬性和方法，這樣我們就可以傳遞不同的參數(shù)來創(chuàng)建出不同的對(duì)象，同時(shí)又擁有了共享的方法和屬性。

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");

在這個(gè)例子中，我們?cè)贅?gòu)造函數(shù)中定義了對(duì)象各自的屬性值，在原型對(duì)象中定義了constructor屬性和sayWhat函數(shù)，這樣gf1和gf2屬性之間就不會(huì)產(chǎn)生影響了。這種模式也是實(shí)際開發(fā)中最常用的對(duì)象定義方式，包括很多js庫(kù)（bootstrap等）默認(rèn)的采用的模式。