一、 記住以下5句話，輕松搞定js原型鏈
- Function 和 Object 都是建構式
- 所有的建構式都是Function new出來的（Function自己new了自己）；所有的原型物件都是Object new出來的（Object new了自己的原型物件）
- 每一個建構式都有一個prototype屬性指向其原型物件；每一個實體物件都有一個_ _ proto _ _ 屬性；實體物件的_ _ proto _ _ 等于其建構式的prototype
- 每一個原型物件都有一個天生屬性constructor,指向其對應的建構式
- 底層規定Object.prototype._ _ proto _ _ 等于null
二、下邊我們結合一小段代碼來詳細說明原型鏈的畫圖程序
function Game(brand,name,price) {
this.price= price;
this.brand = brand;
this.name = name;
}
var g1 = new Computer('EA','彩虹六號','200rmb');
1.根據上邊的代碼我們先定義了一個建構式叫做Game，假設Game在堆記憶體中的地址為0x100；并通過它new出了一個實體物件g1，g1在堆記憶體中的地址為0x200，建構式Game有天生屬性prototype，并指向其原型物件（在堆記憶體中的地址為0x300）），實體物件g1具有天生屬性_ _ proto _ _ ，并指向其建構式的原型物件；原型物件具有天生屬性constructor指向其對應的建構式，然后我們得到如下圖：
2.由于所有的原型物件都是Object（0x400） new 出來的，所以0x300這個原型物件同時也是Object的一個實體物件，既然是實體物件就具有天生屬性_ _ proto _ _ ，并指向其建構式的原型物件（0x500）；因為Object自身也是一個建構式，所以其也有天生屬性prototype,并指向其原型物件（0x500）；又因為所有的原型物件都是Object（0x400） new 出來的，所以0x500這個原型物件也是Object new出來的，因為0x500是Object的原型物件，所以0x500的天生屬性constructor指向Object;由于底層規定Object.prototype._ _ proto _ _ 等于null，然后我們得到如下圖：
3.我們再來看建構式，由于所有的建構式都是Function new出來的，所以Function（0x600） new出了自己、Object、Game這三個建構式，那么這三個建構式都是Function的實體物件，它們的_ _ proto _ _ 都指向Function的prototype（0x700），0x700的天生屬性constructor又指向0x600；由于0x700是Object new 出來的，所以0x700的_ _ proto _ _ 指向Object 的原型物件0x500,最終我們得到如下終極原型鏈圖：
如有錯誤，歡迎斧正；如有疑問，歡迎留言討論，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/231015.html
標籤：其他
下一篇：瀏覽器渲染網頁程序