資訊專欄INFORMATION COLUMN
摘要：它指向構造函數(shù)的原型對象這是原型對象上的一個指向構造函數(shù)的屬性。先看代碼的構造函數(shù)創(chuàng)建一個的實例，小豬佩奇敲黑板，劃重點，理解這一句整個問題的關鍵，請多重復幾遍。也就是說小豬佩奇的原型，就是從繼承來的寫成代碼就是這個樣子。
??沒錯，我就是標題黨！你已經(jīng)成功被我騙進來了。來都來了，那就聊聊再走唄！接下來就聽我一本正經(jīng)地跟你說道說道。
??Javascript的原型是這門語言的一個重點和難點。看過很多大佬寫的解釋Javascript原型的文章，但是很多對于初學者其實不是很友好，看完之后還是云里霧里。我雖然不敢說能把這個東西解釋的很清楚，但是作為一個前端菜鳥，我可能更知道大家在讀文章的時候會卡在哪一步，所以希望本文能夠幫助到大家。
??在文章開始，我先明確幾個概念，這里如果你覺得不好理解，就先牢牢地記住它，然后繼續(xù)往下閱讀，讀完你就會豁然開朗，相信我！另外，一定要每行每字去讀，勿跳著讀，博主就犯過這樣的錯誤，導致越讀越糊涂，我這里也盡量壓縮字數(shù)，保證你讀的每個字都是有用的。答：“你都忽悠半天了趕緊開始吧！”
prototype ：每個函數(shù)都會有這個屬性，這里強調(diào)，是函數(shù)，普通對象是沒有這個屬性的（這里為什么說普通對象呢，因為JS里面，一切皆為對象，所以這里的普通對象不包括函數(shù)對象）。它是構造函數(shù)的原型對象；
__proto__ ：每個對象都有這個屬性,，這里強調(diào)，是對象，同樣，因為函數(shù)也是對象，所以函數(shù)也有這個屬性。它指向構造函數(shù)的原型對象；
constructor ：這是原型對象上的一個指向構造函數(shù)的屬性。
先看代碼
// Pig的構造函數(shù)
function Pig(name, age) {
this.name = name;
this.age = age;
}
// 創(chuàng)建一個Pig的實例，小豬佩奇
var Peppa = new Pig("Peppa", 5);
敲黑板，劃重點，理解這一句整個問題的關鍵，請多重復幾遍。：在實例化的時候，prototype上的屬性會作為原型對象賦值給實例。 也就是說小豬佩奇的原型，就是從Pig.prototype繼承來的寫成代碼就是這個樣子Peppa.__proto__ === Pig.prototype。
Pig是一個函數(shù)對象，它是Function對象的一個實例，所以Pig.__proto__ === Function.prototype一定為true。
我們在上面提到了constructor這個屬性，它位于原型對象上并且指向構造函數(shù)，所以Pig.prototype.constructor === Pig
至此，我大致捋了一遍這三個屬性的關系，我們再順著這條鏈繼續(xù)往深挖一挖。Function.prototype，也就是Function的原型對象。這個原型對象的__proto__指向了Object.prototype。打破砂鍋問到底，Object.prototype.__proto__又指向誰，JS世界里萬物皆對象，Object似乎已經(jīng)到了原型鏈的頂端，果然不出我所料，它確實是null。：
你可能要吐槽了，說好的講明白呢，這一坨都被你繞糊涂了，一張圖勝過千言萬語：
解釋一下上面的圖。先看藍色那條線，Pig,Function和Object的構造函數(shù)是Function的實例，所以它們的__proto__均指向Function.prototype。這就印證了敲黑板說的那句話，prototype屬性會作為原型對象賦值給實例，每個對象的__proto__都指向原型對象（處于最頂層的Object.prototype除外）。
再看綠色那條，Pig和Function的原型對象是Object的實例，所以它們的__proto__均指向了Object.prototype，也就是Object的原型對象。
淺藍色的線表明了原型的constructor指向了構造函數(shù)。
Emmmm，其實也沒那么復雜對不對？接著說一下原型鏈。正如你在上面圖中所看到的，JS在創(chuàng)建對象的時候，會在新對象上產(chǎn)生一個__proto__的屬性，這個屬性指向了它構造函數(shù)的原型的prototype。由此一級一級向上直到到達Object.prototype.__proto__ === null的這個鏈條我們稱之為原型鏈。
關于繼承的概念，本來想寫在一起的，后來想想，內(nèi)容過多只會讓文章成為收藏不看系列，所以這塊的內(nèi)容放在以后的文章里詳解。各位看官，我想我大致講明白了原型和原型鏈的概念，有什么錯誤還懇請批評指正。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/107962.html
摘要：每天一個社會人實現(xiàn)效果想法之前看到一篇博客，使用繪制出了小豬佩奇，所以自己想試一試，采用純繪制出低配版的小豬佩奇。在布局上，沒有堅持嵌套，導致縮放時位置錯位，如果想實行縮放一致，可采用小豬的頭部嵌套布局實現(xiàn)。 每天一個CSS-社會人 實現(xiàn)效果 showImg(https://segmentfault.com/img/remote/1460000016461611?w=667&h=620...
摘要：所以一開始讓我看小豬佩奇的時候我是拒絕的，因為你不能讓我看，我就馬上去看，第一我要試一下。其實這道題對于真正看了小豬佩奇的人來說是送分題，就看是不是真的看了。這里說的都是類，這也正是小豬佩奇的構圖精髓，一種手繪風格，而不是標準刻板的線條。 歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術實踐干貨哦~ 作者：江志耿 | 騰訊TEG網(wǎng)絡工程師 我是佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽...
摘要：主要有以下幾個步驟找一張小豬喬治的圖片參考對圖片中的部分進行分解，并逐一實現(xiàn)廢話其實掌握了后，這些步驟都不難了，細心繪制就可以完成啦。我繪制的小豬喬治如圖參考資料用畫小豬佩奇，你就是下一個社會人 概述 之前看了一篇關于用CSS來畫小豬佩奇的文章，抱著鍛煉自己的心態(tài)造了個輪子，畫了個佩奇的小弟喬治，效果可以看這里，源碼在這里。 開發(fā)過程中也讓我對border-radius這個屬性有了更深...
摘要：代碼示例語法和方法類似，不同的是，傳入調(diào)用函數(shù)的參數(shù)變成以數(shù)組的形式傳入，即改造上面的示例就是方法用于將函數(shù)體內(nèi)的綁定到某個對象，然后返回一個新函數(shù)。類型包裝對象數(shù)值字符串布爾值在一定條件下，也會自動轉為對象，也就是原始類型的包裝對象。 現(xiàn)在的前端框架層出不窮，3個月就要重新入門一次前端的現(xiàn)狀，讓我們來不及學好基礎就開始上手框架。常常就因為這樣，我們會很快到達基礎基礎技術瓶頸，基礎是所...
閱讀 1132·2021-11-24 10:21
閱讀 2573·2021-11-19 11:35
閱讀 1673·2019-08-30 15:55
閱讀 1301·2019-08-30 15:54
閱讀 1203·2019-08-30 15:53
閱讀 3512·2019-08-29 17:21
閱讀 3314·2019-08-29 16:12
閱讀 3424·2019-08-29 15:23
