原型模式故事鏈(2)--原型鏈的四大理論

MarvinZhang 發布于2019-08-23 12:31 / 1096人閱讀

摘要：所有引用類型的隱式原型指向它構造函數的顯式原型。理論就不驗證了，寫原型模式時。原型模式構造函數原型實例化橘貓魚呀魚橘貓魚呀魚在上述代碼中，在之后就相當于這個函數。

上一章：new一個對象的過程 https://segmentfault.com/a/11...

原型鏈4大理論：
1.所有的引用類型都有一個_proto_屬性，稱之為隱式原型。

2.所有的函數(Function)都有一個prototype屬性，稱之為顯式原型或者直接叫原型。

3.所有引用類型的隱式原型指向它構造函數的顯式原型。

4.當試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么它會去到_proto_中尋找。（也就相當于會去構造函數的prototype中尋找）

畫了一個圖：

ps:關于JS的數據類型在下一章有

那我們來驗證一下：

驗證：
理論1：所有的引用類型都有一個_proto_屬性，稱之為隱式原型。

    //引用類型
    var obj = {
        x:1,
        y:2
    }
    console.log("obj:",obj)

    var arr = [1,2,3]
    console.log("arr:",arr)

    //值類型
    var str = "abc";
    var num = 123;
    console.log("str:",str)
    console.log("num:",num)

控制臺打印的日志如下：

可以看出，值類型的都有隱式原型。理論1成立。

理論2就不驗證了，寫原型模式時。本身就可以直接用。例如：Animal.prototype={}

理論3：3.所有引用類型的隱式原型指向它構造函數的顯式原型。在上一章new一個對象的過程中步驟2驗證過，成立。傳送門在頂部。

理論4：當試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么它會去到_proto_中尋找。（也就相當于去構造函數的prototype中尋找）

這個是很重要的一個理論。詳細講解一下。




    原型模式

在上述代碼中，在new之后cat就相當于Animal這個函數。但是在Animal中并沒有eat()這個方法。
根據理論4，在_proto_中找到了eat()所以能成功執行。為什么_proto_中就有eat()呢。因為在new的時候，步驟2時設置新的對象的隱式原型指向其構造函數的顯式原型。

我們再來看看一個東西：




    原型模式

控制臺打印日志如下：

上圖可以看到cat執行toString()并不會報錯，說明這個方法存在。但是既不在構造函數里，也不在原型里，那在哪里呢？
根據理論4，如果這個對象本身沒有這個屬性，那么它會去到_proto_中尋找。（也就相當于去構造函數的prototype中尋找），所以在Animal.prototype中找不到，那么由于Animal.prototype是一個對象，屬于引用類型，也滿足定理4，所以在Animal.prototype的_proto_中繼續找，也就是到Object.prototype中找，剛好找到了！
這個一層一層的往上找就是所謂的原型鏈。（具體看最開始畫的那個圖）
也不能無限的往上找，避免死循環，在往上就是null了。

哎喲說了這么多，請看：
下一回：JS的數據類型 https://segmentfault.com/a/11...

云服務器 GPU云服務器 js原型鏈的繼承原型原型鏈原型模式原型鏈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98658.html

原型模式故事鏈(2)--原型鏈的四大理論

摘要：所有引用類型的隱式原型指向它構造函數的顯式原型。理論就不驗證了，寫原型模式時。原型模式構造函數原型實例化橘貓魚呀魚橘貓魚呀魚在上述代碼中，在之后就相當于這個函數。上一章：new一個對象的過程 https://segmentfault.com/a/11... 原型鏈4大理論：1.所有的引用類型都有一個_proto_屬性，稱之為隱式原型。 2.所有的函數(Function)都有一個pro...

MRZYD 2019-08-29 17:04 評論0 收藏0
原型模式故事鏈(2)--原型鏈的四大理論

摘要：所有引用類型的隱式原型指向它構造函數的顯式原型。理論就不驗證了，寫原型模式時。原型模式構造函數原型實例化橘貓魚呀魚橘貓魚呀魚在上述代碼中，在之后就相當于這個函數。上一章：new一個對象的過程 https://segmentfault.com/a/11... 原型鏈4大理論：1.所有的引用類型都有一個_proto_屬性，稱之為隱式原型。 2.所有的函數(Function)都有一個pro...

Meils 2019-08-02 11:47 評論0 收藏0
原型模式故事鏈(4)--JS執行上下文、變量提升、函數聲明

摘要：代碼在執行之前會先全局中變量提升函數聲明。函數的執行上下文，也就是在這個函數范圍內找到函數執行上下文中函數范圍內，所有用聲明的變量。函數執行時，按照執行位置查找變量作用域只會向上查找。下一回變量作用域與閉包上一章：JS的數據類型傳送門：https://segmentfault.com/a/11... 好！話不多少，我們就開始吧。對變量提升和函數聲明的理解，能讓你更清楚容易的理解，...

melody_lql 2019-08-29 17:05 評論0 收藏0
原型模式故事鏈(4)--JS執行上下文、變量提升、函數聲明

摘要：代碼在執行之前會先全局中變量提升函數聲明。函數的執行上下文，也就是在這個函數范圍內找到函數執行上下文中函數范圍內，所有用聲明的變量。函數執行時，按照執行位置查找變量作用域只會向上查找。下一回變量作用域與閉包上一章：JS的數據類型傳送門：https://segmentfault.com/a/11... 好！話不多少，我們就開始吧。對變量提升和函數聲明的理解，能讓你更清楚容易的理解，...

zhigoo 2019-08-02 11:48 評論0 收藏0