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

時間 2019-12-05

標籤原型模式故事四大理論简体版

原文原文鏈接

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

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

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

3.全部引用類型的隱式原型指向它構造函數的顯式原型。segmentfault

4.當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼它會去到_proto_中尋找。（也就至關於會去構造函數的prototype中尋找）函數

畫了一個圖：
this

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

那咱們來驗證一下：prototype

驗證：
理論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)

控制檯打印的日誌以下：
code

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

理論2就不驗證了，寫原型模式時。自己就能夠直接用。例如：Animal.prototype={}

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

理論4：當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼它會去到_proto_中尋找。（也就至關於去構造函數的prototype中尋找）

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

<!DOCTYPE html>
<html>
<head>
    <title>原型模式</title>
</head>
<body>

<script type="text/javascript">
    //構造函數
    function Animal(name){
        this.name = name;
        console.log('this:',this)
    }
    
    // 原型
    Animal.prototype = {
        eat:function(val){
            console.log(this.name + ' like eat '+ val);
        }
    }

    // 實例化
    var cat = new Animal('橘貓');

    cat.eat('魚呀魚');//橘貓 like eat 魚呀魚
</script>
</body>
</html>

在上述代碼中，在new以後cat就至關於Animal這個函數。可是在Animal中並無eat()這個方法。
根據理論4，在_proto_中找到了eat()因此能成功執行。爲何_proto_中就有eat()呢。由於在new的時候，步驟2時設置新的對象的隱式原型指向其構造函數的顯式原型。

咱們再來看看一個東西：

<!DOCTYPE html>
<html>
<head>
    <title>原型模式</title>
</head>
<body>

<script type="text/javascript">
    //構造函數
    function Animal(name){
        this.name = name;
    }
    
    // 原型
    Animal.prototype = {
        eat:function(val){
            console.log(this.name + ' like eat '+ val);
        }
    }

    // 實例化
    var cat = new Animal('橘貓');
    console.log('cat',cat)
    cat.eat('魚呀魚');//橘貓 like eat 魚呀魚
    cat.toString();//不會報錯，能成功執行
</script>
</body>
</html>

控制檯打印日誌以下：

上圖能夠看到cat執行toString()並不會報錯，說明這個方法存在。可是既不在構造函數裏，也不在原型裏，那在哪裏呢？
根據理論4，若是這個對象自己沒有這個屬性，那麼它會去到_proto_中尋找。（也就至關於去構造函數的prototype中尋找），因此在Animal.prototype中找不到，那麼因爲Animal.prototype是一個對象，屬於引用類型，也知足定理4，因此在Animal.prototype的_proto_中繼續找，也就是到Object.prototype中找，恰好找到了！
這個一層一層的往上找就是所謂的原型鏈。（具體看最開始畫的那個圖）
也不能無限的往上找，避免死循環，在往上就是null了。

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。