理解JavaScript原型鏈教程

理解JavaScript原型鏈教程

　　理解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ù)（不寫new就是一個(gè)普通函數(shù)，寫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ò)誤之處還望指出，謝謝。

【理解JavaScript原型鏈教程】相關(guān)文章：

對(duì)javascript的理解03-29

JavaScript與用戶端教程04-01

javascript的閉包概念怎么理解03-29

JavaScript類定義原型方法的兩種實(shí)現(xiàn)的區(qū)別04-02

javascript面向?qū)ο笾械膶?duì)象怎么理解03-30

淺談javascript中的單線程理解03-30

有關(guān)深入理解JavaScript中的并行處理的介紹03-30

豐田汽車供應(yīng)鏈管理解析11-24

JavaScript的課堂講解03-31