JavaScript中原型和原型鏈詳解

更新時(shí)間：2015年02月11日 09:46:45 投稿：junjie

這篇文章主要介紹了JavaScript中原型和原型鏈詳解,本文講解了私有變量和函數(shù)、靜態(tài)變量和函數(shù)、實(shí)例變量和函數(shù)、原型和原型鏈的基本概念,需要的朋友可以參考下

javascript中的每個(gè)對(duì)象都有一個(gè)內(nèi)置的屬性prototype，Javascript中對(duì)象的prototype屬性的解釋是：返回對(duì)象類(lèi)型原型的引用。意思是是prototype屬性保存著對(duì)另一個(gè)JavaScript對(duì)象的引用，這個(gè)對(duì)象作為當(dāng)前對(duì)象的父對(duì)象。

復(fù)制代碼代碼如下:

A.prototype = new B();

理解prototype不應(yīng)把它和繼承混淆。A的prototype為B的一個(gè)實(shí)例，可以理解A將B中的方法和屬性全部克隆了一遍。A能使用B的方法和屬性。這里強(qiáng)調(diào)的是克隆而不是繼承。可以出現(xiàn)這種情況：A的prototype是B的實(shí)例，同時(shí)B的prototype也是A的實(shí)例。

繼續(xù)看下面的分析：

私有變量和函數(shù)

在函數(shù)內(nèi)部定義的變量和函數(shù)，如果不對(duì)外提供接口，外部是無(wú)法訪問(wèn)到的，也就是該函數(shù)的私有的變量和函數(shù)。

復(fù)制代碼代碼如下:

}
}
</script>

這樣在函數(shù)對(duì)象Box外部無(wú)法訪問(wèn)變量color和fn，他們就變成私有的了：

復(fù)制代碼代碼如下:

var obj = new Box();

    alert(obj.color);//彈出 undefined

    alert(obj.fn);//同上

靜態(tài)變量和函數(shù)

當(dāng)定義一個(gè)函數(shù)后通過(guò)點(diǎn)號(hào) “.”為其添加的屬性和函數(shù)，通過(guò)對(duì)象本身仍然可以訪問(wèn)得到，但是其實(shí)例卻訪問(wèn)不到，這樣的變量和函數(shù)分別被稱(chēng)為靜態(tài)變量和靜態(tài)函數(shù)。

復(fù)制代碼代碼如下:

    Obj.num = 72;//靜態(tài)變量
    Obj.fn = function() //靜態(tài)函數(shù)
    {

}

alert(Obj.num);//72
alert(typeof Obj.fn)//function

    var t = new Obj();
    alert(t.name);//undefined
    alert(typeof t.fn);//undefined
</script>

實(shí)例變量和函數(shù)

在面向?qū)ο缶幊讨谐艘恍?kù)函數(shù)我們還是希望在對(duì)象定義的時(shí)候同時(shí)定義一些屬性和方法，實(shí)例化后可以訪問(wèn)，js也能做到這樣

復(fù)制代碼代碼如下:

}
}

console.log(typeof Box.a); //undefined
console.log(typeof Box.fn); //undefined

            var box=new Box();
            console.log(typeof box.a); //object
            console.log(typeof box.fn); //function
</script>

為實(shí)例變量和方法添加新的方法和屬性

復(fù)制代碼代碼如下:

}
}

            var box1=new Box();
            box1.a.push(1);
            box1.fn={};
            console.log(box1.a); //[1]
            console.log(typeof box1.fn); //object

            var box2=new Box();
            console.log(box2.a); //[]
            console.log(typeof box2.fn); //function
</script>

在box1中修改了a和fn，而在box2中沒(méi)有改變，由于數(shù)組和函數(shù)都是對(duì)象，是引用類(lèi)型，這就說(shuō)明box1中的屬性和方法與box2中的屬性與方法雖然同名但卻不是一個(gè)引用，而是對(duì)Box對(duì)象定義的屬性和方法的一個(gè)復(fù)制。

這個(gè)對(duì)屬性來(lái)說(shuō)沒(méi)有什么問(wèn)題，但是對(duì)于方法來(lái)說(shuō)問(wèn)題就很大了，因?yàn)榉椒ǘ际窃谧鐾耆粯拥墓δ埽菂s又兩份復(fù)制，如果一個(gè)函數(shù)對(duì)象有上千和實(shí)例方法，那么它的每個(gè)實(shí)例都要保持一份上千個(gè)方法的復(fù)制，這顯然是不科學(xué)的，這可腫么辦呢，prototype應(yīng)運(yùn)而生。

基本概念

我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象，這個(gè)對(duì)象的用途是包含可以由特定類(lèi)型的所有實(shí)例共享的屬性和方法。那么，prototype就是通過(guò)調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。

使用原型的好處是可以讓對(duì)象實(shí)例共享它所包含的屬性和方法。也就是說(shuō)，不必在構(gòu)造函數(shù)中添加定義對(duì)象信息，而是可以直接將這些信息添加到原型中。使用構(gòu)造函數(shù)的主要問(wèn)題就是每個(gè)方法都要在每個(gè)實(shí)例中創(chuàng)建一遍。

在JavaScript中,一共有兩種類(lèi)型的值,原始值和對(duì)象值。每個(gè)對(duì)象都有一個(gè)內(nèi)部屬性 prototype ,我們通常稱(chēng)之為原型。原型的值可以是一個(gè)對(duì)象,也可以是null。如果它的值是一個(gè)對(duì)象，則這個(gè)對(duì)象也一定有自己的原型。這樣就形成了一條線性的鏈，我們稱(chēng)之為原型鏈。

含義

函數(shù)可以用來(lái)作為構(gòu)造函數(shù)來(lái)使用。另外只有函數(shù)才有prototype屬性并且可以訪問(wèn)到，但是對(duì)象實(shí)例不具有該屬性，只有一個(gè)內(nèi)部的不可訪問(wèn)的__proto__屬性。__proto__是對(duì)象中一個(gè)指向相關(guān)原型的神秘鏈接。按照標(biāo)準(zhǔn)，__proto__是不對(duì)外公開(kāi)的，也就是說(shuō)是個(gè)私有屬性，但是Firefox的引擎將他暴露了出來(lái)成為了一個(gè)共有的屬性，我們可以對(duì)外訪問(wèn)和設(shè)置。

復(fù)制代碼代碼如下:

var Bro = new Browser();
Bro.run();
</script>

當(dāng)我們調(diào)用Bro.run()方法時(shí)，由于Bro中沒(méi)有這個(gè)方法，所以，他就會(huì)去他的__proto__中去找，也就是Browser.prototype，所以最終執(zhí)行了該run()方法。（在這里，函數(shù)首字母大寫(xiě)的都代表構(gòu)造函數(shù)，以用來(lái)區(qū)分普通函數(shù)）

當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例的時(shí)候，實(shí)例內(nèi)部將包含一個(gè)內(nèi)部指針（__proto__）指向構(gòu)造函數(shù)的prototype，這個(gè)連接存在于實(shí)例和構(gòu)造函數(shù)的prototype之間，而不是實(shí)例與構(gòu)造函數(shù)之間。

復(fù)制代碼代碼如下:

            Person.prototype.printName=function() //原型對(duì)象
            {
                alert(this.name);
            }

            var person1=new Person('Byron');//實(shí)例化對(duì)象
            console.log(person1.__proto__);//Person
            console.log(person1.constructor);//自己試試看會(huì)是什么吧
            console.log(Person.prototype);//指向原型對(duì)象Person
            var person2=new Person('Frank');
</script>

Person的實(shí)例person1中包含了name屬性，同時(shí)自動(dòng)生成一個(gè)__proto__屬性，該屬性指向Person的prototype，可以訪問(wèn)到prototype內(nèi)定義的printName方法，大概就是這個(gè)樣子的:

每個(gè)JavaScript函數(shù)都有prototype屬性，這個(gè)屬性引用了一個(gè)對(duì)象，這個(gè)對(duì)象就是原型對(duì)象。原型對(duì)象初始化的時(shí)候是空的，我們可以在里面自定義任何屬性和方法，這些方法和屬性都將被該構(gòu)造函數(shù)所創(chuàng)建的對(duì)象繼承。

那么，現(xiàn)在問(wèn)題來(lái)了。構(gòu)造函數(shù)、實(shí)例和原型對(duì)象三者之間有什么關(guān)系呢？

構(gòu)造函數(shù)、實(shí)例和原型對(duì)象的區(qū)別

實(shí)例就是通過(guò)構(gòu)造函數(shù)創(chuàng)建的。實(shí)例一創(chuàng)造出來(lái)就具有constructor屬性（指向構(gòu)造函數(shù)）和__proto__屬性（指向原型對(duì)象），

構(gòu)造函數(shù)中有一個(gè)prototype屬性，這個(gè)屬性是一個(gè)指針，指向它的原型對(duì)象。

原型對(duì)象內(nèi)部也有一個(gè)指針（constructor屬性）指向構(gòu)造函數(shù):Person.prototype.constructor = Person;

實(shí)例可以訪問(wèn)原型對(duì)象上定義的屬性和方法。

在這里person1和person2就是實(shí)例，prototype是他們的原型對(duì)象。

再舉個(gè)栗子：

復(fù)制代碼代碼如下:

    Animal.prototype.behavior = function() //給基類(lèi)構(gòu)造函數(shù)的prototype添加behavior方法
    {
        alert("this is a "+this.name);
    }

var Dog = new Animal("dog");//創(chuàng)建Dog對(duì)象
var Cat = new Animal("cat");//創(chuàng)建Cat對(duì)象

Dog.behavior();//通過(guò)Dog對(duì)象直接調(diào)用behavior方法
Cat.behavior();//output "this is a cat"

alert(Dog.behavior==Cat.behavior);//output true;
</script>

可以從程序運(yùn)行結(jié)果看出，構(gòu)造函數(shù)的prototype上定義的方法確實(shí)可以通過(guò)對(duì)象直接調(diào)用到，而且代碼是共享的。（可以試一下將Animal.prototype.behavior 中的prototype屬性去掉，看看還能不能運(yùn)行。）在這里，prototype屬性指向Animal對(duì)象。

數(shù)組對(duì)象實(shí)例

再看個(gè)數(shù)組對(duì)象的實(shí)例。當(dāng)我們創(chuàng)建出array1這個(gè)對(duì)象的時(shí)候，array1實(shí)際在Javascript引擎中的對(duì)象模型如下：

復(fù)制代碼代碼如下:

var array1 = [1,2,3];

array1對(duì)象具有一個(gè)length屬性值為3，但是我們可以通過(guò)如下的方法來(lái)為array1增加元素：

復(fù)制代碼代碼如下:

array1.push(4);

push這個(gè)方法來(lái)自于array1的__proto__成員指向?qū)ο蟮囊粋€(gè)方法(Array.prototye.push())。正是因?yàn)樗械臄?shù)組對(duì)象（通過(guò)[]來(lái)創(chuàng)建的）都包含有一個(gè)指向同一個(gè)具有push,reverse等方法對(duì)象(Array.prototype)的__proto__成員，才使得這些數(shù)組對(duì)象可以使用push,reverse等方法。

函數(shù)對(duì)象實(shí)例

復(fù)制代碼代碼如下:

function Base() {  

    this.id = "base" 

}   

復(fù)制代碼代碼如下:

var obj = new Base();

這樣代碼的結(jié)果是什么，我們?cè)贘avascript引擎中看到的對(duì)象模型是：

new操作符具體干了什么呢?其實(shí)很簡(jiǎn)單，就干了三件事情。

復(fù)制代碼代碼如下:

var obj  = {};  

obj.__proto__ = Base.prototype;  

Base.call(obj); 

原型鏈

原型鏈：當(dāng)從一個(gè)對(duì)象那里調(diào)取屬性或方法時(shí)，如果該對(duì)象自身不存在這樣的屬性或方法，就會(huì)去自己關(guān)聯(lián)的prototype對(duì)象那里尋找，如果prototype沒(méi)有，就會(huì)去prototype關(guān)聯(lián)的前輩prototype那里尋找，如果再?zèng)]有則繼續(xù)查找Prototype.Prototype引用的對(duì)象，依次類(lèi)推，直到Prototype.….Prototype為undefined（Object的Prototype就是undefined）從而形成了所謂的“原型鏈”。

復(fù)制代碼代碼如下:

TwoShape.prototype = new Shape();
Triangle.prototype = new TwoShape();
</script>

這里，用構(gòu)造器Shape()新建了一個(gè)實(shí)體，然后用它去覆蓋該對(duì)象的原型。

復(fù)制代碼代碼如下:

TwoShape.prototype = new Shape();
Triangle.prototype = new TwoShape();

TwoShape.prototype.constructor = TwoShape;
Triangle.prototype.constructor = Triangle;

    var my = new Triangle(5,10);
    my.getArea();
    my.toString();//Triangle
    my.constructor;//Triangle(side,height)
</script>

原型繼承

原型繼承：在原型鏈的末端，就是Object構(gòu)造函數(shù)prototype屬性指向的那個(gè)原型對(duì)象。這個(gè)原型對(duì)象是所有對(duì)象的祖先，這個(gè)老祖宗實(shí)現(xiàn)了諸如toString等所有對(duì)象天生就該具有的方法。其他內(nèi)置構(gòu)造函數(shù)，如Function，Boolean，String，Date和RegExp等的prototype都是從這個(gè)老祖宗傳承下來(lái)的，但他們各自又定義了自身的屬性和方法，從而他們的子孫就表現(xiàn)出各自宗族的那些特征。

ECMAScript中，實(shí)現(xiàn)繼承的方法就是依靠原型鏈實(shí)現(xiàn)的。

復(fù)制代碼代碼如下:

    function Tree(){          //繼承的函數(shù)叫做子類(lèi)型（子類(lèi)，派生類(lèi)）
        this.age = 300;
    }
    //通過(guò)原型鏈繼承，賦值給子類(lèi)型的原型屬性
    //new Box()會(huì)將box構(gòu)造里的信息和原型里的信息都交給Tree
    Tree.prototype = new Box();//Tree繼承了Box,通過(guò)原型，形成鏈條

var tree = new Tree();
alert(tree.name);//彈出 Jack
</script>

原型鏈的問(wèn)題：原型鏈雖然很強(qiáng)大，可以用它來(lái)實(shí)現(xiàn)繼承，但它也存在一些問(wèn)題。其中最主要的問(wèn)題來(lái)自包含引用類(lèi)型的值原型。包含引用類(lèi)型的原型屬性會(huì)被所有實(shí)例共享；而這也正是為什么要在構(gòu)造函數(shù)中，而不是在原型對(duì)象中定義屬性的原因。在通過(guò)原型來(lái)實(shí)現(xiàn)繼承時(shí)，原型實(shí)際上回變成另一個(gè)類(lèi)型的實(shí)例。于是，原先的實(shí)例屬性也就變成了原型的屬性。

在創(chuàng)建子類(lèi)型的實(shí)例時(shí)，不能向超類(lèi)型的構(gòu)造函數(shù)中傳遞參數(shù)。實(shí)際上，應(yīng)該說(shuō)是沒(méi)有辦法在不影響所有對(duì)象實(shí)例的情況下，給超類(lèi)型的構(gòu)造函數(shù)傳遞參數(shù)。再加上剛剛討論的由于原型中包含引用類(lèi)型值所帶來(lái)的問(wèn)題，實(shí)踐中很少會(huì)單獨(dú)使用原型鏈。

再舉個(gè)栗子：

復(fù)制代碼代碼如下:

    Person.prototype.company = "Microsoft";//設(shè)置原型的屬性
    Person.prototype.SayHello = function() //原型的方法
    {
        alert("Hello,I'm "+ this.name+ " of " + this.company);
    };

var BillGates = new Person("BillGates");//創(chuàng)建person對(duì)象
BillGates.SayHello();//繼承了原型的內(nèi)容，輸出"Hello,I'm BillGates of Microsoft"

    var Jobs = new Person("Jobs");
    Jobs.company = "Apple";//設(shè)置自己的company屬性，掩蓋了原型的company屬性
    Jobs.SayHello = function()
    {
        alert("Hi,"+this.name + " like " + this.company);
    };
    Jobs.SayHello();//自己覆蓋的屬性和方法，輸出"Hi,Jobs like Apple"
    BillGates.SayHello();//Jobs的覆蓋沒(méi)有影響原型，BillGates還是照樣輸出
</script>

看下面一個(gè)原型鏈例子：

復(fù)制代碼代碼如下:

}
};

function Hi(){

    };
    //設(shè)置Hi的prototype屬性為Year的實(shí)例對(duì)象
    Hi.prototype = new Year();
    Hi.prototype.year = 'Hello World';

Hi.prototype.constructor = Hi;

var test = new Hi();//創(chuàng)建一個(gè)Hi的新實(shí)例

    //原型鏈
    test [Hi的實(shí)例]
        Hi.prototype [Year的實(shí)例]
            {year:'Hello World'}
            Year.prototype
                {method:……};
                object.prototype
                    {toString:...};

</script>

從上面例子中，test對(duì)象從Hi.prototype和Year.prototype中繼承下來(lái)；因此他能訪問(wèn)Year的原型方法method，同時(shí)他能訪問(wèn)實(shí)例屬性value

__ptoto__屬性

__ptoto__屬性（IE瀏覽器不支持）是實(shí)例指向原型對(duì)象的一個(gè)指針，它的作用就是指向構(gòu)造函數(shù)的原型屬性constructor，通過(guò)這兩個(gè)屬性，就可以訪問(wèn)原型里的屬性和方法了。

Javascript中的對(duì)象實(shí)例本質(zhì)上是由一系列的屬性組成的，在這些屬性中，有一個(gè)內(nèi)部的不可見(jiàn)的特殊屬性——__proto__，該屬性的值指向該對(duì)象實(shí)例的原型，一個(gè)對(duì)象實(shí)例只擁有一個(gè)唯一的原型。

復(fù)制代碼代碼如下:

    var box1 = new Box();
    var box2 = new Box();
    alert(box1.constructor);//構(gòu)造屬性，可以獲取構(gòu)造函數(shù)本身，
                            //作用是被原型指針定位，然后得到構(gòu)造函數(shù)本身
</script>

__proto__屬性和prototype屬性的區(qū)別

prototype是function對(duì)象中專(zhuān)有的屬性。
__proto__是普通對(duì)象的隱式屬性，在new的時(shí)候，會(huì)指向prototype所指的對(duì)象；
__ptoto__實(shí)際上是某個(gè)實(shí)體對(duì)象的屬性，而prototype則是屬于構(gòu)造函數(shù)的屬性。__ptoto__只能在學(xué)習(xí)或調(diào)試的環(huán)境下使用。

原型模式的執(zhí)行流程

1.先查找構(gòu)造函數(shù)實(shí)例里的屬性或方法，如果有，就立即返回。
2.如果構(gòu)造函數(shù)的實(shí)例沒(méi)有，就去它的原型對(duì)象里找，如果有，就立即返回

原型對(duì)象的

復(fù)制代碼代碼如下:

    var box1 = new Box();
    alert(box1.name);//trigkit4,原型里的值
    box1.name = "Lee";
    alert(box1.name);//Lee,就進(jìn)原則

var box2 = new Box();
alert(box2.name);//trigkit4,原型的值，沒(méi)有被box1修改
</script>

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

復(fù)制代碼代碼如下:

    Box.prototype.name = "trigkit4";//原型屬性
    Box.prototype.age = "21";
    Box.prototype.run = function()//原型方法
    {
            return this.name + this.age + 'studying';
    }

    var box1 = new Box();
    alert(box1.name);//Bill,原型里的值
    box1.name = "Lee";
    alert(box1.name);//Lee,就進(jìn)原則
</script>

綜上，整理一下：

復(fù)制代碼代碼如下:

    Person.prototype.name = "trigkit4";
    Person.prototype.say = function(){
        alert("Hi");
    }

var p1 = new Person();//prototype是p1和p2的原型對(duì)象
var p2 = new Person();//p2為實(shí)例化對(duì)象，其內(nèi)部有一個(gè)__proto__屬性，指向Person的prototype

    console.log(p1.prototype);//undefined,這個(gè)屬性是一個(gè)對(duì)象，訪問(wèn)不到
    console.log(Person.prototype);//Person
    console.log(Person.prototype.constructor);//原型對(duì)象內(nèi)部也有一個(gè)指針（constructor屬性）指向構(gòu)造函數(shù)
    console.log(p1.__proto__);//這個(gè)屬性是一個(gè)指針指向prototype原型對(duì)象
    p1.say();//實(shí)例可以訪問(wèn)到在原型對(duì)象上定義的屬性和方法

</script>

工廠模式

復(fù)制代碼代碼如下:

 function createObject(name,age){

    var obj = new Object();

    obj.name = name;

    obj.age = age;

    return obj;

}

工廠模式解決了實(shí)例化對(duì)象大量重復(fù)的問(wèn)題，但還有一個(gè)問(wèn)題，那就是根本無(wú)法搞清楚他們到底是哪個(gè)對(duì)象的實(shí)例。
使用構(gòu)造函數(shù)的方法，既解決了重復(fù)實(shí)例化的問(wèn)題，又解決了對(duì)象識(shí)別的問(wèn)題。

使用構(gòu)造函數(shù)的方法和工廠模式的不同之處在于：

1.構(gòu)造函數(shù)方法沒(méi)有顯示的創(chuàng)建對(duì)象(new Object());
2.直接將屬性和方法賦值給this對(duì)象
3.沒(méi)有return 語(yǔ)句

當(dāng)使用了構(gòu)造函數(shù)，并且new 構(gòu)造函數(shù)()，那么就在后臺(tái)執(zhí)行了new Object()；
函數(shù)體內(nèi)的this代表了new Object()出來(lái)的對(duì)象

1.判斷屬性是在構(gòu)造函數(shù)的實(shí)例里，還是在原型里，可以使用`hasOwnProperty()`函數(shù)
2.字面量創(chuàng)建的方式使用constructor屬性不會(huì)指向?qū)嵗鴷?huì)指向Object，構(gòu)造函數(shù)創(chuàng)建的方式則相反
為什么指向Object？因?yàn)锽ox.prototype = {};這種寫(xiě)法其實(shí)就是創(chuàng)建了一個(gè)新對(duì)象。
而每創(chuàng)建一個(gè)函數(shù)，就會(huì)同時(shí)創(chuàng)建它的prototype，這個(gè)對(duì)象也會(huì)自動(dòng)獲取constructor屬性
3.如果是實(shí)例方法，不同的實(shí)例化，他們的方法地址是不一樣的，是唯一的
4.如果是原型方法，那么他們的地址的共享的

您可能感興趣的文章: