前言
原型鏈這部分的概念對於前端開發人員，一直是一個難點，尤其是es6語法中還引入了class關鍵字，我們可以通過更直觀的方式使用js對象繼承等功能。本以爲原型鏈相關知識現在只有在面試中用到了，但最近發現在研究lodash、vue等項目的源碼架構時，才發現原型鏈相關知識點是必知必會的。
要想更好的瞭解原型鏈相關知識點，先給出幾條基礎定義。
- 一切都是對象
- Function的構造函數是它本身
- __proto__和constructor屬性是對象所獨有的
- prototype屬性是函數所獨有的
1.constructor構造函數
function Person () {}
let person1 = new Person()
以上代碼中，Person就是一個構造函數，通過new關鍵字創建了一個它的實例對象,用代碼表示這兩個對象的關係如下。
person1.constructor === Person //true
問題來了，如果想讓Person構造函數實例出的對象都擁有某些相同的屬性該怎麼操作呢？
接下來原型對象prototype順利登場
2.prototype原型對象
function Person () {}
let person1 = new Person()
Person.prototype.head = 1
console.log(person1.head) // 1
給構造函數的原型對象上添加的屬性，該構造函數的實例對象都可以直接訪問，是不是很簡單？
再來思考一個問題，如果實例對象想要直接操作其構造函數的原型對象要怎麼操作呢？
接下來出場的是__proto__隱式原型鏈
3.__proto__ 隱式原型鏈
__proto__屬性的兩邊是各由兩個下劃線構成，在ECMA標準中也被稱爲[[Prototype]],瀏覽器中操作這個對象還是需要命名爲__propo__。先來一段官方定義
ECMAScript標準，someObject.[[Prototype]] 符號是用於指向 someObject 的原型。從 ECMAScript 6 開始，[[Prototype]] 可以通過 Object.getPrototypeOf() 和 Object.setPrototypeOf() 訪問器來訪問。這個等同於 JavaScript 的非標準但許多瀏覽器實現的屬性
__proto__。被構造函數創建的實例對象的 [[Prototype]] 指向 func 的 prototype 屬性。Object.prototype 屬性表示 Object 的原型對象。
看的有點迷糊？沒關係，下面還是最簡單的代碼展示。
function Person () {}
let person1 = new Person()
Person.prototype.head = 1
console.log(person1.head) // 1
person1.__propo__.head = 3
console.log(person1.head) // 3
4.圖解及總結
以上三條相信大家都已經看明白了，接下來讓我們把這三條知識點串聯起來。
- Person可以使用new關鍵字構造一個person1的實例，Person是person1的構造函數
- Person.prototype的構造函數是Person
- person1的隱式原型鏈
__proto__指向其構造函數的原型對象
5.後續
以上就是小白也能徹底理解的prototype原型鏈系列的第一篇文章，後續還會講到Function、Object等對象的完整原型鏈以及原型鏈在框架/組件源碼中靈活使用。
爲了保證文章質量，暫無法給出明確的完成時間~請各位多多包函與理解。