js中的原型,原型鏈和繼承

在傳統的基於Class的語言如Java、C++中，繼承的本質是擴展一個已有的Class，並生成新的Subclass。

因爲這類語言嚴格區分類和實例，繼承其實是類型的擴展。可是，JavaScript最開始是沒有類的概念的咱們沒法直接擴展一個Class，由於根本不存在Class這種類型所以採用原型繼承這種方法。

首先了解一些概念：

普通對象與函數對象

構造函數 

原型對象

一.普通對象與函數對象

Object 、Function 是 JS 自帶的函數對象,凡是經過 new Function() 建立的對象都是函數對象，其餘的都是普通對象。Function Object 也都是經過 New Function()建立的。

var o1 = {};

var o2 =new Object();

var o3 = new f1();

 

function f1(){};

var f2 = function(){};

var f3 = new Function('str','console.log(str)');

 

console.log(typeof Object); //function

console.log(typeof Function); //function

console.log(typeof f1); //function

console.log(typeof f2); //function

console.log(typeof f3); //function

console.log(typeof o1); //object

console.log(typeof o2); //object

console.log(typeof o3); //object

 o1 o2 o3 爲普通對象，f1 f2 f3 爲函數對象

二. 構造函數

咱們先複習一下構造函數的知識：

function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { alert(this.name) } } var person1 = new Person('Zaxlct', 28, 'Software Engineer'); var person2 = new Person('Mick', 23, 'Doctor'); 

上面的例子中 person1 和 person2 都是 Person 的實例。這兩個實例都有一個 constructor （構造函數）屬性，該屬性（是一個指針）指向 Person。 即：

console.log(person1.constructor == Person); //true console.log(person2.constructor == Person); //true 

咱們要記住兩個概念（構造函數，實例）：
person1 和 person2 都是 構造函數 Person 的實例
一個公式：
實例的構造函數屬性（constructor）指向構造函數。

三. 原型對象

在 JavaScript 中，每當定義一個對象（函數也是對象）時候，對象中都會包含一些預約義的屬性。其中每一個函數對象都有一個prototype 屬性，這個屬性指向函數的原型對象。（先用無論什麼是 __proto__ 第二節的課程會詳細的剖析）

function Person() {} Person.prototype.name = 'Zaxlct'; Person.prototype.age = 28; Person.prototype.job = 'Software Engineer'; Person.prototype.sayName = function() { alert(this.name); } var person1 = new Person(); person1.sayName(); // 'Zaxlct' var person2 = new Person(); person2.sayName(); // 'Zaxlct' console.log(person1.sayName == person2.sayName); //true 

咱們獲得了本文第一個「定律」：

每一個對象都有 __proto__ 屬性，但只有函數對象纔有 prototype 屬性

---

那什麼是原型對象呢？
咱們把上面的例子改一改你就會明白了：

Person.prototype = {
   name: 'Zaxlct', age: 28, job: 'Software Engineer', sayName: function() { alert(this.name); } } 

原型對象，顧名思義，它就是一個普通對象（廢話 = =!）。從如今開始你要緊緊記住原型對象就是 Person.prototype ，若是你仍是懼怕它，那就把它想一想成一個字母 A： var A = Person.prototype

---

在上面咱們給 A 添加了 四個屬性：name、age、job、sayName。其實它還有一個默認的屬性：constructor

在默認狀況下，全部的原型對象都會自動得到一個 constructor（構造函數）屬性，這個屬性（是一個指針）指向 prototype 屬性所在的函數（Person）

上面這句話有點拗口，咱們「翻譯」一下：A 有一個默認的 constructor 屬性，這個屬性是一個指針，指向 Person。即：
Person.prototype.constructor == Person

---

在上面第二小節《構造函數》裏，咱們知道實例的構造函數屬性（constructor）指向構造函數 ：person1.constructor == Person

這兩個「公式」好像有點聯繫：

person1.constructor == Person
Person.prototype.constructor == Person

person1 爲何有 constructor 屬性？那是由於 person1 是 Person 的實例。
那 Person.prototype 爲何有 constructor 屬性？？同理， Person.prototype （你把它想象成 A） 也是Person 的實例。
也就是在 Person 建立的時候，建立了一個它的實例對象並賦值給它的 prototype，基本過程以下：

var A = new Person(); Person.prototype = A; 

結論：原型對象（Person.prototype）是 構造函數（Person）的一個實例。

---

原型對象其實就是普通對象（但 Function.prototype 除外，它是函數對象，但它很特殊，他沒有prototype屬性（前面說道函數對象都有prototype屬性））。看下面的例子：

function Person(){}; console.log(Person.prototype) //Person{} console.log(typeof Person.prototype) //Object console.log(typeof Function.prototype) // Function，這個特殊 console.log(typeof Object.prototype) // Object console.log(typeof Function.prototype.prototype) //undefined 

Function.prototype 爲何是函數對象呢？

var A = new Function (); Function.prototype = A; 

上文提到凡是經過 new Function( ) 產生的對象都是函數對象。由於 A 是函數對象，因此Function.prototype 是函數對象。

那原型對象是用來作什麼的呢？主要做用是用於繼承。舉個例子：

var Person = function(name){ this.name = name; // tip: 當函數執行時這個 this 指的是誰？ }; Person.prototype.getName = function(){ return this.name; // tip: 當函數執行時這個 this 指的是誰？ } var person1 = new person('Mick'); person1.getName(); //Mick 

從這個例子能夠看出，經過給 Person.prototype 設置了一個函數對象的屬性，那有 Person 的實例（person1）出來的普通對象就繼承了這個屬性。具體是怎麼實現的繼承，就要講到下面的原型鏈了。

小問題，上面兩個 this 都指向誰？

var person1 = new person('Mick'); person1.name = 'Mick'; // 此時 person1 已經有 name 這個屬性了 person1.getName(); //Mick 

故兩次 this 在函數執行時都指向 person1。

四.繼承

首先咱們須要一個構造函數：

function Student(props) { this.name = props.name || 'Unnamed'; } Student.prototype.hello = function () { alert('Hello, ' + this.name + '!'); }

還須要這個函數的原型鏈：

Student的原型鏈：

基於Student擴展出PrimaryStudent，能夠先定義出PrimaryStudent：

function PrimaryStudent(props) { // 調用Student構造函數，綁定this變量: Student.call(this, props); this.grade = props.grade || 1; }

可是，調用了Student構造函數不等於繼承了Student，PrimaryStudent建立的對象的原型是：

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null 

必須想辦法把原型鏈修改成：

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null 

這樣，原型鏈對了，繼承關係就對了。新的基於PrimaryStudent建立的對象不但能調用PrimaryStudent.prototype定義的方法，也能夠調用Student.prototype定義的方法。

若是你想用最簡單粗暴的方法這麼幹：

PrimaryStudent.prototype = Student.prototype;

是不行的！若是這樣的話，PrimaryStudent和Student共享一個原型對象，那還要定義PrimaryStudent幹啥？

咱們必須藉助一箇中間對象來實現正確的原型鏈，這個中間對象的原型要指向Student.prototype。爲了實現這一點，參考道爺（就是發明JSON的那個道格拉斯）的代碼，中間對象能夠用一個空函數F來實現：

// PrimaryStudent構造函數: function PrimaryStudent(props) { Student.call(this, props); this.grade = props.grade || 1; } // 空函數F: function F() { } // 把F的原型指向Student.prototype: F.prototype = Student.prototype; // 把PrimaryStudent的原型指向一個新的F對象，F對象的原型正好指向Student.prototype: PrimaryStudent.prototype = new F(); // 把PrimaryStudent原型的構造函數修復爲PrimaryStudent: PrimaryStudent.prototype.constructor = PrimaryStudent; // 繼續在PrimaryStudent原型（就是new F()對象）上定義方法： PrimaryStudent.prototype.getGrade = function () { return this.grade; }; // 建立xiaoming: var xiaoming = new PrimaryStudent({ name: '小明', grade: 2 }); xiaoming.name; // '小明' xiaoming.grade; // 2 // 驗證原型: xiaoming.__proto__ === PrimaryStudent.prototype; // true xiaoming.__proto__.__proto__ === Student.prototype; // true // 驗證繼承關係: xiaoming instanceof PrimaryStudent; // true xiaoming instanceof Student; // true 

用一張圖來表示新的原型鏈：

注意，函數F僅用於橋接，咱們僅建立了一個new F()實例，並且，沒有改變原有的Student定義的原型鏈。

若是把繼承這個動做用一個inherits()函數封裝起來，還能夠隱藏F的定義，並簡化代碼：

function inherits(Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; } 

這個inherits()函數能夠複用：

function Student(props) { this.name = props.name || 'Unnamed'; } Student.prototype.hello = function () { alert('Hello, ' + this.name + '!'); } function PrimaryStudent(props) { Student.call(this, props); this.grade = props.grade || 1; } // 實現原型繼承鏈: inherits(PrimaryStudent, Student); // 綁定其餘方法到PrimaryStudent原型: PrimaryStudent.prototype.getGrade = function () { return this.grade; }; 

小結

JavaScript的原型繼承實現方式就是：

1. 定義新的構造函數，並在內部用call()調用但願「繼承」的構造函數，並綁定this；

2. 藉助中間函數F實現原型鏈繼承，最好經過封裝的inherits函數完成；

3. 繼續在新的構造函數的原型上定義新方法。