成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

圖說原型鏈

WelliJhon / 1106人閱讀

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

前言

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

圖解

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

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

設(shè)置構(gòu)造函數(shù)的原型函數(shù)（prototype）

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

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

現(xiàn)在我們用 構(gòu)造函數(shù) Dog 來創(chuàng)建對象 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

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

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

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

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

參考

Javascript繼承機制的設(shè)計思想
prototype 對象

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

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

相關(guān)文章

  • 圖說原型鏈

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

    Shonim 評論0 收藏0

  • Javascript 原型鏈

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

    nanfeiyan 評論0 收藏0

  • 圖說 WebAssembly（五）：高性能原因

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

    seal_de 評論0 收藏0

  • 圖說 WebAssembly（四）：快速入門

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

    BoYang 評論0 收藏0

  • 圖說 Firefox 全新 CSS 引擎

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

    lsxiao 評論0 收藏0

發(fā)表評論

0條評論

WelliJhon

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<