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