javaScript 中原型與原型鏈是什么

javaScript 中原型與原型鏈是什么？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

javascript欄目簡單明了介紹原型與原型鏈。

在 JavaScript 中，原型和原型鏈是不可避免的重要概念，那么怎么去理解原型和原型鏈呢？下面是我對原型和原型鏈的理解和總結。也許有些理解還比較淺薄，隨著時間的推移和理解的深入，以后還會補充。如果大家發現我理解的有問題，歡迎大家在評論中指正。

1. 為什么 javaScript 設計為基于原型的模式

在以往的學習過程中，我們曾通過學習面向對象語言 java 了解到其有三個要素：封裝、繼承、多態。關于繼承，java 與 javascript 其實兩者并不完全一樣。
      那么 javascript 到底是如何設計出來的呢？早期，瀏覽器只能瀏覽網頁內容，而不能進行用戶交互，也就說當我們輸入賬號密碼進行登錄時，瀏覽器不能對其輸入內容進行判斷，需要通過服務器進行判斷，而網景公司為了解決這一問題，發明一種與 java 搭配使用的輔助腳本語言，并在語法上有些類似。由此可以看出，javascript 受到 java 的影響，其都是對象類型，有對象則就會涉及到繼承機制，那么JS的繼承機制是怎么樣呢？
      JS參考java的設計，使用new操作符生成對象，但其與java不同的是new后面跟的是 Construtor 而不是 Class 。

// java 中生成一個對象
Person p = new Person() // Person 指的是類名

// js 生成一個對象
function Person (age) {
    this.age = age
    this.nation = 'China'
}
var father = new Person(42) // Person 指的是構造函數
var mingming = new Person(11)復制代碼

2. 構造函數 Constructor

構造函數也是普通函數，其也有 prototype 屬性，與普通函數的區別是其要求首字母大寫。若構造函數使用new操作符調用時，其需要執行四個步驟：
      1. 創建一個新的對象
      2. 將 this 指向這個新的對象
      3. 執行構造函數，給新對象添加屬性和方法
      4. 返回這個新對象

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log('eat')
    }
}
var food = new Food('banana')復制代碼

3. 原型 prototype

任何一個函數都有一個 prototype 屬性，它指向 prototype 對象。那么原型其實就是一個對象，在原型上定義的屬性，通過繼承（new 操作符實現），實例化的對象也擁有了該屬性。
      原型與構造函數的關系：構造函數內有一個 prototype 屬性，通過該屬性可以訪問到原型。

以構造函數中的代碼為例，Food 就是構造函數，Food.prototype 就是原型，food 就是參照 Food.prototype 生成的一個對象。

4. 實例 instance

實例是指一個構造函數在原型上創建可以"繼承"的屬性和方法，并通過new操作符創建的對象。

簡單來說，我們使用 new 操作符創建一個 food 實例，并且可以通過 instanceof 檢驗實例與構造函數之間的關系。

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log('eat')
    }
}
var food = new Food('banana')  // 實例化
var res = food instanceof Food // 檢查 food 是否為 Food 實例
console.log(res) // true復制代碼

當我們在原型上定義一個屬性時，實例也會"繼承"這個屬性。

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log('eat')
    }
}
var food = new Food('banana')  // 實例化
var res = food instanceof Food // 檢查 food 是否為 Food 實例
console.log(res) // true

// 原型定義屬性
Food.prototype.type = 'object named Food'
var foodRes = food.type // 實例繼承的屬性
console.log(foodRes) // object named Food復制代碼

5. 隱式原型 __proto__

任何對象在創建時都會有一個 __proto__ 屬性，它指向產生當前對象的構造函數的原型對象。由于該屬性并非標準規定的屬性，所以不要隨便去更改該屬性的值，以免破壞原型鏈。也就是說，實例可以通過 __proto__ 屬性訪問到原型。

對象中的 __proto__ 屬性在所有實現中是無法訪問到的，但是可以通過 isPrototypeOf() 方法來確定對象之間是否存在著這種關系。

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log('eat')
    }
}
var food = new Food('banana')  // 實例化
console.log(food.__proto__ === Food.prototype) // true
console.log(Food.prototype.isPrototypeOf(food)) // true復制代碼

6. 構造函數 constructor

構造函數可以通過 prototype 屬性訪問到原型，那么原型也是能夠通過某種途徑訪問到構造函數的，其就是原型中的一個屬性 constructor ，該屬性并不是真正的構造函數，真正的構造函數是指 Constructor，兩者不要混淆了。

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log('eat')
    }
}
var food = new Food('banana')
console.log(Food.prototype.constructor === Food) //true復制代碼

關鍵：prototype 的 constructor 指向構造函數本身    

那么構造函數、原型、實例三者的關系應該是這樣的：

為了更好地理解這一過程，我通過一個故事給大家梳理一下：
      1. 很久以前，有個雕刻家偶然看到一個很精致的花瓶（原型 Food.prototype）
      2. 一天，他想通過大批生產復刻這個花瓶來發家致富，于是他先分析這個花瓶，還原了雕刻的過程，并設計出了一條生產線（構造器 Food）
      3. 然后通過這條生產線，雕刻出許許多多的復刻花瓶。（實例 food）

7. 原型鏈

proto 是任何對象都有的屬性，在js中會形成一條 proto 連接起來的鏈條，遞歸訪問 proto 直到值為 null ，這個搜索過程形成的鏈狀關系就是原型鏈。

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log('eat')
    }
}
var food = new Food('banana')  // 實例化
// 原型鏈
console.log(food.__proto__) // Food {}
console.log(food.__proto__.__proto__) // {}
console.log(food.__proto__.__proto__.__proto__) // null復制代碼

如下圖：

總結

1. 每創建一個函數都會有一個 prototype 屬性，該屬性是一個指針，指向一個對象，該對象為原型對象（Food.prototype）。
      2. 原型對象上的默認屬性 constructor 也是一個指針，指向其相關的構造函數。
      3. 通過 new 操作符產生的實例對象都會有一個內部屬性指向原型對象，該實例對象可以訪問原型對象上的所有屬性和方法。
      4. 實例可以通過內部指針訪問到原型對象，原型對象也可以通過 constructor 找到構造函數。
      5. 每個構造函數都有一個原型對象，原型對象上包含一個指向構造函數的指針，實例包含一個指向原型對象的內部指針。
      6. __proto___ 的指向取決于對象創建時的實現方式。
      7. 構造函數實例，封裝的函數，如果通過 new 操作符來調用則是構造函數，否則則不是。           8. 在整個原型鏈上尋找某個屬性，對性能有影響，越是上層的原型對象，對性能的影響越大。
      9. js中一切皆對象，通過 new Function 的是函數對象，其構造函數是 Function，而普通對象的構造函數則是 Object 。
      10. 每一個對象都有 __proto__ 屬性，而每一個函數對象才有 prototype 屬性。

感謝各位的閱讀！看完上述內容，你們對javaScript 中原型與原型鏈是什么大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。