js原型和原型鏈 如何講清楚JS原型鏈?

2021-10-11 13:41:25 字數 2779 閱讀 4631

上面這段**,是乙個典型的單向鍊錶

我們只能通過n.next來找到下乙個節點

但是沒有辦法從當前節點找到上乙個節點

不過這和原型鏈有什麼關係呢? 目前還沒有關係。

分析上面這段**

為什麼obj明明是空的,卻還能呼叫tostring方法?

tostring方法是**來的呢?

再比如我們的陣列物件

其實,這些方法都來自於乙個叫做原型的傢伙

我們可以使用 物件.__proto__的形式把原型物件列印出來

這是所有物件的乙個隱式屬性, 也就是正常情況下列印物件, 我們是看不到這個屬性的

但我們依然可以通過__proto__這樣乙個比較奇怪的屬性名字來訪問原型物件

這個屬性名稱訪問起來確實不夠方便,實際上它還有另外一種訪問方式

也是一種比較正式的訪問方式, 就是通過函式名來訪問

例如看下面這個例子

廢話不多說, 我們來試驗一下, 就知道結果

在上面的**中,我們建立乙個建構函式phone

同時我們給原型物件,新增了price、color兩個屬性

同時新增了playmusic、phonecall兩個方法

接下來我們通過例項物件來訪問一下這些內容

這是一道非常簡單的數學證明題,證明過程如下:

我們再來試驗一下

可以看到, 如果物件本身存在這個屬性或方法, 會優先訪問自己的

如果沒有, 則訪問原型的屬性, 訪問過程如下圖

請你再思考乙個問題

如果原型也是乙個物件

那麼它必然也應該有自己的原型物件,不是嗎?

我們可以通過p1.__proto__.__proto__進行訪問

我們把圖畫的再簡單一點

從圖中可以看出,只要原型物件一直存在

物件p1就擁有了所有原型物件的能力, 我們也管這個叫做繼承

而這些原型物件之間是什麼關係呢?

p1p1.__proto__p1.__proto__.__proto__p1.__proto__.__proto__.__proto__
原型鏈, 因此而得名

原型物件真的沒有盡頭嗎?

當然不是的, 原型物件由瀏覽器自動建立, 當然也有它自己的規則

規則如下:

1.每個建構函式在誕生的時候, 都會建立乙個該函式的例項物件作為預設原型

相當於 phone.prototype = new phone();

2.而這個原型物件的原型, 則預設指向object.prototype

相當於 phone.prototype.__proto__ = object.prototype;

3.當然, object.prototype 也是它自己的例項

相當於 object.prototype = new object();

4. 但是, object.prototype不再擁有原型物件

相當於 object.prototype.__proto__ = null

5. 因此,原型物件是有上限的

p1.__proto__ 可訪問

p1.__proto__.__proto__ 可訪問

p1.__proto__.__proto__.__proto__ 為null

JS原型和原型鏈

建立建構函式 function word words word.prototype 建立例項 var w new word hello world w.print function w.print hello world w.alert hello world function.prototype....

js原型鏈和原型

1 原型 在js中一切皆物件,那原型也是乙個物件,通過原型可以實現物件的屬性繼承,js的物件中包含著乙個 prototype 內部屬性,這個屬性所對應的就是物件的原型。prototype 作為物件的內部屬性不能被直接訪問,所以為了方便檢視乙個物件的原型,提供了 proto 這個非標準的訪問器,在js...

JS 原型和原型鏈

先宣告乙個建構函式 function people name,age 把類的方法寫在建構函式原型物件中,子類就不能再通過呼叫父類建構函式來繼承方法 屬性還是可以繼承 給people的原型新增方法 people.prototype.speak function 建立子類繼承people functio...