Javascript 原型鏈

nanfeiyan 發(fā)布于2019-08-23 15:17 / 1185人閱讀

摘要：先來一張圖看看幾個(gè)名詞的關(guān)系構(gòu)造函數(shù)原型實(shí)例原諒我的狂草字體，我手寫比用電腦畫快。今天我們只說原型鏈，所以接下來我就圍繞著原型鏈的幾個(gè)部分說起。每個(gè)函數(shù)都有一個(gè)屬性借用屬性存儲(chǔ)了的原型對(duì)象。

先來一張圖看看幾個(gè)名詞的關(guān)系構(gòu)造函數(shù)、原型、實(shí)例

原諒我的狂草字體，我手寫比用電腦畫快。

今天我們只說原型鏈，所以接下來我就圍繞著原型鏈的幾個(gè)部分說起。

這個(gè)大家都很熟悉了，首字母大寫的函數(shù)我們都可以作為構(gòu)造函數(shù)，不是說小寫的就不能new，也是可以的，暫時(shí)說成約定俗成吧！

        // 構(gòu)造函數(shù)
        function Fn() {}
        //原型對(duì)象
        console.log(Fn.prototype)
          //new
        let fn = new Fn() 
        //實(shí)例
        console.log(fn)

代碼部分結(jié)束了，今天我們就用這4行代碼描述一下上圖也就是原型鏈的來龍去脈。

每個(gè)函數(shù)都有一個(gè)屬性prototype,借用**Function.prototype**?屬性存儲(chǔ)了?Function?的原型對(duì)象。

驗(yàn)證了我草圖構(gòu)造函數(shù).prototype指向原型對(duì)象

完整的log看一下

實(shí)例.__proto__也指向原型對(duì)象

從log里也能看出來

實(shí)例原型的constructor指向構(gòu)造函數(shù)

最后再說構(gòu)造函數(shù) new關(guān)鍵字生成實(shí)例

手繪圖說完了，我們說正題原型鏈，為什么再說原型鏈之前先畫了一個(gè)草圖，為了幫助預(yù)熱理解。

每一個(gè)原型對(duì)象都有一個(gè)__proto__屬性，這個(gè)是我們?cè)诖a中繼承的關(guān)鍵，也是眾多面試官所問的什么是原型鏈

上圖可以看到，第一次__proto__找到了原型對(duì)象，第二次__proto__找到了Object實(shí)例對(duì)象，第三次null查找結(jié)束。

我們平時(shí)開發(fā)中用到了__proto__去查找鏈條中我們繼承的方法和屬性都在prototype（原型）上，所以不能在Fn.prototype = xxx操作,這樣鏈條就會(huì)中斷，只能在原型上擴(kuò)展屬性。

明天繼續(xù)聊繼承！

歡迎吐槽！

GPU云服務(wù)器云服務(wù)器原型原型鏈原型鏈 javascript原型原型鏈繼承

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101814.html

相關(guān)文章

如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關(guān)系那么圖中所有的虛線將構(gòu)成一個(gè)繼承層級(jí)，而實(shí)線表示屬性引用。原型鏈?zhǔn)菍?shí)現(xiàn)繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個(gè)問題，在面試中，很多同學(xué)經(jīng)常都會(huì)遇到。這里給大家講講，方便大家記憶。 JavaScript的特點(diǎn)JavaScript是一門直譯式腳本...

xuexiangjys 2019-08-02 16:12 評(píng)論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關(guān)系那么圖中所有的虛線將構(gòu)成一個(gè)繼承層級(jí)，而實(shí)線表示屬性引用。原型鏈?zhǔn)菍?shí)現(xiàn)繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個(gè)問題，在面試中，很多同學(xué)經(jīng)常都會(huì)遇到。這里給大家講講，方便大家記憶。 JavaScript的特點(diǎn)JavaScript是一門直譯式腳本...

adie 2019-08-23 16:54 評(píng)論0 收藏0
我所認(rèn)識(shí)的JavaScript作用域鏈和原型鏈

摘要：為了防止之后自己又開始模糊，所以自己來總結(jié)一下中關(guān)于作用域鏈和原型鏈的知識(shí)，并將二者相比較看待進(jìn)一步加深理解。因此我們發(fā)現(xiàn)當(dāng)多個(gè)作用域相互嵌套的時(shí)候，就形成了作用域鏈。原型鏈原型說完了作用域鏈，我們來講講原型鏈。　　畢業(yè)也整整一年了，看著很多學(xué)弟都畢業(yè)了，忽然心中頗有感慨，時(shí)間一去不復(fù)還呀。記得從去年這個(gè)時(shí)候接觸到JavaScript,從一開始就很喜歡這門語言，當(dāng)時(shí)迷迷糊糊看完了《J...

Bmob 2019-08-20 17:36 評(píng)論0 收藏0
細(xì)說 Javascript 對(duì)象篇（二） : 原型對(duì)象

摘要：并沒有類繼承模型，而是使用原型對(duì)象進(jìn)行原型式繼承。我們舉例說明原型鏈查找機(jī)制當(dāng)訪問一個(gè)對(duì)象的屬性時(shí)，會(huì)從對(duì)象本身開始往上遍歷整個(gè)原型鏈，直到找到對(duì)應(yīng)屬性為止。原始類型有以下五種型。此外，試圖查找一個(gè)不存在屬性時(shí)將會(huì)遍歷整個(gè)原型鏈。 Javascript 并沒有類繼承模型，而是使用原型對(duì)象 prototype 進(jìn)行原型式繼承。盡管人們經(jīng)常將此看做是 Javascript 的一個(gè)缺點(diǎn)，然...

lansheng228 2019-08-19 14:40 評(píng)論0 收藏0
《javascript高級(jí)程序設(shè)計(jì)》筆記：原型圖解

摘要：不理解沒關(guān)系，下面會(huì)結(jié)合圖例分析上一篇高級(jí)程序設(shè)計(jì)筆記創(chuàng)建對(duì)象下一篇高級(jí)程序設(shè)計(jì)筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對(duì)象與原型鏈繼承與原型鏈文章直接從原型圖解開始的，如果對(duì)一些概念不太清除，可以結(jié)合后面幾節(jié)查看 1. 圖解原型鏈 1.1 鐵三角關(guān)系（重點(diǎn)） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 評(píng)論0 收藏0
JavaScript原型鏈以及Object，F(xiàn)unction之間的關(guān)系

摘要：由于一般所有的原型鏈最終都會(huì)指向頂端的，所以它們都是的。好了現(xiàn)在了，成了所有對(duì)象原型鏈的。 JavaScript里任何東西都是對(duì)象，任何一個(gè)對(duì)象內(nèi)部都有另一個(gè)對(duì)象叫__proto__，即原型，它可以包含任何東西讓對(duì)象繼承。當(dāng)然__proto__本身也是一個(gè)對(duì)象，它自己也有自己的__proto__，這樣一級(jí)一級(jí)向上，就構(gòu)成了一個(gè)__proto__鏈，即原型鏈。當(dāng)然原型鏈不會(huì)無限向上，它有...

zacklee 2019-08-21 18:20 評(píng)論0 收藏0