JS基礎-原型、原型鏈真的不能只知其一;不知其二

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入門，具體解析請點擊連接查看

1. __proto__屬性沒有寫入 ES6 的正文，而是寫入了附錄。
2. 緣由是它本質上是一個內部屬性，而不是一個正式的對外的 API，只是因爲瀏覽器普遍支持，才被加入了 ES6。
3. 標準明確規定，只有瀏覽器必須部署這個屬性，其餘運行環境不必定須要部署，並且新的代碼最好認爲這個屬性是不存在的。
4. 因此不管從語義的角度，仍是從兼容性的角度，都不要使用這個屬性，應該使用：Object.getPrototypeOf(target)（讀操做）、Object.setPrototypeOf(target)（寫操做）、Object.create(target)（生成操做）代替

構造函數是什麼、它作了什麼

出自《你不知道的js》：在js中, 實際上並不存在所謂的'構造函數'，只有對於函數的'構造調用'。

上文一直提到構造函數，所謂的構造函數，實際上就是經過關鍵字new來調用的函數：

let newObj = new someFn() // 構造調用函數

構造/new調用函數的時候作了什麼：

1. 建立一個全新的對象。
2. 這個新對象的原型(Object.getPrototypeOf(target))指向構造函數的prototype對象。
3. 該函數的this會綁定在新建立的對象上。
4. 若是函數沒有返回其餘對象，那麼new表達式中的函數調用會自動返回這個新對象。
5. 咱們稱這個新對象爲構造函數的實例。

原型繼承就是利用構造調用函數的特性：

SubType.prototype = new SuperType();  // 原型繼承：SubType繼承SuperType
SubType.prototype.constructor = SubType // 從新指定constructor指向 方便找到構造函數
// 掛載SuperType的this和prototype的屬性和方法到SubType.prototype上

1. 構造調用的第二點：將新對象的Object.getPrototypeOf(target)指向函數的prototype
2. 構造調用的第三點：該函數的this會綁定在新建立的對象上。(因此父類this聲明的屬性被全部子類實例共享)
3. 新對象賦值給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__ // 這種關係就是原型鏈

能夠用如下三句話來理解原型鏈：

1. 每一個對象都擁有一個原型對象: newObj的原型是foo.prototype。
2. 對象的原型可能也是繼承其餘原型對象的: foo.prototype也有它的原型Object.prototype。
3. 一層一層的，以此類推，這種關係就是原型鏈。

一個對象是否在另外一個對象的原型鏈上

若是一個對象存在另外一個對象的原型鏈上，咱們能夠說：它們是繼承關係。

判斷方式有兩種，但都是根據構造函數的prototype是否在原型鏈上來判斷的：

1. 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的原型鏈上

1. 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的某個屬性時，瀏覽器會進行如下查找：

1. 瀏覽器首先查找test 自己
2. 接着查找它的原型對象：String.prototype
3. 最後查找String.prototype的原型對象：Object.prototype
4. 一旦在原型鏈上找到該屬性，就會當即返回該屬性，中止查找。
5. 原型鏈上的原型都沒有找到的話，返回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、原型鏈、函數。

想一下再看解析：

想一下再看解析：

想一下再看解析：

想一下再看解析：

想一下再看解析：

1. this.some：foo1對象的屬性

經過構造調用foo的this指向foo1，因此this.some掛載在foo1對象下。

屬性查找: foo1.some

foo1.some直接讀取foo1的屬性。

1. 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，返回它們，中止查找。

1. 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:OBkoro一、郵箱：obkoro1@foxmail.com

以上2019/8/25

做者：OBKoro1

參考資料：

MDN:對象原型

JS原型鏈與繼承別再被問倒了

從__proto__和prototype來深刻理解JS對象和原型鏈