淺談js中的原型、原型鍊、原型鍊繼承

原型對象、 構造函數、執行個體對象

原型對象：這個要從構造函數開始說起，每個構造函數都會帶有一個 prototype 屬性。該屬性是個指針，指向了一個對象，我們稱之為 原型對象。什麼是指針？指針就好比學生的學号，原型對象則是那個學生。我們通過學号找到唯一的那個學生。假設突然，指針設定 null, 學号重置空了，不要慌，對象還存在，學生也沒消失。隻是不好找了,用代碼來解釋可以這樣

構造函數：簡單來說我們聲明一個方法function Person()，Person()就是我們所說的構造函數，原型對象上預設有一個屬性 constructor，該屬性也是一個指針，指向其相關聯的構造函數，用代碼來解釋可以這樣寫

執行個體對象：new一個構造函數會産生一個執行個體，執行個體對象都有一個内部屬性__proto__，指向了原型對象。是以執行個體能夠通路原型對象上的所有屬性和方法,代碼可以這樣寫

var person = new Person()
person.__proto__ === Person.prototype				//執行個體對象内部屬性__proto__指向原型對象
           

是以三者的關系是，每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而執行個體都包含一個指向原型對象的内部指針。通俗點說就是，執行個體通過内部指針可以通路到原型對象，原型對象通過constructor指針，又可以找到構造函數。

例子

function Person (name) {
    this.name = name;
    this.sex = '男'; 
}
Person.prototype.action = function () {
　　console.log('打球');
}
var person= new Person('jiwawa');
person.action();  //打球
           

首先我們定義了一個構造函數 Person(), Person.prototype 指向的原型對象，原型對象自帶的屬性construtor又指回了 Person，那麼 Person.prototype.constructor == Person. 前面我們說了執行個體對象person由于其内部指針__proto__指向了該原型對象Person.prototype，是以可以通路到 action方法

原型鍊

我們知道，執行個體有一個内部指針_proto__，指向它的原型對象，并且可以通路原型對象上的所有屬性和方法。person執行個體指向了Person的原型對象，可以通路Person原型對象上的所有屬性和方法；如果Person原型對象變成了某一個類的執行個體 xxx，這個執行個體又會指向一個新的原型對象 XXX，那麼 person此時就能通路 xxx的執行個體屬性和 XXX原型對象上的所有屬性和方法了。同理，新的原型對象XXX碰巧又是另外一個對象的執行個體zzz，這個執行個體zzz又會指向新的原型對象 ZZZ，那麼person此時就能通路 zzz的執行個體屬性和 ZZZ原型對象上的所有屬性和方法了,當我們一直順着往上找的話，最終會指向一個null,這就是原型鍊的終點。

//定義一個 Person構造函數，作為 Child的父類
function Person() {
   this.type= '人類';
}

Person.prototype.superFunction= function () {
   console.log(this.type);
}

function Child(name) {
   this.name= name;
   this.sex= '男生';  
}
// Person執行個體指派給Child的prototype指針
Child.prototype = new Person();
var child= new Child('小明');
child.superFunction();  //人類（父類的方法）
child.name;  //小明（子類屬性）
child.sex;  //男生（子類屬性）
           

原型鍊繼承

上面的代碼首先定義了一個 Person構造函數，通過new Person()得到執行個體，會包含一個執行個體屬性 type 和一個原型屬性 superFunction。另外又定義了一個Child構造函數。然後情況發生變化Child.prototype = new Person()，将Child的原型對象覆寫成了 person 執行個體。當 child 去通路superFunction屬性時，js會先在child的執行個體屬性中查找，發現找不到，然後，js就會去child的原型對象上去找，child的原型對象已經被我們改成了一個person執行個體，那就是去person執行個體上去找。先找person 的執行個體屬性，發現還是沒有 superFunction, 最後去 person 的原型對象上去找，最後才找到，代碼解釋如下

var child= new Child('小明');
child.__proto == Child.prototype
//因為我們将Child的原型對象覆寫成了 person 執行個體。Child.prototype = new Person();
//是以child.__proto__指向new Person()
var person = new Person('小明');
//是以child.__proto 可以找到person執行個體對象的所有方法
child.superFunction();  //人類（父類的方法）
           

附

該部落格僅為記錄開發中一些遇到的問題及解決方案，後續還會繼續更新維護。