JavaScript原型及實例分析

今天就跟大家聊聊有關JavaScript原型及實例分析，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

構造函數 實例 原型三者的關系

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中是怎么實現這個共享機制的呢?

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

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

搜索過程如下:

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

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

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

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

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

看完上述內容，你們對JavaScript原型及實例分析有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。