原型鏈是一種機制，指的是JavaScript每個對象包括原型對象都有一個內(nèi)置的[[proto]]屬性指向創(chuàng)建它的函數(shù)對象的原型對象，即prototype屬性。 作用：原型鏈的存在，主要是為了實現(xiàn)對象的繼承。

一、 記住以下5句話，輕松搞定js原型鏈

• Function 和 Object 都是構(gòu)造函數(shù)
• 所有的構(gòu)造函數(shù)都是Function new出來的（Function自己new了自己）；所有的原型對象都是Object new出來的（Object new了自己的原型對象）
• 每一個構(gòu)造函數(shù)都有一個prototype屬性指向其原型對象；每一個實例對象都有一個_ _ proto _ _ 屬性；實例對象的_ _ proto _ _ 等于其構(gòu)造函數(shù)的prototype
• 每一個原型對象都有一個天生屬性constructor,指向其對應的構(gòu)造函數(shù)
• 底層規(guī)定Object.prototype._ _ proto _ _ 等于null

二、下邊我們結(jié)合一小段代碼來詳細說明原型鏈的畫圖過程

function Game(brand,name,price) {
  this.price= price;
  this.brand = brand;
  this.name = name;
 }
 var g1 = new Game('EA','彩虹六號','200rmb');

1.根據(jù)上邊的代碼我們先定義了一個構(gòu)造函數(shù)叫做Game，假設Game在堆內(nèi)存中的地址為0x100；并通過它new出了一個實例對象g1，g1在堆內(nèi)存中的地址為0x200。構(gòu)造函數(shù)Game有天生屬性prototype，并指向其原型對象（在堆內(nèi)存中的地址為0x300）），實例對象g1具有天生屬性_ _ proto _ _ ，并指向其構(gòu)造函數(shù)的原型對象；原型對象具有天生屬性constructor指向其對應的構(gòu)造函數(shù)。然后我們得到如下圖：

2.由于所有的原型對象都是Object（0x400） new 出來的，所以0x300這個原型對象同時也是Object的一個實例對象，既然是實例對象就具有天生屬性_ _ proto _ _ ，并指向其構(gòu)造函數(shù)的原型對象（0x500）；因為Object自身也是一個構(gòu)造函數(shù)，所以其也有天生屬性prototype,并指向其原型對象（0x500）；又因為所有的原型對象都是Object（0x400） new 出來的，所以0x500這個原型對象也是Object new出來的，因為0x500是Object的原型對象，所以0x500的天生屬性constructor指向Object;由于底層規(guī)定Object.prototype._ _ proto _ _ 等于null，然后我們得到如下圖：

3.

我們再來看構(gòu)造函數(shù)，由于所有的構(gòu)造函數(shù)都是Function new出來的，所以Function（0x600） new出了自己、Object、Game這三個構(gòu)造函數(shù)，那么這三個構(gòu)造函數(shù)都是Function的實例對象，它們的_ _ proto _ _ 都指向Function的prototype（0x700），0x700的天生屬性constructor又指向0x600；由于0x700是Object new 出來的，所以0x700的_ _ proto _ _ 指向Object 的原型對象0x500,最終我們得到如下終極原型鏈圖：

到此這篇關于js原型鏈的文章就介紹到這了,更多相關js原型鏈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論