來(lái)看個(gè)例子：

function foo() { }
const newObj = new foo() // 構(gòu)造調(diào)用foo 返回一個(gè)新對(duì)象
const newObj__proto__ = Object.getPrototypeOf(newObj) // 獲取newObj的原型對(duì)象
newObj__proto__ === foo.prototype // true 驗(yàn)證newObj的原型指向foo
const foo__proto__ = Object.getPrototypeOf(foo.prototype) // 獲取foo.prototype的原型
foo__proto__ === Object.prototype // true foo.prototype的原型是Object.prototype
``
如果用以前的語(yǔ)法，從`newObj`查找`foo`的原型，是這樣的：

newObj.__proto__.__proto__ // 這種關(guān)系就是原型鏈

**可以用以下三句話來(lái)理解原型鏈**：

1. **每個(gè)對(duì)象都擁有一個(gè)原型對(duì)象**: `newObj`的原型是`foo.prototype`。
2. **對(duì)象的原型可能也是繼承其他原型對(duì)象的**: `foo.prototype`也有它的原型`Object.prototype`。
3. **一層一層的，以此類推，這種關(guān)系就是原型鏈**。

### 一個(gè)對(duì)象是否在另一個(gè)對(duì)象的原型鏈上

> 如果一個(gè)對(duì)象存在另一個(gè)對(duì)象的原型鏈上，我們可以說(shuō)：它們是繼承關(guān)系。

判斷方式有兩種，但都是根據(jù)構(gòu)造函數(shù)的`prototype`是否在原型鏈上來(lái)判斷的：

1. `instanceof `: 用于測(cè)試構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在對(duì)象的原型鏈中的任何位置

語(yǔ)法：`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 `：測(cè)試一個(gè)對(duì)象是否存在于另一個(gè)對(duì)象的原型鏈上

語(yǔ)法：`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的原型鏈上

### 原型鏈的終點(diǎn): `Object.prototype`

`Object.prototype`是原型鏈的終點(diǎn)，所有對(duì)象都是從它繼承了方法和屬性。

**`Object.prototype`沒有原型對(duì)象**：

const proto = Object.getPrototypeOf(Object.prototype) // null

下面是兩個(gè)驗(yàn)證例子，有疑慮的同學(xué)多寫幾個(gè)測(cè)試用例印證一下。

**字符串原型鏈的終點(diǎn)**：`Object.prototype`

let test = "由String函數(shù)構(gòu)造出來(lái)的"
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是String對(duì)象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String對(duì)象的原型是Object對(duì)象

**函數(shù)原型鏈的終點(diǎn)**:`Object.prototype`

let test = function () { }
let fnPrototype = Object.getPrototypeOf(test)
fnPrototype === Function.prototype // true test的原型是Function.prototype
Object.getPrototypeOf(Function.prototype) === Object.prototype // true

### 原型鏈用來(lái)做什么？

#### 屬性查找：
> 如果試圖訪問對(duì)象(實(shí)例instance)的某個(gè)屬性,會(huì)首先在對(duì)象內(nèi)部尋找該屬性,直至找不到,然后才在該對(duì)象的原型(instance.prototype)里去找這個(gè)屬性，以此類推

我們用一個(gè)例子來(lái)形象說(shuō)明一下：

let test = "由String函數(shù)構(gòu)造出來(lái)的"
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是String對(duì)象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String對(duì)象的原型是Object對(duì)象

當(dāng)你訪問`test`的某個(gè)屬性時(shí)，瀏覽器會(huì)進(jìn)行以下查找：

1. 瀏覽器首先查找`test` 本身
2. 接著查找它的原型對(duì)象：`String.prototype`
3. 最后查找`String.prototype`的原型對(duì)象：`Object.prototype`
4. 一旦在原型鏈上找到該屬性，就會(huì)立即返回該屬性，停止查找。
5. 原型鏈上的原型都沒有找到的話，返回`undefiend`

這種查找機(jī)制還解釋了字符串為何會(huì)有自帶的方法: `slice`/`split`/`indexOf`等。

準(zhǔn)確的說(shuō)：
* 這些屬性和方法是定義在`String`這個(gè)全局對(duì)象/函數(shù)上的。
* 字符串的原型指向了`String`函數(shù)的`prototype`。
* 之后通過(guò)查找原型鏈，在String函數(shù)的`prototype`中找到這些屬性和方法。

#### 拒絕查找原型鏈： 

`hasOwnProperty`: 指示對(duì)象自身屬性中是否具有指定的屬性

語(yǔ)法：`obj.hasOwnProperty(prop)`

參數(shù): `prop` 要查找的屬性

返回值: 用來(lái)判斷某個(gè)對(duì)象是否含有指定的屬性的`Boolean`。

let test ={ "OBKoro1": "扣肉" }
test.hasOwnProperty("OBKoro1"); // true
test.hasOwnProperty("toString"); // false test本身沒查找到toString

這個(gè)`API`是掛載在`object.prototype`上，所有對(duì)象都可以使用，API會(huì)忽略掉那些從原型鏈上繼承到的屬性。

## 擴(kuò)展：

### 實(shí)例的屬性

你知道構(gòu)造函數(shù)的實(shí)例對(duì)象上有哪些屬性嗎？這些屬性分別掛載在哪個(gè)地方？原因是什么？

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上有哪些屬性,這些屬性分別掛載在哪個(gè)地方
foo.prototype.test = "test2" // 重新賦值

上面這道是考察`JS`基礎(chǔ)的題，很多人都沒說(shuō)對(duì)，原因是沒有徹底掌握`this`、`原型鏈`、`函數(shù)`。

#### 想一下再看解析：
#### 想一下再看解析：
#### 想一下再看解析：
#### 想一下再看解析：
#### 想一下再看解析：

1. `this.some`：`foo1`對(duì)象的屬性

通過(guò)構(gòu)造調(diào)用`foo`的`this`指向`foo1`，所以`this.some`掛載在`foo1`對(duì)象下。

屬性查找: `foo1.some`

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

2. `foo1.test`、`foo1.a`：`foo1`對(duì)象的原型

根據(jù)上文提到的：構(gòu)造/new調(diào)用函數(shù)的時(shí)候會(huì)創(chuàng)建一個(gè)新對(duì)象(`foo1`)，自動(dòng)將`foo1`的原型(`Object.getPrototypeOf(foo1)`)指向構(gòu)造函數(shù)的prototype對(duì)象。

構(gòu)造調(diào)用會(huì)執(zhí)行函數(shù)，所以` foo.prototype.a = "aaaaa"`也會(huì)執(zhí)行，單就賦值這個(gè)層面來(lái)說(shuō)寫在`foo`外面和寫在`foo`里面是一樣的。

屬性查找：`foo1.test`、`foo1.a`

* `foo1`本身沒有找到,繼續(xù)查找
* `foo1`的原型`Object.getPrototypeOf(foo1)`上找到了`a`和`test`，返回它們，停止查找。

3. `foo1.obkoro1`和`foo1.koro`：返回undefined

#### 靜態(tài)屬性: `foo.obkoro1`、`foo.koro`

> 函數(shù)在JS中是一等公民，它也是一個(gè)對(duì)象, 用來(lái)模擬類。

這兩個(gè)屬性跟`foo1`沒有關(guān)系，它是對(duì)象`foo`上的兩個(gè)屬性(類似函數(shù)的:`arguments`/`prototype`/`length`等屬性)，稱為**靜態(tài)屬性**。

它們只能通過(guò)`foo.obkoro1`和`foo.koro`來(lái)訪問。

#### 原型對(duì)象改變，原型鏈下游獲取的值也會(huì)改變 

上面那個(gè)例子中的`foo1.test`的值是什么？

foo.prototype.test = "test"
let foo1 = new foo() // foo1上有哪些屬性,這些屬性分別掛載在哪個(gè)地方
foo.prototype.test = "test2" // 重新賦值

`foo1.test`的值是`test2`，原因是：`foo1`的原型對(duì)象是`Object.getPrototypeOf(foo1)`存的指針，指向`foo.prototype`的內(nèi)存地址，不是拷貝，每次讀取的值都是當(dāng)前`foo.prototype`的最新值。

**打印`foo1`**：

![](https://github.com/OBKoro1/articleImg_src/blob/master/2019/2019_8_25_prototype.png?raw=true)

### 小結(jié)

寫了好幾天，之前網(wǎng)上很多圖文博客，那些線指來(lái)指去，就我個(gè)人看來(lái)還是比較難以理解的，所以本文純文字的形式來(lái)描述這些概念，相信認(rèn)真看完的同學(xué)肯定都有所收獲，如果沒看懂的話，建議多看幾遍，這部分概念真的很重要！

PS：實(shí)際上還有很多引申出來(lái)的東西沒寫全，準(zhǔn)備放到其他文章中去寫。

#### 覺得我的博客對(duì)你有幫助的話，就給我點(diǎn)個(gè)[Star](https://github.com/OBKoro1/web_accumulate)吧！

[前端進(jìn)階積累](http://obkoro1.com/web_accumulate/)、[公眾號(hào)](https://user-gold-cdn.xitu.io/2018/5/1/1631b6f52f7e7015?w=344&h=344&f=jpeg&s=8317)、[GitHub](https://github.com/OBKoro1)、wx:OBkoro1、郵箱：obkoro1@foxmail.com
 
 以上2019/8/25


作者：[OBKoro1](https://github.com/OBKoro1)

參考資料：

[MDN:對(duì)象原型](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes)

[JS原型鏈與繼承別再被問倒了](https://juejin.im/post/58f94c9bb123db411953691b#heading-14)

[從__proto__和prototype來(lái)深入理解JS對(duì)象和原型鏈](https://github.com/creeperyang/blog/issues/9)