JS三座大山之原型鏈

在JS中原型鏈的概念剛開始可能一直迷惑着大多數人,我也同樣,不過花點時間仔細的梳理梳理,仍是很容易理解的。本文就着重介紹一下原型鏈,若有不對之處,歡迎指正,共同探討,共同進步。面試

在面試時,面試官可能會經過對象的建立方式來引出原型鏈相關的問題: 那麼建立對象的方式主要有如下幾種: 第一種: 字面量 var Obj1 = {name:"o1」}; var Obj2 = new Object({name:"o2"});函數

第二種:構造函數 var M = function (name) { this.name = name }; var Obj3 = new M("o3") ;this

第三種:Object.create var p = {name:"o4"} var Obj4 = Object.create(p); 不一樣的方式建立的對象略微不一樣。如圖所示: prototype

原型鏈是實現繼承的主要方法,基本思想就是利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。 要理解原型鏈就要明白原型對象、構造函數、實例,三者之間的關係。 咱們先來梳理三者的關係: 每一個構造函數都有一個原型對象,原型對象都包含一個指向構造函數的指針,實力也有一個指向原型對象的內部指針。 當這個原型對象是另外一個類型的實例,那麼這個原型對象就有一個內部指針指向另外一個原型,以此類推就構成了一條原型鏈。原型鏈的根就是Object.prototype。 文字描述每每沒有圖像描述來的直觀,那麼咱們用一個三者之間的關係圖來直觀的瞭解。 3d

如上圖所展現的,原型對象指向構造函數的指針是 constructor ,構造函數的 prototype 指向原型對象,構造函數經過 new 操做符來建立一個實例 , 實例又能夠經過內部指針 proto 指向原型對象。 proto 鏈接的這一條原型對象就構成了原型鏈。指針

如上面列舉的建立對象方式的第二種方式,M 就是一個構造函數,那麼 M 就應該有一個 原型對象,能夠經過 prototype 找到!而 M 的原型對象存在 constructor,按照上圖所示, M 的 原型對象的constructor 指向的就是 M 自己;實踐看結果: 對象

上圖就能夠明瞭的證實構造函數和原型對象之間的關係; 那麼咱們再來看實例和原型對象的關係。依照上面的關係圖,實例的內部指針 proto 指向原型對象,構造函數 M 的原型也指向同一個原型對象,究竟指向的是否是同一個原型對象呢?咱們再來看: blog

這樣兩個例子就很明白的說明了實例、構造函數、原型對象三者之間的關係。 那麼明白了三者之間的關係咱們就來講一下原型鏈,咱們從一個實例對象向上找有一個構造實例的原型對象,這個原型對象又有構造它的上一級原型對象,如此一級一級的關係鏈,就構成了原型鏈。原型鏈的最頂端就是Object.prototype ;繼承

原型鏈最重要的做用就是繼承,實例來繼承上一級的屬性或方法。此外,若是有多個實例,而多個實例存在共同方法,或共同屬性,咱們不想每個實例都建立一份這些屬性或方法,就能夠將這些屬性存在原型對象上,實例同樣可使用這些屬性或方法; 原型鏈

相似於做用域鏈,實例在調用方法時,若是在自己沒有找到,就會在原型對象上查找,若是也沒有找到,就會再向上一級原型對象查找,一直找到Object.prototype ;若是中間找到會中止查找返回該方法。若是一直沒找到會返回未定義;

那麼,原型鏈就是這樣的,不知道你們有沒有理解。跟原型鏈相關的知識點還有 instanceof 運算符,還有 new 運算符,他們背後的原理也是須要研究明白的。這兩個知識點咱們下次再說,今天先到這裏,謝謝~

相關文章
相關標籤/搜索