看完這篇文章，你會發(fā)現(xiàn)，原型、原型鏈原來如此簡單！  上面經(jīng)典的原型鏈相等圖，根據(jù)下文的學習，你會輕易掌握。

一、原型、原型鏈相等關(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有一個默認的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原型、原型鏈的時候遵從以下兩個準則

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

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

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

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

// 從上方 function Foo() 開始分析這一張經(jīng)典之圖
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本質(zhì)也是普通對象，可適用準則2)
Object.prototype.__proto__ = null; // 原型鏈到此停止
Foo.prototype.constructor = Foo; // 準則1
Foo.__proto__ = Function.prototype; // 準則2
Function.prototype.__proto__  = Object.prototype; //  準則2 (Function.prototype本質(zhì)也是普通對象，可適用準則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; // 準則2
o2.__proto__ = Object.prototype; // 準則2
Object.prototype.__proto__ = null; // 原型鏈到此停止
Object.prototype.constructor = Object; // 準則1
Object.__proto__ = Function.prototype // 準則2 (Object本質(zhì)也是函數(shù))；
// 此處有點繞，Object本質(zhì)是函數(shù)，F(xiàn)unction本質(zhì)是對象
Function.prototype.__proto__ =  Object.prototype; // 準則2 (Function.prototype本質(zhì)也是普通對象，可適用準則2)
Object.prototype.__proto__ = null; // 原型鏈到此停止

// 從下方 Function Function()開始分析這一張經(jīng)典之圖
Function Function()
Function.__proto__ = Function.prototype // 準則2
Function.prototype.constructor = Function; // 準則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ā)，我們都有吃，睡這樣一個方法，當相同的屬性、方法越多，原型、原型鏈的意義越大。 那我們可以這樣操作

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'； 實例對象重寫原型上繼承的屬相、方法，相當于“屬性覆蓋、屬性屏蔽”，這一操作不會改變原型上的屬性、方法，自然也不會改變由統(tǒng)一構(gòu)造函數(shù)創(chuàng)建的其他實例，只有修改原型對象上的屬性、方法，才能改變其他實例通過原型鏈獲得的屬性、方法。

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

最新評論