【JS-05】原型鏈和訪問對象原型的方法
小課堂【武漢第170期】
分享人：莊引
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
8.更多討論
1.背景介紹
JavaScript本身不提供類實現(xiàn)。 (在ES2015/ES6中引入了class關(guān)鍵字，但是只是語法糖，JavaScript 仍然是基于原型的)。 通過原型這種機(jī)制，JavaScript 中的對象從其他對象繼承功能特性。當(dāng)談到繼承時，Javascript 只有一種結(jié)構(gòu)：對象。每個對象都有一個內(nèi)部鏈接到另一個對象， 稱為它的原型 prototype。該原型對象有自己的原型，等等，直到達(dá)到一個以null為原型的對象。 根據(jù)定義，null沒有原型，并且作為這個原型鏈prototype chain中的最終鏈接。那么原型鏈如何工作? prototype 屬性如何向已有的構(gòu)造器添加方法?
2.知識剖析
定義構(gòu)造函數(shù),通過NEW來創(chuàng)建對象實例?
functionPerson() {
}
varperson= newPerson();
person.name = 'Andy';
console.log(person.name) // Andy
在這個例子中，Person就是一個構(gòu)造函數(shù)，我們使用 new 創(chuàng)建了一個實例對象person。
構(gòu)造函數(shù)的 PROTOTYPE 屬性指向?qū)嵗?
每個函數(shù)都有一個 prototype 屬性，就是我們經(jīng)常在各種例子中看到的那個 prototype ，比如：
functionPerson() {
}
// 注意： prototype是函數(shù)才會有的屬性
Person.prototype.name = 'Andy';
varperson1 = newPerson();
varperson2 = newPerson();
console.log(person1.name) // Andy
console.log(person2.name) // Andy
那構(gòu)造函數(shù)的prototype屬性到底指向的是什么呢？是這個函數(shù)的原型嗎？ 其實，函數(shù)的prototype屬性指向了一個對象，這個對象正是調(diào)用該構(gòu)造函數(shù)而創(chuàng)建的 實例的原型,也就是這個例子中的person1和person2的原型。 那么什么是原型呢? 每一個JavaScript對象(null除外)在創(chuàng)建的時候就會與之關(guān)聯(lián)另一個對象，這個對象就是我們所說的原型，每一個對象都會從原型"繼承"屬性。
在這張圖中我們用Person.prototype 表示實例原型 那么我們該怎么表示實例與實例原型，也就是person和Person.prototype 之間的關(guān)系呢，這時候我們就要講到第二個屬性：
對象的 __PROTO__ 屬性指向?qū)嵗?/p>
這是每一個JavaScript對象(除了null)都具有的一個屬性，叫__proto__，這個屬性會指向該對象的原型。
functionPerson() {
}
varperson= newPerson();
console.log(person.__proto__ ===Person.prototype); ? ? //true?
既然實例對象和構(gòu)造函數(shù)都可以指向原型，那么原型是否有屬性指向構(gòu)造函數(shù)或者實例呢？
實例原型的 CONSTRUCTOR 屬性指向構(gòu)造函數(shù)?
指向?qū)嵗遣豢赡艿?因為一個構(gòu)造函數(shù)可以生成多個實例，但是原型指向構(gòu)造函數(shù)倒是有的，每個原型都有一個constructor屬性指向關(guān)聯(lián)的構(gòu)造函數(shù)：
functionPerson() {
}
console.log(Person===Person.prototype.constructor); ? //true?
構(gòu)造函數(shù),原型和實例的關(guān)系:
每個構(gòu)造函數(shù)(constructor)都有一個原型對象(prototype)
原型對象都包含一個指向構(gòu)造函數(shù)的指針
實例(instance)都包含一個指向原型 對象的內(nèi)部指針
如果試圖引用對象(實例instance)的某個屬性,會首先在對象內(nèi)部尋找該屬性,直至找不到,然后才在該對象的原型(instance.prototype)里去找這個屬性.
綜上我們已經(jīng)得出：
functionPerson() {
}
varperson= newPerson();
console.log(person.__proto__ ==Person.prototype) // true
console.log(Person.prototype.constructor ==Person) // true
了解了構(gòu)造函數(shù)、實例原型、和實例之間的關(guān)系，接下來我們講講實例和原型的關(guān)系： 當(dāng)讀取實例的屬性時，如果找不到，就會查找與對象關(guān)聯(lián)的原型中的屬性，如果還查不到，就去找原型的原型，一直找到最頂層為止。
functionPerson() {
}
Person.prototype.name = 'Andy';
varperson= newPerson();
person.name = 'Bob';
console.log(person.name) // Bob
deleteperson.name;
console.log(person.name) // Andy
在這個例子中，我們設(shè)置了person的name屬性，所以我們可以讀取到為'name of thisperson'，當(dāng)我們刪除了person的name屬性時，再次讀取person.name，從person中找不到之后就會從person的原型也就是person.__proto__ ==Person.prototype中查找，幸運的是我們在person的原型找到了`name`屬性，但是萬一還沒有找到呢？原型的原型又是什么呢？ 在前面，我們已經(jīng)講了原型也是一個對象，既然是對象，我們就可以用最原始的方式創(chuàng)建它，那就是
var obj = new Object();
obj.name = 'Andy'
console.log(obj.name) // Andy
所以原型對象是通過Object構(gòu)造函數(shù)生成的，結(jié)合之前所講,實例的__proto__指向構(gòu)造函數(shù)的prototype,所以我們再更新下關(guān)系圖：
那Object.prototype的原型呢？ 就是null,所以查到Object.prototype就可以停止查找了
圖中由相互關(guān)聯(lián)的原型組成的鏈狀結(jié)構(gòu)就是原型鏈，也就是藍(lán)色的這條線。方法和屬性沒有被復(fù)制到原型鏈中的其他對象——它們只是通過前述的“上溯原型鏈”的方式訪問
3.常見問題
訪問對象原型的方法有哪些？
4.解決方法
沒有正式的方法用于直接訪問一個對象的原型對象——原型鏈中的“連接”被定義在一個內(nèi)部屬性中，在 JavaScript 語言標(biāo)準(zhǔn)中用 [[prototype]] 表示。然而，大多數(shù)現(xiàn)代瀏覽器還是提供了一個名為 __proto__ （前后各有2個下劃線）的屬性，其包含了對象的原型。你可以嘗試輸入 person1.__proto__ 和 person1.__proto__.__proto__，看看代碼中的原型鏈?zhǔn)鞘裁礃拥?！獲取實例對象obj的原型對象，有三種方法:
obj.__proto__
obj.constructor.prototype
Object.getPrototypeOf(obj)
上面三種方法之中，前兩種都不是很可靠。
最新的ES6標(biāo)準(zhǔn)規(guī)定，__proto__屬性只有瀏覽器才需要部署，其他環(huán)境可以不部署。而obj.constructor.prototype在手動改變原型對象時，可能會失效。
5.編碼實戰(zhàn)
獲取原型對象的方法
functionPerson() {};//構(gòu)造函數(shù)
varperson= newPerson();//函數(shù)實例
// ? ?三種方法都能獲取到當(dāng)前對象的原型對象
person.__proto__===Person.prototype;// true
person.constructor.prototype===Person.prototype;// true
Object.getPrototypeOf(person)===Person.prototype;// true
6.擴(kuò)展思考
instanceof運算符的原型鏈原理? instanceof運算符返回一個布爾值，表示指定對象是否為某個構(gòu)造函數(shù)的實例。
function Vehicle(){
}
var v = new Vehicle();
v instanceof Vehicle // true
function Person(){
}
var p = new Person();
p instanceof Vehicle // ??
instanceof運算符的左邊是實例對象，右邊是構(gòu)造函數(shù)。它的運算實質(zhì)是檢查右邊構(gòu)建函數(shù)的原型對象，是否在左邊對象的原型鏈上。 由于instanceof對整個原型鏈上的對象都有效，因此同一個實例對象，可能會對多個構(gòu)造函數(shù)都返回true。
7.參考文獻(xiàn)
對象原型 - 學(xué)習(xí) Web 開發(fā) | MDN
JavaScript深入之從原型到原型鏈 · Issue #2 · mqyqingfeng/Blog
8.更多討論
原型鏈并非十分完美, 它包含如下兩個問題.
問題一: 當(dāng)原型鏈中包含引用類型值的原型時,該引用類型值會被所有實例共享;
問題二: 在創(chuàng)建子類型(例如創(chuàng)建Son的實例)時,不能向超類型(例如Father)的構(gòu)造函數(shù)中傳遞參數(shù).
有鑒于此, 實踐中很少會單獨使用原型鏈. 為此,下面將有一些嘗試以彌補原型鏈的不足.
借用構(gòu)造函數(shù)
組合繼承
原型繼承
你能正確回答出下面程序運行結(jié)果?,如果能,那么你就初步理解原型鏈.
var A =function(){
this.i =2;
}
A.prototype.i =3;
var B =function(){
this.i =4;
}
B.prototype =newA();
var b =newB();
console.log(b.i);?
delete b.i;
console.log(b.i);?
delete B.prototype.i;
console.log(b.i);?
感謝觀看
編輯:莊引
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始，找個師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長可見化，師兄1對1免費指導(dǎo)?？靵砼c我一起學(xué)習(xí)吧 ！http://www.jnshu.com/login/1/86157900
