摘要:返回一個(gè)布爾值,指示指定的對(duì)象是否位于調(diào)用此方法的對(duì)象的原型鏈中。
JavaScript - Prototype
JavaScript是一門動(dòng)態(tài)語言, 你可以在任何時(shí)候向?qū)ο笊咸砑訉傩?如下
function Student() { this.name = "LeBron James"; this.gender = "Male"; } var studObj1 = new Student(); studObj1.age = 15; alert(studObj1.age); // 15 var studObj2 = new Student(); alert(studObj2.age); // undefined
正如上面的實(shí)例, age 屬性附加在 studObj1 實(shí)例上. 然而 studObj2 實(shí)例沒有這個(gè)屬性, 因?yàn)?age 屬性只在 studObj1 實(shí)例上定義了.
那么, 如果想在后期添加一個(gè)屬性且能被所有的實(shí)例所共享, 該怎么辦? 答案這就今天主角 Prototype.
Prototype 是一個(gè)對(duì)象, 默認(rèn)情況下與JavaScript中的任何一個(gè)函數(shù)或?qū)ο笥嘘P(guān), 只是唯一區(qū)別在于函數(shù)的prototype 屬性是可訪問和可修改的,而對(duì)象的prototype屬性是不可見的.
默認(rèn)情況下任何一個(gè)函數(shù)包含 Prototype 對(duì)象, 如下圖:
prototype 對(duì)象是一種特殊類型的可枚舉對(duì)象, 可以將需要附加屬添加到其上,這些屬性將在其構(gòu)造函數(shù)的所有實(shí)例之間共享。
因此, 把上面的示例中使用函數(shù)的 prototype 來添加屬性,以便于所有對(duì)象中都可以訪問到, 如下:
function Student() { this.name = "LeBron James"; this.gender = "M"; } Student.prototype.age = 15; var studObj1 = new Student(); alert(studObj1.age); // 15 var studObj2 = new Student(); alert(studObj2.age); // 15
使用 字面量 或 通過 new關(guān)鍵字和構(gòu)造函數(shù) 的方式創(chuàng)建的每一個(gè)對(duì)象都包含 __proto__ 屬性, 該屬性指向創(chuàng)建此對(duì)象的函數(shù)的 原型對(duì)象.
你可以在谷歌和火狐開發(fā)者調(diào)試工具中查看該屬性(__proto__) , 根據(jù)下面的示例:
function Student() { this.name = "LeBron James"; this.gender = "M"; } var studObj = new Student(); console.log(Student.prototype); // object console.log(studObj.prototype); // undefined console.log(studObj.__proto__); // object console.log(typeof Student.prototype); // object console.log(typeof studObj.__proto__); // object console.log(Student.prototype === studObj.__proto__ ); // true
正如上面例子看到, 函數(shù)通過 [[函數(shù)名稱]].prototype 方式訪問到原型對(duì)象. 但是, 對(duì)象(實(shí)例)并沒有暴露出 prototype 屬性,而是使用 __proto__ 來訪問它.
Object 對(duì)象的原型前面提及到, 原型對(duì)象在對(duì)象中是不可見. 使用 Object.getPrototypeOf(obj) 方法來訪問實(shí)例的原型對(duì)象. (這也是推薦方式, __proto__ 并不是標(biāo)準(zhǔn)屬性, 在IE11以下其它瀏覽器中沒有實(shí)現(xiàn)).
function Student() { this.name = "LeBron James"; this.gender = "M"; } var studObj = new Student(); Student.prototype.sayHi= function(){ alert("Hi"); }; var studObj1 = new Student(); var proto = Object.getPrototypeOf(studObj1); // returns Student"s prototype object alert(proto.constructor); // returns Student function
Object 原型對(duì)象包含如下 屬性 和 方法
屬性 | 描述 |
---|---|
constructor | 返回創(chuàng)建該實(shí)例的構(gòu)造函數(shù) |
__proto__ | 指向創(chuàng)建該實(shí)例的構(gòu)造函數(shù)的原型對(duì)象. |
方法 | 描述 |
---|---|
hasOwnProperty() | 返回一個(gè)布爾值,指示對(duì)象是否包含指定的屬性作為該對(duì)象的直接屬性,而不是通過原型鏈繼承。 |
isPrototypeOf() | 返回一個(gè)布爾值,指示指定的對(duì)象是否位于調(diào)用此方法的對(duì)象的原型鏈中。 |
propertyIsEnumerable() | 返回一個(gè)布爾值,該布爾值指示指定的屬性是否可枚舉。 |
toLocaleString() | 返回本地格式的字符串. |
toString() | 返回對(duì)象字符串形式. |
valueOf() | 返回指定對(duì)象的原始值. |
Chrome 和 Firfox 將對(duì)象的原型表示為 __proto__, 而內(nèi)部引用為 [[Prototype]]. IE不支持,只有IE11包含它.
修改原型如上所述, 每個(gè)對(duì)象都能鏈接到函數(shù)的原型對(duì)象. 如果您更改了函數(shù)的原型, 則只有新對(duì)象將鏈接到更改后的原型. 所有其他現(xiàn)有對(duì)象仍然鏈接到舊的函數(shù)原型. 下面實(shí)例來演示這個(gè)場(chǎng)景:
function Student() { this.name = "LeBron James"; this.gender = "M"; } Student.prototype.age = 15; var studObj1 = new Student(); alert("studObj1.age = " + studObj1.age); // 15 var studObj2 = new Student(); alert("studObj2.age = " + studObj2.age); // 15 Student.prototype = { age : 20 }; var studObj3 = new Student(); alert("studObj3.age = " + studObj3.age); // 20 alert("studObj1.age = " + studObj1.age); // 15 alert("studObj2.age = " + studObj2.age); // 15使用原型
原型對(duì)象被JavaScript引擎用來做兩件事:
查找對(duì)象的屬性和方法
在JavaScript中實(shí)現(xiàn)繼承
function Student() { this.name = "LeBron James"; this.gender = "M"; } Student.prototype.sayHi = function(){ alert("Hi"); }; var studObj = new Student(); studObj.toString();
在上面的示例, toString() 方法在 Student 中沒有定義, 那么它是如何以及從哪里找到 toString() 的呢?
在這里,原型出現(xiàn)了. 首先, JavaScript 引擎檢查 studObj 是否存在 toString 方法?. 如果沒有找到,那么它使用 studObj 的 __proto__ 鏈接指向 Student函數(shù) 的 原型對(duì)象. 如果它仍然無法找到它那么它會(huì)在往上層并檢查 Object 函數(shù)的原型對(duì)象,因?yàn)樗袑?duì)象都是從 JavaScript 中的 Object 派生的,并查找 toString() 方法. 因此, 它在Object函數(shù)的原型對(duì)象中找到 toString() 方法,因此我們可以調(diào)用 studObj.toString().
查找方式,如下圖所示
上述就是原型基本知識(shí)點(diǎn)以及應(yīng)用.
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/105362.html
摘要:醞釀許久之后,筆者準(zhǔn)備接下來撰寫前端面試題系列文章,內(nèi)容涵蓋瀏覽器框架分鐘搞定常用基礎(chǔ)知識(shí)前端掘金基礎(chǔ)智商劃重點(diǎn)在實(shí)際開發(fā)中,已經(jīng)非常普及了。 這道題--致敬各位10年阿里的前端開發(fā) - 掘金很巧合,我在認(rèn)識(shí)了兩位同是10年工作經(jīng)驗(yàn)的阿里前端開發(fā)小伙伴,不但要向前輩學(xué)習(xí),我有時(shí)候還會(huì)選擇另一種方法逗逗他們,拿了網(wǎng)上一道經(jīng)典面試題,可能我連去阿里面試的機(jī)會(huì)都沒有,但是我感受到了一次面試1...
摘要:希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎,由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時(shí),老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒有網(wǎng)絡(luò)請(qǐng)求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址:Learning React.js is easier than you think 原文作...
摘要:忍者級(jí)別的函數(shù)操作對(duì)于什么是匿名函數(shù),這里就不做過多介紹了。我們需要知道的是,對(duì)于而言,匿名函數(shù)是一個(gè)很重要且具有邏輯性的特性。通常,匿名函數(shù)的使用情況是創(chuàng)建一個(gè)供以后使用的函數(shù)。 JS 中的遞歸 遞歸, 遞歸基礎(chǔ), 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加 這一次,徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制,如果...
摘要:前言月份開始出沒社區(qū),現(xiàn)在差不多月了,按照工作的說法,就是差不多過了三個(gè)月的試用期,準(zhǔn)備轉(zhuǎn)正了一般來說,差不多到了轉(zhuǎn)正的時(shí)候,會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū),現(xiàn)在差不多9月了,按照工作的說法,就是差不多過了三個(gè)月的試用期,準(zhǔn)備轉(zhuǎn)正了!一般來說,差不多到了轉(zhuǎn)正的時(shí)候,會(huì)進(jìn)行總結(jié)或者分享會(huì)議!那么今天我就...
閱讀 1970·2019-08-30 15:54
閱讀 3596·2019-08-29 13:07
閱讀 3123·2019-08-29 12:39
閱讀 1788·2019-08-26 12:13
閱讀 1547·2019-08-23 18:31
閱讀 2158·2019-08-23 18:05
閱讀 1843·2019-08-23 18:00
閱讀 1042·2019-08-23 17:15