快捷導(dǎo)航

帶你理解JavaScript 原型原型鏈

更新時間：2021年09月27日 09:29:57 作者：妖精的尾巴

理解js中原型、原型鏈這個概念，絕對是幫助我們更深入學(xué)習(xí)js的必要一步，比如，如果js開發(fā)者想理解js繼承，new關(guān)鍵字原理，甚至封裝組件、優(yōu)化代碼，弄明白js中原型、原型鏈更是前提條件。本篇文章，用最簡潔的文字，清楚明白講解原型鏈相等關(guān)系和原型、原型鏈存在的意義

一、原型、原型鏈相等關(guān)系理解

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

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

這兩個概念大家跟我一起讀三遍并記住，后面會用到

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

屬性__proto__是一個對象，它有兩個屬性，constructor和__proto__ ；
原型對象prototype有一個默認(rèn)的constructor屬性，用于記錄實例是由哪個構(gòu)造函數(shù)創(chuàng)建；

這兩個概念大家跟我一起讀三遍并記住，后面會用到

有以下構(gòu)造函數(shù)Person，他的原型上有所屬國屬性motherland='China'

 function Person(name, age){ 
    this.name = name;
    this.age = age;
 }
 
 Person.prototype.motherland = 'China'

通過new Person()創(chuàng)建的person01實例

 let person01 = new Person('小明', 18);

js之父在設(shè)計js原型、原型鏈的時候遵從以下兩個準(zhǔn)則

 Person.prototype.constructor == Person // **準(zhǔn)則1：原型對象（即Person.prototype）的constructor指向構(gòu)造函數(shù)本身**
 person01.__proto__ == Person.prototype // **準(zhǔn)則2：實例（即person01）的__proto__和原型對象指向同一個地方**

這兩個準(zhǔn)則大家跟我一起讀三遍并記住，后面會用到

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

大家可以對照上圖，看看自己概念準(zhǔn)則是否弄清楚了，一定要對照上圖哦

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

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

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

o1.__proto__ = Object.prototype; // 準(zhǔn)則2
o2.__proto__ = Object.prototype; // 準(zhǔn)則2
Object.prototype.__proto__ = null; // 原型鏈到此停止
Object.prototype.constructor = Object; // 準(zhǔn)則1
Object.__proto__ = Function.prototype // 準(zhǔn)則2 (Object本質(zhì)也是函數(shù))；
// 此處有點繞，Object本質(zhì)是函數(shù)，F(xiàn)unction本質(zhì)是對象
Function.prototype.__proto__ =  Object.prototype; // 準(zhǔn)則2 (Function.prototype本質(zhì)也是普通對象，可適用準(zhǔn)則2)
Object.prototype.__proto__ = null; // 原型鏈到此停止

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

由此可以得出結(jié)論： 除了Object的原型對象（Object.prototype）的__proto__指向null，其他內(nèi)置函數(shù)對象的原型對象（例如：Array.prototype）和自定義構(gòu)造函數(shù)的 __proto__都指向Object.prototype, 因為原型對象本身是普通對象。即：

Object.prototype.__proto__ = null;
Array.prototype.__proto__ = Object.prototype;
Foo.prototype.__proto__  = Object.prototype;

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

理解了這些相等關(guān)系之后，我們思考，原型、原型鏈的意思何在？原型對象的作用，是用來存放實例中共有的那部份屬性、方法，可以大大減少內(nèi)存消耗。

用我們文章開始的Person構(gòu)造函數(shù)和person01實例舉例說：

console.log(person01)

打印person01，他有自己屬性 name = '小明'，age = 18; 同時通過原型鏈關(guān)系，他有屬性motherland = 'China'；

我們再創(chuàng)建person2實例

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

打印person02，他有自己屬性 name = '小花'，age = 20; 同時通過原型鏈關(guān)系，他有屬性motherland = 'China'；看出來了沒有，原型對象存放了person01、person02共有的屬性所屬國motherland = 'China'. 我們不用在每個實例上添加motherland 屬性，而是將這一屬性存在他們的構(gòu)造函數(shù)原型對象上，對于人類Person這樣的構(gòu)造函數(shù)。相同的屬性、方法還有很多很多，比如我們是黑頭發(fā)，我們都有吃，睡這樣一個方法，當(dāng)相同的屬性、方法越多，原型、原型鏈的意義越大。那我們可以這樣操作

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，我們驚喜的發(fā)現(xiàn)，他們有了屬性hairColor和eat方法；實例們動態(tài)的獲得了Person構(gòu)造函數(shù)之后添加的屬性、方法，這是就是原型、原型鏈的意義所在！可以動態(tài)獲取，可以節(jié)省內(nèi)存。

另外我們還要注意：如果person01將頭發(fā)染成了黃色，那么hairColor會是什么呢？

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

可以看到，person01的hairColor = 'yellow'，而person02的hairColor = 'black'；實例對象重寫原型上繼承的屬相、方法，相當(dāng)于“屬性覆蓋、屬性屏蔽”，這一操作不會改變原型上的屬性、方法，自然也不會改變由統(tǒng)一構(gòu)造函數(shù)創(chuàng)建的其他實例，只有修改原型對象上的屬性、方法，才能改變其他實例通過原型鏈獲得的屬性、方法。

到此這篇關(guān)于帶你了解JS 原型原型鏈的文章就介紹到這了,更多相關(guān)JS 原型原型鏈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: