圖說原型鏈

Shonim 發布于2019-08-02 10:30 / 1575人閱讀

摘要：前言說到原型鏈，中，萬物皆對象，而規定，所有對象都有自己的原型對象，一方面，任何對象都可以充當其他對象的原型，另一方面，原型也是對象，也擁有自己的原型，因此形成的鏈就是原型鏈。

前言

說到原型鏈，javascript 中，萬物皆對象，而 javascript 規定，所有對象都有自己的原型對象(prototype) ，一方面，任何對象都可以充當其他對象的原型，另一方面，原型（prototype）也是對象，也擁有自己的原型，因此形成的鏈就是原型鏈。到這里我就啰嗦幾句，javascript 的設計者Brendan Eich在設計這門語言之初，只是想它在網頁上實現簡單的交互，比如表單提交前進行簡單的校驗，所以沒有設計類與繼承的概念，因為覺得這樣的話太正式了，但是受時代的影響，javascript里面都是對象，雖然沒有繼承，但是也要一種機制，把這些對象聯系起來，這種機制就是原型鏈。話不多說，上圖

圖解

假設有一個內存空間（正方形表示），這片內存里放了一個構造函數Dog(用三角形表示)

function Dog () {
    this.leg = 4;
    this.bray = function () {
        alert("wangwang")；
    }
}

設置構造函數的原型函數（prototype）

Dog.prototype = {
    spacies: "dog"
}
console.log(Dog.prototype)    // {spacies: "dog"}

那么，就會在另外一個內存中存儲 Dog 的 prototype 對象（用橢圓形表示），如圖所示，構造函數的protype指向它的原型

現在我們用構造函數 Dog 來創建對象 dog1, dog2, ...

var dog1 = new Dog();
dog1.name = "大黃";
dog1.color = "yellow";

var dog2 = new Dog();
dog2.name = "小黑";
dog2.color = "black";

console.log(dog1.name)     // 大黃
console.log(dog2.name)     // 小黑
console.log(dog1.spacies)  // dog
console.log(dog2.spacies)  // dog
console.log(dog1.constructor === Dog)   // true

可以看到由構造函數創造的對象dog1，dog2，他們的constructor指向構造函數Dog，而他們的__proto__指向Dog的prototype，而且當調用對象的一個屬性或方法時，首先會找對象本身的屬性或方法，找不到時，會找該對象的__proto__對象（也就是構造函數的prototype對象），以此類推，會找原型鏈上所有對象有沒有該屬性，如果找到則返回該屬性的值，如果還是找不到則返回undefined
另外可以看出來dog1，dog2，...的__proto__指向同一塊內存地址，這樣設計是為了節省內存資源,不用每次創建都存儲他們相同的屬性，當修改dog1的__proto__時，dog2的__proto__也會改變

dog1.__proto__.spacies = "animal"; // 或者Dog.prototype.spacies = "animal"
console.log(dog2.spacies)    // animal

上面也說到了，每一個對象都有自己的__proto__，而作為構造函數Dog的prototype對象，也會有自己的對象原型，以此類推，原型鏈的頂端是一個null,如圖的紅線串起來的鏈就是原型鏈

額，來一個句話收尾吧，這是我自己對原型連的理解，歡迎探討

參考

Javascript繼承機制的設計思想
prototype 對象

云服務器 GPU云服務器圖說區塊鏈原型原型鏈原型鏈原型鏈繼承

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

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

圖說原型鏈

摘要：前言說到原型鏈，中，萬物皆對象，而規定，所有對象都有自己的原型對象，一方面，任何對象都可以充當其他對象的原型，另一方面，原型也是對象，也擁有自己的原型，因此形成的鏈就是原型鏈。前言說到原型鏈，javascript 中，萬物皆對象，而 javascript 規定，所有對象都有自己的原型對象(prototype) ，一方面，任何對象都可以充當其他對象的原型，另一方面，原型（protot...

WelliJhon 2019-08-22 17:26 評論0 收藏0
Javascript 原型鏈

摘要：先來一張圖看看幾個名詞的關系構造函數原型實例原諒我的狂草字體，我手寫比用電腦畫快。今天我們只說原型鏈，所以接下來我就圍繞著原型鏈的幾個部分說起。每個函數都有一個屬性借用屬性存儲了的原型對象。先來一張圖看看幾個名詞的關系構造函數、原型、實例 showImg(https://segmentfault.com/img/remote/1460000018194082); 原諒我的狂草字體，...

nanfeiyan 2019-08-23 15:17 評論0 收藏0
圖說 WebAssembly（五）：高性能原因

摘要：本文是圖說系列文章的第五篇。這樣的話，使用的開發者也不需要做任何適配，但是它們卻能獲得更高性能。該圖并不是用來準確的衡量其性能的。運行編寫出高性能的代碼是可能的。這種清理工作由引擎自動進行，稱為垃圾回收。本文是圖說 WebAssembly 系列文章的第五篇。如果您還未閱讀之前的文章，建議您從第一篇入手。在上一篇文章中，我們說到了使用 WebAssembly 和 JavaScript...

seal_de 2019-08-22 16:59 評論0 收藏0
圖說 WebAssembly（四）：快速入門

摘要：本文是圖說系列文章的第四篇。它們表示一種可以在普遍流行機器上高效使用的指令集合。這是因為是一種稱為堆棧機器。盡管是根據堆棧機器來設計的，但是這并不是它在真實物理機器上工作的方式。這些內容稱為段。本文是圖說 WebAssembly 系列文章的第四篇。如果您還未閱讀之前的文章，建議您從第一篇入手。 WebAssembly 是一種使得除 JavaScript 以外的編程語言也能運行在網頁上...

BoYang 2019-08-22 17:00 評論0 收藏0
圖說 Firefox 全新 CSS 引擎

摘要：的主要組件包含了一個全新的引擎，稱為量子，也稱為。這個新引擎集成了四種不同瀏覽器的最新創新技術，創造出一個全新的超級引擎。這可以發生在多個圖層上。最終，擁有最高特異性的規則會勝出。原文：Inside a Super Fast CSS Engine: Quantum CSS(Aka Stylo), Lin Clark 注：原文發布于 2017 年 8 月，本文翻譯于 2018 年 4 ...

lsxiao 2019-08-29 15:06 評論0 收藏0