JS原型與繼承（三）原型鏈

先把基本**拿出來：

function
person
(name)
var p1 =
newperson
('張三'
)

很重要的幾個知識點:1.在物件中查詢乙個屬性時，會先從本身查詢，如果查詢不到會到prototype中查詢。即可以引申，所有物件中都有constructor （這個屬性是在prototype中的）

2.原型鏈就是圍繞這__proto__、prototype、constructor展開的

console.
dir(p1)

列印如圖：

可以看到的，p1.__proto__(這個相當於person.prototype)中還有乙個__proto__屬性。並且他也告訴我們指向的是object.prototype我們可以驗證一下：

console.
log(p1.__proto__.__proto__ === object.prototype)
//true

答案是true。證明這倆指向同乙個物件。

再繼續往下鑿試試：既然p1.__proto__.__proto__存在，那後面再加乙個__proto__會是什麼樣子呢？

console.
log(p1.__proto__.__proto__.__proto__)
//null
//等價於object.prototype.__proto__ == null

結果是null。那麼這條線就鑿到頭了。（總不會有人問null.__proto__為不會有東西吧。。）我們用圖來看看鑿出來的是啥。

以上就是p1.__proto__這條線形成的鏈條，即：

p1.proto->person.prototype

person.prototype.proto->object.prototype

object.prototype.proto-> null

先列印peron：

console.
dir(person)

如圖：

可以看到，person裡也有乙個__proto__，那麼這個__proto__又是指向那個物件的prototype呢？

這裡就不賣關子了，這個物件就是function。並且這玩意還有點特殊。現在來一步一步分析它。

驗證person.__proto__ == function.prototype

console.
log(person.__proto__ === function.prototype)
//true

答案是true，證明這倆玩意是指向同乙個物件的。

2.看看function長什麼樣子

這裡可以看到，prototype和__proto__指向的是同乙個物件（function.prototype），有興趣的朋友自行驗證。那麼這裡就會得到乙個很有趣的東西，function.__proto__ == function.prototype和funtion.constructors = function那麼原型鏈的補充為：

看圖，現在就還剩下function.prototype.__proto、object.__proto__、object.constructor沒有完成了

這裡就不驗證了，

function.prototype.__proto__->object.prototype,

object.__proto__->function.prototype

object.constructor->function

接下來就把補全：

JS原型與繼承（三）原型鏈

JS原型繼承與原型鏈（二）

Javascript基礎（三）原型和原型鏈

原型原型鏈與繼承

JS原型與繼承（三） 原型鏈

JS原型繼承與原型鏈（二）

Javascript基礎（三）原型和原型鏈

原型 原型鏈與繼承

相關推薦

JS原型與繼承（三）原型鏈

原型原型鏈與繼承