JavaScript原型對(duì)象

Lorry_Lu 發(fā)布于2019-08-21 10:39 / 833人閱讀

摘要：在默認(rèn)情況下，所有原型對(duì)象都會(huì)自動(dòng)獲得一個(gè)構(gòu)造函數(shù)屬性，這個(gè)屬性包含一個(gè)指向?qū)傩运诤瘮?shù)的指針。不過(guò)，要明確的真正重要的一點(diǎn)就是，這個(gè)連接存在于實(shí)例與構(gòu)造函數(shù)的原型對(duì)象之間，而不是存在于實(shí)例與構(gòu)造函數(shù)之間。

本篇文章主要講JavaScript對(duì)象中的原型模式：

1、理解原型對(duì)象

無(wú)論什么時(shí)候，只要?jiǎng)?chuàng)建了一個(gè)新函數(shù)，就會(huì)根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。在默認(rèn)情況下，所有原型對(duì)象都會(huì)自動(dòng)獲得一個(gè)constructor（構(gòu)造函數(shù)）屬性，這個(gè)屬性包含一個(gè)指向prototype屬性所在函數(shù)的指針。
創(chuàng)建了自定義的構(gòu)造函數(shù)之后，其原型對(duì)象默認(rèn)只會(huì)取得constructor屬性，至于其他方法，則都是從object繼承而來(lái)的。當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新實(shí)例后，該實(shí)例的內(nèi)部將包含一個(gè)指針（內(nèi)部屬性），指向構(gòu)造函數(shù)的源性對(duì)象。ECMA-262第5版中管這個(gè)指針叫[[prototype]]。雖然在腳本中沒(méi)有標(biāo)準(zhǔn)的方式訪問(wèn)[[prototype]]，但FireFox、Safari和chrome在每個(gè)對(duì)象上都支持一個(gè)屬性：proto；而在其他實(shí)現(xiàn)中，這個(gè)屬性對(duì)腳本則是完全不可見(jiàn)的。不過(guò)，要明確的真正重要的一點(diǎn)就是，這個(gè)連接存在于實(shí)例與構(gòu)造函數(shù)的原型對(duì)象之間，而不是存在于實(shí)例與構(gòu)造函數(shù)之間。

如下一段代碼：

function Person(){

    }

    Person.prototype.name="Jessica";
    Person.prototype.age=25;
    Person.prototype.job="Web software Engineer";
    Person.prototype.sayName=function(){
        alert(this.name);
    }
    var person1=new Person();
    person1.sayName();  //"Jessiva"

    var person2=new Person();
    person2.sayName();   //"Jessiva"

    alert(person1.sayName==person2.sayName); //true

下圖展示了這段代碼的各個(gè)對(duì)象之間關(guān)系：

雖然在所有的實(shí)現(xiàn)中都無(wú)法訪問(wèn)到[[prototype]]，但可以通過(guò)isPrototypeOf()方法來(lái)確定對(duì)象之間是否存在這種關(guān)系。從本質(zhì)上講，如果[[prototype]]指向調(diào)用isPrototypeOf()方法的對(duì)象（Person.prototype）,那么這個(gè)方法就返回true，如下所示：

alert(Person.prototype.isPrototypeOf(person1));  //true
alert(Person.prototype.isPrototypeOf(person2));  //true

在ECMAScript5增加了一個(gè)新方法，叫object.getPrototypeOf(),在所有支持的實(shí)現(xiàn)中，這個(gè)方法返回[[prototype]]的值。例如：

alert(Object.getPrototypeOf(person1)==Person.prototype); //true
alert(Object.getPrototypeOf(person1).name);  //"Jessica"

使用Object.getPrototypeOf()可以方便的取得一個(gè)對(duì)象的原型，而這在利用原型實(shí)現(xiàn)繼承（稍后會(huì)有文章更新）的情況下是非常重要的。

雖然可以通過(guò)對(duì)象實(shí)例訪問(wèn)保存在原型中的值，但卻不恩能夠通過(guò)對(duì)象實(shí)例重寫原型中的值，如果我們?cè)賹?shí)例中添加了一個(gè)屬性，而該屬性與實(shí)例原型中的一個(gè)屬性同名，那我們就在實(shí)例中創(chuàng)建該屬性，該屬性將會(huì)屏蔽原型中的那個(gè)屬性。來(lái)看下面的例子：

function Person(){

    }

    Person.prototype.name="Jessica";
    Person.prototype.age=25;
    Person.prototype.job="Web software Engineer";
    Person.prototype.sayName=function(){
        alert(this.name);
    }
    var person1=new Person();
    var person2=new Person();
    
    person1.name="Greg";
    alert(person1.name); //"Greg"--來(lái)自實(shí)例
    alert(person2.name); //"Jessica"--來(lái)自原型

使用delete操作符則可以完全刪除實(shí)例屬性，從而讓我們能夠重新訪問(wèn)原型中的屬性。

使用hasOwnProperty()方法則可以檢測(cè)一個(gè)屬性是存在于實(shí)例中還是存在于原型中。這個(gè)方法（繼承于Object）只在給定屬性存在于對(duì)象實(shí)例中，才會(huì)返回true。