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

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

首先我們要清楚明白兩個(gè)概念：

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

這兩個(gè)概念大家跟我一起讀三遍并記住，后面會(huì)用到

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

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

這兩個(gè)概念大家跟我一起讀三遍并記住，后面會(huì)用到

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

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

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

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

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

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

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

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

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

// 從上方 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ì)也是普通對(duì)象，可適用準(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ì)也是普通對(duì)象，可適用準(zhǔn)則2)
Object.prototype.__proto__ = null; // 原型鏈到此停止
// **此處注意Foo 和 Function的區(qū)別， Foo是 Function的實(shí)例**

// 從中間 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ù))；
// 此處有點(diǎn)繞，Object本質(zhì)是函數(shù)，F(xiàn)unction本質(zhì)是對(duì)象
Function.prototype.__proto__ =  Object.prototype; // 準(zhǔn)則2 (Function.prototype本質(zhì)也是普通對(duì)象，可適用準(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的原型對(duì)象（Object.prototype）的__proto__指向null，其他內(nèi)置函數(shù)對(duì)象的原型對(duì)象（例如：Array.prototype）和自定義構(gòu)造函數(shù)的 __proto__都指向Object.prototype, 因?yàn)樵蛯?duì)象本身是普通對(duì)象。 即：

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

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

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

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

console.log(person01)

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

我們?cè)賱?chuàng)建person2實(shí)例

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

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

此時(shí)我們?cè)俅蛴?code>person01、person02，我們驚喜的發(fā)現(xiàn)，他們有了屬性hairColor和eat方法；實(shí)例們動(dòng)態(tài)的獲得了Person構(gòu)造函數(shù)之后添加的屬性、方法，這是就是原型、原型鏈的意義所在！可以動(dòng)態(tài)獲取，可以節(jié)省內(nèi)存。

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

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

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

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

最新評(píng)論