理解JavaScript原型鏈

更新時間：2016年10月25日 15:54:53 作者：雨簾輕掛

簡單說一說對JavaScript原型鏈的理解,希望對大家學(xué)習(xí)JavaScript原型鏈有所幫助，具體內(nèi)容如下

每一個JavaScript對象都和另一個對象相關(guān)聯(lián)，相關(guān)聯(lián)的這個對象就是我們所說的“原型”。每一個對象都會從原型繼承屬性和方法。有一個特殊的對象沒有原型，就是Object。在之后的圖示中會進行說明。

舉個栗子，我們首先聲明一個函數(shù)Student()：

function Student(name){
  this.name = name;
 this.hello = function(){
   alert(`Hello,${this.name}`);
 }
 }

這個函數(shù)包含一個屬性name和一個方法hello。
在JavaScript中，可以通過new關(guān)鍵字來調(diào)用Student函數(shù)（不寫new就是一個普通函數(shù)，寫new就是一個構(gòu)造函數(shù)），并且返回一個原型指向Student.prototype的對象，如下所示：

 var xiaoming = new Student("xiaoming");
 alert(xiaoming.name); // xiaoming
 xiaoming.hello(); // Hello,xiaoming

如果我們想確認一下我們的設(shè)想對不對，就會希望去比較一下xiaoming.prototype和Student.prototype是否相等。
但是xiaoming沒有prototype屬性，不過可以用__proto__來查看。接下來我們就用這些屬性來查看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);
 }
}

七個紅色箭頭指向的就是七個console.log語句的輸出結(jié)果。用圖例展示一下如圖所示：

測試表明Object.prototype和Student.prototype.__proto__指向的Object并不是同一個。這個Object就是之前說的沒有原型的那個Object，我們可以看到它并沒有對應(yīng)的prototype或者__proto__屬性：

由圖可得原型鏈如下所示：

由于本人語言表達能力有限，理解也比較淺顯，所以圖示比較多，錯誤之處還望指出，謝謝。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
原型鏈

相關(guān)文章

簡單談?wù)凧avascript中類型的判斷
這篇文章主要是對判斷javascript的數(shù)據(jù)類型的判斷方式進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2015-10-10
JavaScript中DOM和BOM的區(qū)別與用處詳解
這篇文章主要介紹了JavaScript中DOM和BOM的區(qū)別與用處,DOM和BOM是前端開發(fā)中常用的兩個概念,它們分別表示不同的對象模型,用于操作瀏覽器的不同部分,了解它們的區(qū)別和用處,有助于在前端開發(fā)中靈活使用?JavaScript?操作頁面和瀏覽器,需要的朋友可以參考下
2024-09-09
Javascript 制作圖形驗證碼實例詳解
這篇文章主要介紹了Javascript 制作圖形驗證碼實例詳解的相關(guān)資料,附有實例代碼及實現(xiàn)效果圖，需要的朋友可以參考下
2016-12-12
js判斷橫豎屏及禁止瀏覽器滑動條示例
這篇文章主要介紹了使用js如何判斷橫豎屏及禁止瀏覽器滑動條,需要的朋友可以參考下
2014-04-04
js保留兩位小數(shù)最簡單的實現(xiàn)方法
JS數(shù)據(jù)格式化是在進行web前端開發(fā)時常碰到的事情,特別是在數(shù)據(jù)類型為Float的數(shù)據(jù)就需要特殊處理,如保留兩位小數(shù)、小數(shù)點后的數(shù)據(jù)是否需要四舍五入等等,下面這篇文章主要給大家介紹了關(guān)于js保留兩位小數(shù)最簡單的實現(xiàn)方法,需要的朋友可以參考下
2023-05-05
javascript中typeof操作符和constucor屬性檢測
這篇文章主要介紹了javascript中typeof操作符和constucor屬性檢測的相關(guān)資料,需要的朋友可以參考下
2015-02-02
Alova.js現(xiàn)代化請求庫使用指南
alova.js 是一個基于 Promise 的輕量級 HTTP 請求庫,它提供了簡單而強大的 API 來處理前端的 HTTP 請求,它的設(shè)計目標是簡化開發(fā)者在前端進行 HTTP 請求的過程,提供更好的開發(fā)體驗和更高的效率,本文給大家詳細介紹了Alova.js現(xiàn)代化請求庫的使用,需要的朋友可以參考下
2025-03-03
詳解Bootstrap四種圖片樣式
本文給大家介紹Bootstrap 對圖片的支持，Bootstrap提供了四個可對圖片應(yīng)用簡單樣式的class，對Bootstrap四種圖片class相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
javascript學(xué)習(xí)小結(jié)之prototype
本系列博文主要談一些在 javascript 使用中經(jīng)常會混淆的高級應(yīng)用，包括: prototype, closure, scope, this關(guān)鍵字. 對于一個需要提高自己javascript水平的程序員,這些都是必須要掌握的，本節(jié)主要介紹prototype.
2015-12-12
uni-app全局變量的四種實現(xiàn)方式總結(jié)
在開發(fā)的過程中,我們不可避免的用到全局變量,比如我們的請求的公共路徑這個變量,下面這篇文章主要給大家總結(jié)介紹了關(guān)于uni-app全局變量的四種實現(xiàn)方式,需要的朋友可以參考下
2023-10-10