簡單易懂解析JS原型與原型鏈

這次帶給大家簡單易懂解析JS原型與原型鏈，解析JS原型與原型鏈的注意事項有哪些，以下就是實戰案例，一起來看一下。

Browser中的物件

瀏覽器中有哪些物件？ ES中規定全域物件為global，而瀏覽器中規定全域物件為window。

在chrome控制台中輸入window，我們就能看到window裡面有哪些內容。

下面的這些物件在window裡都能找到。
如Object，Sring，Numbr，Boolean，Array，Date，Math，parseInt, parseFloat這些屬性都是ES規定的必須有的物件。
如doucument，alert，prompt，atob等這些是瀏覽器中內建的屬性。

這些物件都具有hash結構，如Object下，String下都有自己的屬性和方法，都有對應的API呼叫。

簡單型別和物件

範例如下：n1是簡單型別，n2是物件。

var n1 = 'a'var n2 = new String('a')
n1.length
n1.hasOwnProperty('0')
n2.length
n2.hasOwnProperty('0')
n1.xxx = 2n1.xxx // undefined

區別

n1值是儲存在stack中。 n2賦值時，stack中建立一個位址，指向heap中，在堆記憶體中新建了一個String類型的物件。能看到物件n2裡有一些屬性，還有prototype屬性。

屬性

n2是對象，裡面有length屬性，所以呼叫。 n1只是字串，為何也有length屬性

可以這樣理解：n1.length時，這時js會進行以下操作：var temp = new String(n1);n1.length ;也就是使用屬性，或方法時，會暫時的在堆記憶體中新建一個對象，這個物件是對應的String類型，執行後，temp便被銷毀。因此n1.xxx = 2操作不會報錯，而再次n1.xxx顯示undefined，因為此時n1在堆內存中的資料已經銷毀了。

因此，js中，很少使用new一個新物件的方法，而是直接對變數進行賦值。

n2中的hasOwnProperty()

hasOwnProperty()是Object類別型中的方法，Sting類型下並沒有找到它，在哪裡找到它？

這裡hasOwnProperty()是在n2.proto.proto裡面。 n2.proto指向的是String.prototype，而String.prototype.proto最後指向Object.prototype。 String是一種原型，Object也是一種原型。 Object.prototype中存放了所有Object類型的公共屬性。

以這種方式，能有效的節省空間，避免每個物件裡面都記錄很多的屬性，一個object裡沒有的屬性，就到proto指向的物件裡面尋找。而指向的地方通常是某個原型的prototype。

去哪裡找 proto和prototype

var n = new Number(1)var s= new String('1')var o= new Object()

以上幾種方式都能看成 var 物件 = 函數()的形式。
歸納出，物件.proto =函數.prototype。

訪問 proto

proto是相對於物件來說，找爸爸，看是誰產生的物件。對n來說，爸爸是Number，就去Number.prototype裡面找。 Number裡也有proto，訪問時，到它的爸爸Object裡面找。

Function
String.proto === Function.prototype //true

函數也能看作是對象，String,Object,Number都是對象，也都是函數。因為之前用到了new String()，所以這是函數，函數return結果的資料型別為object。 String的爸爸便是Function。

Function.proto === Function.prototype //trueFunction.prototype.proto === Object.prototype //trueFunction.proto.proto === Object.prototype //true

當把函數Function看成是由Function方法產生的物件時，
即var Function = new Function()
便能理解Function.proto == = Function.prototype

Fuction的型別是function，它是由Function建構出來的。關係從上圖可以看出來。 new String()時，String的型別也是function，String.proto指向的就是Function.prototype。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS中怎樣避免特性與瀏覽器推論

JS門面模式使用案例詳解

以上是簡單易懂解析JS原型與原型鏈的詳細內容。更多資訊請關注PHP中文網其他相關文章！