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，主流瀏覽器也都支持，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9，本文將以Object.getPrototypeOf(target)指代__proto__。

不要再使用__proto__:

本段摘自http://es6.ruanyifeng.com/#docs/object-methods#__proto__%E5%B1%9E%E6%80%A7%EF%BC%8CObject-setPrototypeOf%EF%BC%8CObject-getPrototypeOf，具體解析請點擊鏈接查看

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
// 掛載SuperType的this和prototype的屬性和方法到SubType.prototype上

1. 構造調用的第二點：將新對象的Object.getPrototypeOf(target)指向函數的prototype
2. 構造調用的第三點：該函數的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的原型鏈上

2. `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.prototypeObject.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'); // truetest.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`的屬性。
2. `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`，返回它們，停止查找。
3. `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：實際上還有很多引申出來的東西沒寫全，準備放到其他文章中去寫。

覺得我的博客對你有幫助的話，就給我點個https://github.com/OBKoro1/web_accumulate吧！

http://obkoro1.com/web_accumulate/、https://user-gold-cdn.xitu.io/2018/5/1/1631b6f52f7e7015?w=344&h=344&f=jpeg&s=8317、https://github.com/OBKoro1、wx:OBkoro1、郵箱：[email protected]

以上2019/8/25

作者：https://github.com/OBKoro1

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes

https://juejin.im/post/58f94c9bb123db411953691b#heading-14

https://github.com/creeperyang/blog/issues/9

http://obkoro1.com/web_accumulate/、https://user-gold-cdn.xitu.io/2018/5/1/1631b6f52f7e7015?w=344&h=344&f=jpeg&s=8317、https://github.com/OBKoro1、wx:OBkoro1、郵箱：[email protected]