【Infragistics教程】在javascript構造函數中建立基本繼承

【下載Infragistics Ultimate最新版本】

用javascript建立對象有四種方法。具體以下：

1. 對象做爲文本
2. 構造函數調用模式
3. 建立（）方法
4. 在ES6以後使用類

繼承的實現因對象建立方法而異。本文將解釋如何在函數構造函數之間建立繼承。

假設您有一個函數：

1 2 3 4

function animal(name, age) {     this.name = name;     this.age = age; }

若是使用new操做符調用animal函數，將建立一個對象。這種對象建立方式也稱爲「構造函數調用模式」。

1 2 3 4

var dog = new animal('foo', 5); console.log(dog); var cat = new animal('koo', 3); console.log(cat);

對象dog和cat都有本身的名稱和年齡屬性。若是但願在全部對象之間共享屬性或方法，請將其添加到函數原型中。

1 2 3 4

animal.prototype.canRun = function () {        console.log('yes ' + this.name + ' can run !'); }

使用javascript原型鏈，dog和cat對象均可以訪問canrun方法。

1 2 3 4 5

var dog = new animal('foo', 5); dog.canRun(); // yes foo can run   var cat = new animal('koo', 3); cat.canRun(); // yes koo can run

接下來，讓咱們建立另外一個構造函數——人：

1 2 3 4 5 6 7 8

function human(name, age, money) {     this.name = name ;     this.age = age ;     this.money = money; } human.prototype.canEarn = function () {     console.log('yes ' + this.name + 'can earn'); }

此時，人與動物的功能沒有任何關係。然而，咱們知道人也是動物。人工構造有兩個問題。

1. 它有重複的名稱和年齡初始化代碼。爲此，應使用動物建造師。
2. 它與動物建造師沒有任何聯繫

上述兩個問題能夠經過在動物和人類功能構建者之間建立繼承來消除。

您能夠經過以下修改人工函數來解決代碼複製的問題1：

1 2 3 4

function human(name, age, money) {     animal.call(this, name, age);     this.money = money; }

如今，在人類函數中，咱們使用call方法手動傳遞當前對象做爲動物函數中「this」的值。這種方法也稱爲間接調用模式。如今，能夠建立一我的類對象實例，以下所示：

1 2	var h1 = new human('dj', 30, '2000 $'); console.log(h1);

到目前爲止，咱們已經解決了代碼複製的第一個問題，可是人類的功能仍然與動物的功能無關。若是您嘗試對h1對象調用canrun方法，javascript將向您拋出一個錯誤。

1	h1.canRun(); // throw error canRun is not a function

您能夠經過將人類功能原型與動物功能構造函數原型連接來解決這個問題。有兩種方法能夠作到這一點。

使用γ原型

使用object.create（）方法

您可使用object.create（）連接函數構造函數的原型，以下所示：

1	human.prototype = Object.create(animal.prototype);

您可使用_uu proto_uuu連接函數構造函數的原型，以下所示：

1	human.prototype.__proto__ = animal.prototype;

更推薦object.create（）方法，由於在許多瀏覽器中可能不支持_uuProto。在連接原型以後，在一種方式下，您已經在動物和人類函數構造函數之間建立了繼承。人的對象實例能夠讀取動物功能的全部屬性，而且能夠執行動物功能方法。

下面列出了實現函數構造函數之間繼承的完整源代碼，供您參考：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

function animal(name, age) {        this.name = name;     this.age = age;    }    animal.prototype.canRun = function () {        console.log('yes ' + this.name + ' can run !'); }    var dog = new animal('foo', 5); dog.canRun();    var cat = new animal('koo', 3); cat.canRun(); function human(name, age, money) {     animal.call(this, name, age);     this.money = money; }    human.prototype = Object.create(animal.prototype);    human.prototype.canEarn = function () {     console.log('yes ' + this.name + 'can earn'); } // human.prototype.__proto__ = animal.prototype; var h1 = new human('dj', 30, '2000 $'); h1.canRun(); h1.canEarn();

要在函數構造函數之間建立繼承，請始終執行如下兩個操做：

1. 使用call或apply調用父構造函數。
2. 將子構造函數原型連接到父構造函數原型