輕鬆理解JS 原型原型鏈

理解js中原型、原型鏈這個概念，絕對是幫助咱們更深刻學習js的必要一步，好比，若是js開發者想理解js繼承，new關鍵字原理，甚至封裝組件、優化代碼，弄明白js中原型、原型鏈更是前提條件。本篇文章，用最簡潔的文字，清楚明白講解原型鏈相等關係和原型、原型鏈存在的意義，看完這篇文章，你會發現，原型、原型鏈原來如此簡單！

上面經典的原型鏈相等圖，根據下文的學習，你會輕易掌握。

一：原型、原型鏈相等關係理解

首先咱們要清楚明白兩個概念：

1. js分爲函數對象和普通對象，每一個對象都有__proto__屬性，可是隻有函數對象纔有prototype屬性
2. Object、Function都是js內置的函數, 相似的還有咱們經常使用到的Array、RegExp、Date、Boolean、Number、String

這兩個概念你們跟我一塊兒讀三遍並記住，後面會用到

那麼__proto__和prototype究竟是什麼，兩個概念理解它們

3. 屬性__proto__是一個對象，它有兩個屬性，constructor和__proto__；
4. 原型對象prototype有一個默認的constructor屬性，用於記錄實例是由哪一個構造函數建立；

這兩個概念你們跟我一塊兒讀三遍並記住，後面會用到

有如下構造函數Person，他的原型上有所屬國屬性motherland='china'

function Person(name, age){ 
    this.name = name;
    this.age = age;
 }
 
 Person.prototype.motherland = 'china'
複製代碼

經過new Person()建立的person01實例

let person01 = new Person('小明', 18);
複製代碼

js之父在設計js原型、原型鏈的時候聽從如下兩個準則

1. Person.prototype.constructor == Person // **準則1：原型對象（即Person.prototype）的constructor指向構造函數自己**
2. person01.__proto__ == Person.prototype // **準則2：實例（即person01）的__proto__和原型對象指向同一個地方**
複製代碼

這兩個準則你們跟我一塊兒讀三遍並記住，後面會用到

記住以上四個概念兩個準則，任何原型鏈相等判斷都能判斷正確；

你們能夠對照上圖，看看本身概念準則是否弄清楚了，必定要對照上圖哦

// 從上方 function Foo() 開始分析這一張經典之圖
function Foo()
let f1 = new Foo();
let f2 = new Foo();

f1.__proto__ = Foo.prototype; // 準則2
f2.__proto__ = Foo.prototype; // 準則2
Foo.prototype.__proto__ = Object.protitype; // 準則2 (Foo.prototype本質也是普通對象，可適用準則2)
Object.prototype.__proto__ = null; // 原型鏈到此中止
Foo.prototype.constructor = Foo; // 準則1
Foo.__proto__ = Function.prototype; // 準則2
Function.prototype.__proto__  = Object.protitype; //  準則2 (Function.prototype本質也是普通對象，可適用準則2)
Object.prototype.__proto__ = null; // 原型鏈到此中止
// **此處注意Foo 和 Function的區別， Foo是 Function的實例**

// 從中間 Function Object()開始分析這一張經典之圖
Function Object()
let o1 = new  Object();
let o2 = new  Object();

o1.__proto__ = Object.prototype; // 準則2
o2.__proto__ = Object.prototype; // 準則2
Object.prototype.__proto__ = null; // 原型鏈到此中止
Object.prototype.constructor = Object; // 準則1
Object.__proto__ = Function.prototype // 準則2 (Object本質也是函數)；
// 此處有點繞，Object本質是函數，Function本質是對象
Function.prototype.__proto__ =  Object.prototype; // 準則2 (Function.prototype本質也是普通對象，可適用準則2)
Object.prototype.__proto__ = null; // 原型鏈到此中止

// 從下方 Function Function()開始分析這一張經典之圖
Function Function()
Function.__proto__ = Function.prototype // 準則2
Function.prototype.constructor = Function; // 準則1

複製代碼

由此能夠得出結論： 除了Object的原型對象（Object.prototype）的__proto__指向null，其餘內置函數對象的原型對象（例如：Array.prototype）和自定義構造函數的 __proto__都指向Object.prototype, 由於原型對象自己是普通對象。 即：

Object.prototype.__proto__ = null;
Array.prototype.__proto__ = Object.prototype;
Foo.prototype.__proto__  = Object.prototype;
複製代碼

二：原型、原型鏈的意思何在

理解了這些相等關係以後，咱們思考，原型、原型鏈的意思何在？原型對象的做用，是用來存放實例中共有的那部份屬性、方法，能夠大大減小內存消耗。 用咱們文章開始的Person構造函數和person01實例舉例說：

console.log(person01)
複製代碼

打印person01， 他有本身屬性 name = '小明'，age = 18; 同時經過原型鏈關係，他有屬性motherland = 'china'；

咱們再建立person2實例

let person02 = new Person('小花', 20);
console.log(person02)
複製代碼

打印person02， 他有本身屬性 name = '小花'，age = 20; 同時經過原型鏈關係，他有屬性motherland = 'china'； 看出來了沒有，原型對象存放了person0一、person02共有的屬性所屬國motherland = 'china'. 咱們不用在每一個實例上添加motherland 屬性，而是將這一屬性存在他們的構造函數原型對象上，對於人類Person這樣的構造函數。相同的屬性、方法還有不少不少，好比咱們是黑頭髮，咱們都有吃，睡這樣一個方法，當相同的屬性、方法越多，原型、原型鏈的意義越大。 那咱們能夠這樣操做

Person.prototype.hairColor = 'black';
Person.prototype.eat = function(){
    console.log('We usually eat three meals a day.')
}
console.log(person01)
console.log(person02)
複製代碼

此時咱們再打印person0一、person02，咱們驚喜的發現，他們有了屬性hairColor和eat方法；實例們動態的得到了Person構造函數以後添加的屬性、方法，這是就是原型、原型鏈的意義所在！能夠動態獲取，能夠節省內存。

另外咱們還要注意：若是person01將頭髮染成了黃色，那麼hairColor會是什麼呢？

person01,hairColor = 'yellow'；
console.log(person01)
console.log(person02)
複製代碼

能夠看到，person01的hairColor = 'yellow'， 而person02的hairColor = 'black'； 實例對象重寫原型上繼承的屬相、方法，至關於「屬性覆蓋、屬性屏蔽」，這一操做不會改變原型上的屬性、方法，天然也不會改變由統一構造函數建立的其餘實例，只有修改原型對象上的屬性、方法，才能改變其餘實例經過原型鏈得到的屬性、方法。

三：結語

若是你們喜歡這邊文章，請給我一點鼓勵，若是有以爲沒寫講解清楚的地方，歡迎你們評論裏面指正！以前我都是的看別人的文章、博客學習，並從中收穫頗多，這是我第一次發表技術類文章，但願能跟你們交流技術，共同進步。