理解js的 prototype原型物件

2021-08-19 04:33:02 字數 3458 閱讀 2838

在我看過的關於原型的文章中,這篇是說的最好的!各位盡情享用

我們建立的每個函式都有乙個prototype(原型)屬性,這個屬性是乙個指標,指向乙個物件,而這個物件的用途是包含可以由特定型別的所有例項共享的屬性和方法。如果按照字面意思來理解,那麼prototype就是通過呼叫建構函式而建立的那個物件例項的原型物件。使用原受物件的好處是可以讓所有物件例項共享它所包含的屬性和方法。換句話說,不必在建構函式中定義物件例項的資訊,而是可以將這些資訊直接新增到原型物件中,如下面的例子所示。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function person(){}

person.prototype.name ='mychirs';

person.prototype.age =29;

person.prototype.job ='software engineer';

person.prototype.sayname = function();

var person1 =newperson();

person1.sayname();//'mychirs'

var person2 =newperson();

person2.sayname();//'mychirs'

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

在此,我們將sayname()方法和所有屬性直接新增到了person的prototype屬性中,建構函式變成了空函式。即使如此,也仍然可以通過呼叫建構函式來建立新物件,而且新物件還會具有相同的屬性和方法。但與建構函式模式不同的是,新物件的這些屬性和方法是由所有例項共享的。換句話說.personl和person2訪問的都是同一組屬性和同乙個sayname()函式。要理解原型模式的t作原理,必須先理解ecmascript巾原型物件的性質。

理解原型物件

無論什麼時候,只要建立了乙個新函式,就會根據一組特定的規則為該函式建立乙個prototype屬性,這個屬性指向函式的原型物件。在預設情況下,所有原型物件都會自動獲得乙個constructor(建構函式)屬性,這個屬性包含乙個指向prot otype屬性所在函式的指標。就拿前面的例子來說,person.prototype. constructor措向person。而通過這個建構函式,我們還可繼續為原型物件新增其他屬性和方法。

建立了自定義的建構函式之後,其原型物件預設只會取得constructor屬性;至於其他方法,則都是從obj ect繼承而來的。當呼叫建構函式建立乙個新例項後,該例項的內部將包含—個指標(內部屬性),指向建構函式的原型物件。ecma-262第5版中管這個指標叫[[prototype】]。雖然在指令碼中沒有標準的方式訪問【[ prototype]],但firefox、safari和chrome在每個物件上都支援乙個屬性—proto_;而在其他實現中,這個屬性對指令碼則是完全不可見的。不過,要明確的真正重要的一點就是,這個連線存在於例項與建構函式的原型物件之間,而不是存在於例項與建構函式之間。

以前面使用person建構函式和person.prototype建立例項的**為例,圖6-1展示了各個物件之間的關係。

上圖展示rr person建構函式、person的原型屬性以及person現有的兩個例項之間的關係。在此,person *prototype指向了原型物件,而person.prototype.constructor叉指回了person。原型物件中除了包含cons t,ruct or屬性之外,還包括後來新增的其他屬性。person的每個例項personl和person2都包含乙個內部屬性,該屬性僅僅指向了person.prot otype;換句話說,它們與建構函式沒有直接的關係。此外,要格外注意的是,雖然這兩個例項都不包含屬性和方法,但我們卻

雖然在所有實現中都無法訪問到[[prototype]:,但可以通過isprocotypeof()方法來確定物件之間是否存在這種關係。從本質上講,如果[[ prototype]]指向呼叫isprototypeof()方法的物件[person.prototype).那麼這個方法就返回true,如下所示:

1

2

alert(person.prototype.isprototypeof(personl));//true

alert(person.prototype.isprototypeof(person2));//true

這裡,我們用原型物件的isprototypeof()方法測試了personl和person2 0因為它們內部都有乙個指向person.prototype的指標,因此都返回了true。

ecmascript 5增加了乙個新方法,叫object.getprototypeof(),在所有支援的實現中,這個方法返回[[prototypej]]的值。例如:

1

2

alert(object.get prototypeof(personl) == person.prototype);//true

alert(object.get prototypeof(personl).name );//'nicholas'

這裡的第一行**只是確定object.getprototypeof()返回的物件實際就是這個物件的原型。第二行**取得了原型物件中name屬性的值,也就是'nicholas'。使用object.getprototypeof()可以方便地取得乙個物件的原型,而這在利用原型實現繼承(本章稍後會討論)的情況下是非常重要的。支援這個方法的瀏覽器有ie9+、firefox 3.5+、safari 5+、opera 12+和chrome。

簡單理解js的prototype屬性

prototype屬性是您有能力向物件新增屬性和方法 先介紹乙個下面要用到的函式,json.stringify value 這個函式的作用是 把傳入的引數value 物件或者陣列 變成字串,它有三個引數,第乙個引數是必須的,其餘的兩個引數可填可不填。var ob 超級簡單的空物件 alert jso...

prototype原型的理解

function a a.prototype.bat function function b 上面這種寫法,b繼承了a的方法與屬性 如果b繼續增加方法,a不會增加 function a a.prototype.bat function function b b.prototype a.prototy...

關於prototype屬性的理解

眾所周知,prototype是乙個屬性物件,只要建立乙個新函式,就會根據特定的規則為該函式建立乙個prototype屬性,這個屬性指向函式的原型物件。在預設情況下,所有原型物件都會自動獲得乙個constructor 建構函式 屬性,這個屬性包含乙個指向prototype屬性所在函式的指標。需要注意的...