JS的原型、原型鏈一直是比較難理解的內容，不少初學者甚至有一定經驗的老鳥都不一定能完全說清楚，更多的"很可能"是一知半解，而這部分內容又是JS的核心內容，想要技術進階的話肯定不能對這個概念一知半解，碰到問題靠“猜”，卻不理解它的規則！
prototype
只有函式有prototype屬性
let a = {}
let b = function () { }
console.log(a.prototype) // undefined
console.log(b.prototype) // { constructor: function(){...} }
複製程式碼Object.prototype怎麼解釋？
其實Object是一個全域性物件，也是一個建構函式，以及其他基本型別的全域性物件也都是建構函式：
function outTypeName(data, type) {
let typeName = Object.prototype.toString.call(data)
console.log(typeName)
}
outTypeName(Object) //[object Function]
outTypeName(String) // [object Function]
outTypeName(Number) // [object Function]
複製程式碼為什麼只有函式有prototype屬性
JS通過new來生成物件，但是僅靠建構函式，每次生成的物件都不一樣。
有時候需要在兩個物件之間共享屬性，由於JS在設計之初沒有類的概念，所以JS使用函式的prototype來處理這部分需要被共享的屬性，通過函式的prototype來模擬類：
當建立一個函式時，JS會自動為函式新增prototype屬性，值是一個有constructor的物件。
以下是共享屬性prototype的栗子：
function People(name) {
this.name = name
}
People.prototype.age = 23 // 歲數
// 建立兩個例項
let People1 = new People('OBKoro1')
let People2 = new People('扣肉')
People.prototype.age = 24 // 長大了一歲
console.log(People1.age, People2.age) // 24 24
複製程式碼為什麼People1和People2可以訪問到People.prototype.age？
原因是：People1和People2的原型是People.prototype，答案在下方的：建構函式是什麼以及它做了什麼。
原型鏈
__proto__和Object.getPrototypeOf(target)： 物件的原型
__proto__是物件例項和它的建構函式之間建立的連結，它的值是：建構函式的`prototype。
也就是說：__proto__的值是它所對應的原型物件，是某個函式的prototype
Object.getPrototypeOf(target)全等於__proto__。
它是ES6的標準，相容IE9，主流瀏覽器也都支援，MDN，本文將以Object.getPrototypeOf(target)指代__proto__。
不要再使用__proto__:
本段摘自阮一峰-ES6入門，具體解析請點選連結檢視
-
__proto__屬性沒有寫入 ES6 的正文，而是寫入了附錄。 -
原因是它本質上是一個內部屬性，而不是一個正式的對外的 API，只是由於瀏覽器廣泛支援，才被加入了 ES6。
-
標準明確規定，只有瀏覽器必須部署這個屬性，其他執行環境不一定需要部署，而且新的程式碼最好認為這個屬性是不存在的。
-
所以無論從語義的角度，還是從相容性的角度，都不要使用這個屬性，應該使用：
Object.getPrototypeOf(target)（讀操作）、Object.setPrototypeOf(target)（寫操作）、Object.create(target)（生成操作）代替
建構函式是什麼、它做了什麼
出自《你不知道的js》：在js中, 實際上並不存在所謂的'建構函式'，只有對於函式的'構造呼叫'。
上文一直提到建構函式，所謂的建構函式，實際上就是通過關鍵字new來呼叫的函式：
let newObj = new someFn() // 構造呼叫函式
複製程式碼構造/new呼叫函式的時候做了什麼：
- 建立一個全新的物件。
- 這個新物件的原型(
Object.getPrototypeOf(target))指向建構函式的prototype物件。 - 該函式的this會繫結在新建立的物件上。
- 如果函式沒有返回其他物件，那麼new表示式中的函式呼叫會自動返回這個新物件。
- 我們稱這個新物件為建構函式的例項。
原型繼承就是利用構造呼叫函式的特性：
SubType.prototype = new SuperType(); // 原型繼承：SubType繼承SuperType
SubType.prototype.constructor = SubType // 重新指定constructor指向 方便找到建構函式
// 掛載SuperType的this和prototype的屬性和方法到SubType.prototype上
複製程式碼- 構造呼叫的第二點：將新物件的
Object.getPrototypeOf(target)指向函式的prototype - 構造呼叫的第三點：該函式的this會繫結在新建立的物件上。(所以父類
this宣告的屬性被所有子類例項共享) - 新物件賦值給
SubType.prototype
原型鏈是什麼
來看個例子：
function foo() { }
const newObj = new foo() // 構造呼叫foo 返回一個新物件
const newObj__proto__ = Object.getPrototypeOf(newObj) // 獲取newObj的原型物件
newObj__proto__ === foo.prototype // true 驗證newObj的原型指向foo
const foo__proto__ = Object.getPrototypeOf(foo.prototype) // 獲取foo.prototype的原型
foo__proto__ === Object.prototype // true foo.prototype的原型是Object.prototype
複製程式碼如果用以前的語法，從newObj查詢foo的原型，是這樣的：
newObj.__proto__.__proto__ // 這種關係就是原型鏈
複製程式碼可以用以下三句話來理解原型鏈：
- 每個物件都擁有一個原型物件:
newObj的原型是foo.prototype。 - 物件的原型可能也是繼承其他原型物件的:
foo.prototype也有它的原型Object.prototype。 - 一層一層的，以此類推，這種關係就是原型鏈。
一個物件是否在另一個物件的原型鏈上
如果一個物件存在另一個物件的原型鏈上，我們可以說：它們是繼承關係。
判斷方式有兩種，但都是根據建構函式的prototype是否在原型鏈上來判斷的：
instanceof: 用於測試建構函式的prototype屬性是否出現在物件的原型鏈中的任何位置
語法：object instanceof constructor
let test = function () { }
let testObject = new test();
testObject instanceof test // true test.prototype在testObject的原型鏈上
testObject instanceof Function // false Function.prototype 不在testObject的原型鏈上
testObject instanceof Object // true Object.prototype在testObject的原型鏈上
複製程式碼isPrototypeOf：測試一個物件是否存在於另一個物件的原型鏈上
語法：prototypeObj.isPrototypeOf(object)
let test = function () { }
let testObject = new test();
test.prototype.isPrototypeOf(testObject) // true test.prototype在testObject的原型鏈上
Object.prototype.isPrototypeOf(testObject) // true Object.prototype在testObject的原型鏈上
複製程式碼原型鏈的終點: Object.prototype
Object.prototype是原型鏈的終點，所有物件都是從它繼承了方法和屬性。
Object.prototype沒有原型物件：
const proto = Object.getPrototypeOf(Object.prototype) // null
複製程式碼下面是兩個驗證例子，有疑慮的同學多寫幾個測試用例印證一下。
字串原型鏈的終點：Object.prototype
let test = '由String函式構造出來的'
let stringPrototype = Object.getPrototypeOf(test) // 字串的原型
stringPrototype === String.prototype // true 字串的原型是String物件
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String物件的原型是Object物件
複製程式碼函式原型鏈的終點:Object.prototype
let test = function () { }
let fnPrototype = Object.getPrototypeOf(test)
fnPrototype === Function.prototype // true test的原型是Function.prototype
Object.getPrototypeOf(Function.prototype) === Object.prototype // true
複製程式碼原型鏈用來做什麼？
屬性查詢：
如果試圖訪問物件(例項instance)的某個屬性,會首先在物件內部尋找該屬性,直至找不到,然後才在該物件的原型(instance.prototype)裡去找這個屬性，以此類推
我們用一個例子來形象說明一下：
let test = '由String函式構造出來的'
let stringPrototype = Object.getPrototypeOf(test) // 字串的原型
stringPrototype === String.prototype // true 字串的原型是String物件
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String物件的原型是Object物件
複製程式碼當你訪問test的某個屬性時，瀏覽器會進行以下查詢：
- 瀏覽器首先查詢
test本身 - 接著查詢它的原型物件：
String.prototype - 最後查詢
String.prototype的原型物件：Object.prototype - 一旦在原型鏈上找到該屬性，就會立即返回該屬性，停止查詢。
- 原型鏈上的原型都沒有找到的話，返回
undefiend
這種查詢機制還解釋了字串為何會有自帶的方法: slice/split/indexOf等。
準確的說：
- 這些屬性和方法是定義在
String這個全域性物件/函式上的。 - 字串的原型指向了
String函式的prototype。 - 之後通過查詢原型鏈，在String函式的
prototype中找到這些屬性和方法。
拒絕查詢原型鏈：
hasOwnProperty: 指示物件自身屬性中是否具有指定的屬性
語法：obj.hasOwnProperty(prop)
引數: prop 要查詢的屬性
返回值: 用來判斷某個物件是否含有指定的屬性的Boolean。
let test ={ 'OBKoro1': '扣肉' }
test.hasOwnProperty('OBKoro1'); // true
test.hasOwnProperty('toString'); // false test本身沒查詢到toString
複製程式碼這個API是掛載在object.prototype上，所有物件都可以使用，API會忽略掉那些從原型鏈上繼承到的屬性。
擴充套件：
例項的屬性
你知道建構函式的例項物件上有哪些屬性嗎？這些屬性分別掛載在哪個地方？原因是什麼？
function foo() {
this.some = '222'
let ccc = 'ccc'
foo.obkoro1 = 'obkoro1'
foo.prototype.a = 'aaa'
}
foo.koro = '扣肉'
foo.prototype.test = 'test'
let foo1 = new foo() // `foo1`上有哪些屬性,這些屬性分別掛載在哪個地方
foo.prototype.test = 'test2' // 重新賦值
複製程式碼上面這道是考察JS基礎的題，很多人都沒說對，原因是沒有徹底掌握this、原型鏈、函式。
想一下再看解析：
想一下再看解析：
想一下再看解析：
想一下再看解析：
想一下再看解析：
this.some：foo1物件的屬性
通過構造呼叫foo的this指向foo1，所以this.some掛載在foo1物件下。
屬性查詢: foo1.some
foo1.some直接讀取foo1的屬性。
foo1.test、foo1.a：foo1物件的原型
根據上文提到的：構造/new呼叫函式的時候會建立一個新物件(foo1)，自動將foo1的原型(Object.getPrototypeOf(foo1))指向建構函式的prototype物件。
構造呼叫會執行函式，所以foo.prototype.a = 'aaaaa'也會執行，單就賦值這個層面來說寫在foo外面和寫在foo裡面是一樣的。
屬性查詢：foo1.test、foo1.a
foo1本身沒有找到,繼續查詢foo1的原型Object.getPrototypeOf(foo1)上找到了a和test，返回它們，停止查詢。
foo1.obkoro1和foo1.koro：返回undefined
靜態屬性: foo.obkoro1、foo.koro
函式在JS中是一等公民，它也是一個物件, 用來模擬類。
這兩個屬性跟foo1沒有關係，它是物件foo上的兩個屬性(類似函式的:arguments/prototype/length等屬性)，稱為靜態屬性。
它們只能通過foo.obkoro1和foo.koro來訪問。
原型物件改變，原型鏈下游獲取的值也會改變
上面那個例子中的foo1.test的值是什麼？
foo.prototype.test = 'test'
let foo1 = new foo() // `foo1`上有哪些屬性,這些屬性分別掛載在哪個地方
foo.prototype.test = 'test2' // 重新賦值
複製程式碼foo1.test的值是test2，原因是：foo1的原型物件是Object.getPrototypeOf(foo1)存的指標，指向foo.prototype的記憶體地址，不是拷貝，每次讀取的值都是當前foo.prototype的最新值。
列印foo1：
小結
寫了好幾天，之前網上很多圖文部落格，那些線指來指去，就我個人看來還是比較難以理解的，所以本文純文字的形式來描述這些概念，相信認真看完的同學肯定都有所收穫，如果沒看懂的話，建議多看幾遍，這部分概念真的很重要！
PS：實際上還有很多引申出來的東西沒寫全，準備放到其他文章中去寫。
覺得我的部落格對你有幫助的話，就給我點個Star吧！
前端進階積累、公眾號、GitHub、wx:OBkoro1、郵箱：obkoro1@foxmail.com
以上2019/8/25
作者：OBKoro1
參考資料：