帶你理解JavaScript 原型原型鏈

Posted on by

看完這篇文章，你會發現，原型、原型鏈原來如此簡單！  上面經典的原型鏈相等圖，根據下文的學習，你會輕易掌握。

一、原型、原型鏈相等關系理解

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

js分為函數對象和普通對象，每個對象都有__proto__屬性，但是隻有函數對象才有prototype屬性
Object、Function都是js內置的函數, 類似的還有我們常用到的Array、RegExp、Date、Boolean、Number、String

這兩個概念大傢跟我一起讀三遍並記住，後面會用到

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

  • 屬性__proto__是一個對象，它有兩個屬性，constructor和__proto__ ；
  • 原型對象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原型、原型鏈的時候遵從以下兩個準則

 Person.prototype.constructor == Person // **準則1：原型對象（即Person.prototype）的constructor指向構造函數本身**
 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.prototype; // 準則2 (Foo.prototype本質也是普通對象，可適用準則2)
Object.prototype.__proto__ = null; // 原型鏈到此停止
Foo.prototype.constructor = Foo; // 準則1
Foo.__proto__ = Function.prototype; // 準則2
Function.prototype.__proto__  = Object.prototype; //  準則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'； 看出來瞭沒有，原型對象存放瞭person01、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)

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

另外我們還要註意：如果person01將頭發染成瞭黃色，那麼hairColor會是什麼呢？

person01,hairColor = 'yellow'；
console.log(person01)
console.log(person02)

可以看到，person01的hairColor = 'yellow'， 而person02的hairColor = 'black'； 實例對象重寫原型上繼承的屬相、方法，相當於“屬性覆蓋、屬性屏蔽”，這一操作不會改變原型上的屬性、方法，自然也不會改變由統一構造函數創建的其他實例，隻有修改原型對象上的屬性、方法，才能改變其他實例通過原型鏈獲得的屬性、方法。

到此這篇關於帶你瞭解JS 原型原型鏈的文章就介紹到這瞭,更多相關JS 原型原型鏈內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：