js中原型以及原型鏈
什么是原型物件
每個函式身上都有一個原型，我們稱之為 原型物件
函式的 prototype 屬性指向原型物件，原型物件上的 constructor 指回建構式
廢話少說，直接看代碼
function Person() {
this.uname = '張三',
this.age = 22
}
// 原型物件
Person.prototype.sex = '男'
Person.prototype.head = 1
Person.prototype.sayName = function () {
console.log('說名字')
}
console.log(Person.prototype)
// Person.prototype.constructor 指回建構式
console.log(Person.prototype.constructor)
// 實體化物件
let per = new Person()
console.log(per)
console.log(per.head) // 1
原型物件如圖( console.log(Person.prototype) )
我們 console.log(per.head) 會看到如圖列印結果 1
原型物件中 constructor 指回了建構式 Person ，而建構式里面的 prototype 又指向了原型物件，在原型物件上添加的屬性或者方法，實體化物件可以直接訪問，比如在原型上添加的 head 屬性，通過實體物件可以直接訪問到并且在控制臺輸出 1，其實函式身上的很多內置的方法就是在他的原型物件上，下圖可以看出在建構式原型上添加的屬性方法
實體化物件如圖
實體化物件的__proto__ 也是指向原型物件，只能看，不能訪問，在原型上定義的屬性或者方法都可以看到，可以看到原型物件里面的 constructor 指回了建構式 Person，通過 console 列印可以看到建構式 Person
原型鏈
我們還是拿到上面的代碼進行分析
function Person() {
this.uname = '張三',
this.age = 22
}
// 原型物件
Person.prototype.sex = '男'
Person.prototype.head = 1
Person.prototype.sayName = function () {
console.log('hello javascript')
}
function Chinese() {
this.eat = function() {
console.log('eat')
}
}
// 讓 Chinese 建構式的原型物件等于 Person 的實體
Chinese.prototype = new Person()
// 實體化 Chinese
let chinese = new Chinese()
console.log(chinese)
chinese.sayName()
上面代碼可以分析出 Chinese 的原型是 Person 實體化物件，sayName 方法定義在 Person 建構式的原型上
但是，我們直接在 Chinese 實體化物件上訪問 sayName 方法也可以( chinese.sayName() )，會在控制臺輸出里面的內容 “hello javascript”，因此，從代碼列印結果分析，原型物件、建構式、實體化物件的關系
呼叫一個物件上的屬性或方法，會先在自身上面找，找不到會去原型物件上找，自身的原型物件上沒有會沿著__proto__ 繼續向上級的原型物件上找，找不到就會回傳 null
這種有原型串聯起來的鏈狀結構就稱之為原型鏈，作用：提供了查找機制，例如物件的屬性、方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293993.html
標籤：其他