圖說原型鏈

2019年8月24日 168次阅读 来源: leizore

媒介

說到原型鏈，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 對象

    原文作者：leizore
    原文地址: https://segmentfault.com/a/1190000014961257
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞