構(gòu)造函數(shù) 實例 原型三者的關(guān)系

1.任何函數(shù)都有一個prototype屬性,該屬性是一個對象

function F () {}
console.log(F.prototype) // => object
//原型對象
F.prototype.sayHi = function () {
  console.log('hi!')
}

2.構(gòu)造函數(shù)的prototype對象默認都有一個constructor屬性,指向prototype對象所在函數(shù)

console.log(F.constructor === F) // => true
//表示這個

3.通過構(gòu)造函數(shù)得到的實例對象內(nèi)部會包含一個指向構(gòu)造函數(shù)的prototype對象的指針_proto_

var instance = new F()
console.log(instance.__proto__ === F.prototype) // => true

意思是用當前構(gòu)造函數(shù)創(chuàng)建的實例對象內(nèi)部都包含一個指針,這個指針就是_proto_,然后這個指針是指向構(gòu)造函數(shù)的prototype對象的

因此我們可以直接用實例訪問原型對象上的成員

例:

instance.sayHi() // => 打印hi!

注意

_proto_是一個非標準屬性

prototype屬性

Javascript 規(guī)定，每一個構(gòu)造函數(shù)都有一個 prototype 屬性，指向另一個對象。
這個對象的所有屬性和方法，都會被構(gòu)造函數(shù)的實例繼承。

這也就意味著，我們可以把所有對象實例需要共享的屬性和方法直接定義在prototype對象上。

例子:

function Person (name, age) {
  this.name = name
  this.age = age
}
console.log(Person.prototype)//打印原型
Person.prototype.type = 'human'//將human掛載到原型對象的屬性上
Person.prototype.sayName = function () {//還可以定義函數(shù)
  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)這行代碼打印的結(jié)果是true

這是因為所有實例的type屬性和sayName()方法都是一個同一個內(nèi)存地址,都是指向prototype對象,因此提高了運行效率

屬性或成員的搜索原則

我們知道了多個實例對象是可以共享原型對象中的屬性或成員的,那么js中是怎么實現(xiàn)這個共享機制的呢?

這就不得不提到屬性的搜索原則了

每當代碼讀取某個實例對象的某個屬性時,都會執(zhí)行一次搜索,搜索目標是具有給定名字的屬性或者成員

搜索過程如下:

1.首先從對象實例本身開始搜索

2.如果在實例對象中找到了具有給定名字的屬性,則返回該屬性的值

3.如果沒有找到,則繼續(xù)搜索實例對象中含有的指針(上文中講過)指向的原型對象,在原型對象中查找具有給定名字的屬性

4.如果在原型對象中找到了這個屬性,則返回該屬性的值

在執(zhí)行instance.sayName()時,會執(zhí)行兩次搜索,第一次搜索實例對象,第二次搜索原型對象

總結(jié)

以上就是多個實例對象共享原型所掛載的屬性和方法的基本原理!

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

最新評論