文章目錄
- 建構式 實體 原型三者的關系
- 注意
- prototype屬性
- 屬性或成員的搜索原則
建構式 實體 原型三者的關系
1.任何函式都有一個prototype屬性,該屬性是一個物件
function F () {}
console.log(F.prototype) // => object
//原型物件
F.prototype.sayHi = function () {
console.log('hi!')
}
2.建構式的prototype物件默認都有一個constructor屬性,指向prototype物件所在函式
console.log(F.constructor === F) // => true
//表示這個
3.通過建構式得到的實體物件內部會包含一個指向建構式的prototype物件的指標_proto_
var instance = new F()
console.log(instance.__proto__ === F.prototype) // => true
意思是用當前建構式創建的實體物件內部都包含一個指標,這個指標就是_proto_,然后這個指標是指向建構式的prototype物件的
因此我們可以直接用實體訪問原型物件上的成員
例:
instance.sayHi() // => 列印hi!
注意
_proto_是一個非標準屬性
prototype屬性
Javascript 規定，每一個建構式都有一個 prototype 屬性，指向另一個物件，
這個物件的所有屬性和方法，都會被建構式的實體繼承，
這也就意味著，我們可以把所有物件實體需要共享的屬性和方法直接定義在prototype物件上，
例子:
function Person (name, age) {
this.name = name
this.age = age
}
console.log(Person.prototype)//列印原型
Person.prototype.type = 'human'//將human掛載到原型物件的屬性上
Person.prototype.sayName = function () {//還可以定義函式
console.log(this.name)
}
let p1 = new Person(...)
let p2 = new Person(...)
console.log(p1.sayName === p2.sayName) // => true
我們可以看到console.log(p1.sayName === p2.sayName)這行代碼列印的結果是true
這是因為所有實體的type屬性和sayName()方法都是一個同一個記憶體地址,都是指向prototype物件,因此提高了運行效率
屬性或成員的搜索原則
我們知道了多個實體物件是可以共享原型物件中的屬性或成員的,那么js中是怎么實作這個共享機制的呢?
這就不得不提到屬性的搜索原則了
每當代碼讀取某個實體物件的某個屬性時,都會執行一次搜索,搜索目標是具有給定名字的屬性或者成員
搜索程序如下:
- 首先從物件實體本身開始搜索
- 如果在實體物件中找到了具有給定名字的屬性,則回傳該屬性的值
- 如果沒有找到,則繼續搜索實體物件中含有的指標(上文中講過)指向的原型物件,在原型物件中查找具有給定名字的屬性
- 如果在原型物件中找到了這個屬性,則回傳該屬性的值
在執行instance.sayName()時,會執行兩次搜索,第一次搜索實體物件,第二次搜索原型物件
以上就是多個實體物件共享原型所掛載的屬性和方法的基本原理!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/392150.html
標籤：其他