理解JavaScript原型鏈
每一個(gè)JavaScript對(duì)象都和另一個(gè)對(duì)象相關(guān)聯(lián)，相關(guān)聯(lián)的這個(gè)對(duì)象就是我們所說(shuō)的“原型”。每一個(gè)對(duì)象都會(huì)從原型繼承屬性和方法。有一個(gè)特殊的對(duì)象沒(méi)有原型，就是Object。在之后的圖示中會(huì)進(jìn)行說(shuō)明。
舉個(gè)栗子，我們首先聲明一個(gè)函數(shù)Student()：
function Student(name){
this.name = name;
this.hello = function(){
alert(`Hello,${this.name}`);
}
}
這個(gè)函數(shù)包含一個(gè)屬性name和一個(gè)方法hello。
在JavaScript中，可以通過(guò)new關(guān)鍵字來(lái)調(diào)用Student函數(shù)（不寫(xiě)new就是一個(gè)普通函數(shù)，寫(xiě)new就是一個(gè)構(gòu)造函數(shù)），并且返回一個(gè)原型指向Student.prototype的對(duì)象，如下所示：
var xiaoming = new Student("xiaoming");
alert(xiaoming.name); // xiaoming
xiaoming.hello(); // Hello,xiaoming
如果我們想確認(rèn)一下我們的設(shè)想對(duì)不對(duì)，就會(huì)希望去比較一下xiaoming.prototype和Student.prototype是否相等。
但是xiaoming沒(méi)有prototype屬性，不過(guò)可以用__proto__來(lái)查看。接下來(lái)我們就用這些屬性來(lái)查看xiaoming，Student，Object之間的原型鏈：
document.onreadystatechange = function(){
// interactive表示文檔已被解析，但瀏覽器還在加載其中鏈接的資源
if(document.readyState === "interactive"){
var xiaoming = new Student("xiaoming");
alert(xiaoming.name);
xiaoming.hello();
console.log("xiaoming.__proto__：");
console.log(xiaoming.__proto__);
console.log("Student.prototype：");
console.log(Student.prototype);
console.log("xiaoming.__proto__ === Student.prototype：" + xiaoming.__proto__ === Student.prototype);
console.log("Student.prototype.constructor：" + Student.prototype.constructor);
console.log("Student.prototype.prototype：" + Student.prototype.prototype);
console.log("Student.prototype.__proto__：");
console.log(Student.prototype.__proto__);
console.log(Object.prototype);
console.log("Student.prototype.__proto__ === Object.prototype：" + Student.prototype.__proto__ === Object.prototype);
}
}
七個(gè)紅色箭頭指向的就是七個(gè)console.log語(yǔ)句的輸出結(jié)果。用圖例展示一下如圖所示：
測(cè)試表明Object.prototype和Student.prototype.__proto__指向的Object并不是同一個(gè)。這個(gè)Object就是之前說(shuō)的沒(méi)有原型的那個(gè)Object，我們可以看到它并沒(méi)有對(duì)應(yīng)的prototype或者_(dá)_proto__屬性：
由圖可得原型鏈如下所示：
由于本人語(yǔ)言表達(dá)能力有限，理解也比較淺顯，所以圖示比較多，錯(cuò)誤之處還望指出，謝謝。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要是對(duì)判斷javascript的數(shù)據(jù)類型的判斷方式進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2015-10-10
JavaScript中DOM和BOM的區(qū)別與用處詳解
這篇文章主要介紹了JavaScript中DOM和BOM的區(qū)別與用處,DOM和BOM是前端開(kāi)發(fā)中常用的兩個(gè)概念,它們分別表示不同的對(duì)象模型,用于操作瀏覽器的不同部分,了解它們的區(qū)別和用處,有助于在前端開(kāi)發(fā)中靈活使用?JavaScript?操作頁(yè)面和瀏覽器,需要的朋友可以參考下2024-09-09
Javascript 制作圖形驗(yàn)證碼實(shí)例詳解
這篇文章主要介紹了Javascript 制作圖形驗(yàn)證碼實(shí)例詳解的相關(guān)資料,附有實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了使用js如何判斷橫豎屏及禁止瀏覽器滑動(dòng)條,需要的朋友可以參考下2014-04-04
js保留兩位小數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法
JS數(shù)據(jù)格式化是在進(jìn)行web前端開(kāi)發(fā)時(shí)常碰到的事情,特別是在數(shù)據(jù)類型為Float的數(shù)據(jù)就需要特殊處理,如保留兩位小數(shù)、小數(shù)點(diǎn)后的數(shù)據(jù)是否需要四舍五入等等,下面這篇文章主要給大家介紹了關(guān)于js保留兩位小數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05
javascript中typeof操作符和constucor屬性檢測(cè)
這篇文章主要介紹了javascript中typeof操作符和constucor屬性檢測(cè)的相關(guān)資料,需要的朋友可以參考下2015-02-02
Alova.js現(xiàn)代化請(qǐng)求庫(kù)使用指南
alova.js 是一個(gè)基于 Promise 的輕量級(jí) HTTP 請(qǐng)求庫(kù),它提供了簡(jiǎn)單而強(qiáng)大的 API 來(lái)處理前端的 HTTP 請(qǐng)求,它的設(shè)計(jì)目標(biāo)是簡(jiǎn)化開(kāi)發(fā)者在前端進(jìn)行 HTTP 請(qǐng)求的過(guò)程,提供更好的開(kāi)發(fā)體驗(yàn)和更高的效率,本文給大家詳細(xì)介紹了Alova.js現(xiàn)代化請(qǐng)求庫(kù)的使用,需要的朋友可以參考下2025-03-03
本文給大家介紹Bootstrap 對(duì)圖片的支持，Bootstrap提供了四個(gè)可對(duì)圖片應(yīng)用簡(jiǎn)單樣式的class，對(duì)Bootstrap四種圖片class相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
javascript學(xué)習(xí)小結(jié)之prototype
本系列博文主要談一些在 javascript 使用中經(jīng)常會(huì)混淆的高級(jí)應(yīng)用，包括: prototype, closure, scope, this關(guān)鍵字. 對(duì)于一個(gè)需要提高自己javascript水平的程序員,這些都是必須要掌握的，本節(jié)主要介紹prototype.2015-12-12
uni-app全局變量的四種實(shí)現(xiàn)方式總結(jié)
在開(kāi)發(fā)的過(guò)程中,我們不可避免的用到全局變量,比如我們的請(qǐng)求的公共路徑這個(gè)變量,下面這篇文章主要給大家總結(jié)介紹了關(guān)于uni-app全局變量的四種實(shí)現(xiàn)方式,需要的朋友可以參考下2023-10-10