js構造函數和原型,理解js的prototype原型對象

 2023-11-22 阅读 21 评论 0

摘要:我們創建的每一個函數都有一個prototype(原型)屬性。這個屬性是一個指針,指向一個對象,而這個對象的用途是包括能夠由特定類型的全部實例共享的屬性和方法。假設依照字面意思來理解,那么prototype就是通過調用構造函數而創建的那個對象實

我們創建的每一個函數都有一個prototype(原型)屬性。這個屬性是一個指針,指向一個對象,而這個對象的用途是包括能夠由特定類型的全部實例共享的屬性和方法。假設依照字面意思來理解,那么prototype就是通過調用構造函數而創建的那個對象實例的原型對象。使用原受對象的優點是能夠讓全部對象實例共享它所包括的屬性和方法。換句話說,不必在構造函數中定義對象實例的信息,而是能夠將這些信息直接加入到原型對象中,如以下的樣例所看到的。

    function Person(){}Person.prototype.name = 'mychirs';Person.prototype.age = 29;Person.prototype.job = 'Software Engineer';Person.prototype.sayName = function(){alert(this.name);};var person1 = new Person();person1.sayName();//'mychirs'var person2 = new Person();person2.sayName();//'mychirs'alert(person1.sayName == person2.sayName);//true

js構造函數和原型,

在此。我們將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;換句話說,它們與構造函數沒有直接的關系。此外。要格外注意的是。盡管這兩個實例都不包括屬性和方法,但我們卻能夠調用personl.sayName()。這是通過查找對象屬性的過程來實現的。


? ? 盡管在全部實現中都無法訪問到[[Prototype]:,但能夠通過isProcotypeOf()方法來確定對象之間是否存在這樣的關系。從本質上講。假設[[ Prototype]]指向調用isPrototypeOf()方法的對象[Person.prototype).那么這種方法就返回true。例如以下所看到的:

js對象和函數,

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

這里,我們用原型對象的isPrototypeOf()方法測試了personl和person2 0由于它們內部都有一個指向Person.prototype的指針。因此都返回了true。


ECMAScript 5添加了一個新方法。叫Object.getPrototypeOf(),在全部支持的實現中,這種方法返回[[PrototypeJ]]的值。比如:

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、
每當代碼讀取某個對象的某個屬性時,都會運行一次搜索,目標是具有給定名字的屬性。搜索首先從對象實例本身開始。

假設在實例中找到了具有給定名字的屬性,則返回該屬性的值。假設沒有找到。則繼續搜索指針指向的原型對象,在原型對象中查找具有給定名字的屬性。

假設在原型對象中找到了這個屬性,則返回該屬性的值。也就是說,在我們調用personl. sayName《)的時候,會先后運行兩次搜索。

首先,解析器會同:“實例personl有sayName屬性嗎?”答:“沒有。”然后,它繼續搜索,再問:“personl的原捌有sayName屬性嗎?”答:“有。

”于是,它就讀取那個保存在原型對象中的函數。當我們調用person2.sayName()時,將會重現同樣的搜索過程,得到同樣的結果。

而這正是多個對象實例共享原型所保存的屬性和方法的基本原理。

js對象方法。


版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/5/184585.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息