Javascript 原型鏈

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

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

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

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

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

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

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

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

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

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

完整的log看一下

實例.__proto__也指向原型對象

從log里也能看出來

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

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

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

每一個原型對象都有一個__proto__屬性，這個是我們在代碼中繼承的關(guān)鍵，也是眾多面試官所問的什么是原型鏈

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

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

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

歡迎吐槽！

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101814.html

相關(guān)文章

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

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

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

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

adie 2019-08-23 16:54 評論0 收藏0
我所認識的JavaScript作用域鏈和原型鏈

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

Bmob 2019-08-20 17:36 評論0 收藏0
細說 Javascript 對象篇（二） : 原型對象

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

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

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

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

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

zacklee 2019-08-21 18:20 評論0 收藏0