摘要:通常有這兩種繼承方式接口繼承和實現繼承。理解繼承的工作是通過調用函數實現的,所以是寄生,將繼承工作寄托給別人做,自己只是做增強工作。適用基于某個對象或某些信息來創建對象,而不考慮自定義類型和構造函數。
一、繼承的概念
繼承,是面向對象語言的一個重要概念。
通常有這兩種繼承方式:接口繼承和實現繼承。接口繼承只繼承方法簽名,而實現繼承則繼承實際的方法。
《JS高程》里提到:“由于函數沒有簽名,在‘ECMAScript’中無法實現接口繼承。”
等等,函數簽名是什么東西?據MDN文檔定義如下:
函數簽名(類型簽名、方法簽名)定義了函數或方法的輸入與輸出。
簽名可包含以下內容:
參數 及參數的 類型
一個的返回值及其類型
可能會拋出或傳回的異常
該方法在 面向對象程序中的可用性方面的信息(如public、static或prototype)。
看起來好復雜啊,我們換成強類型的語言的角度會不會更好理解?
譬如,C的函數簽名就是我們熟悉的函數聲明:
int func(double d);
此時:參數名為d,參數類型為double,返回值為func(d),返回值類型為int。
再如,Java的函數簽名:
public static void main(String[] args)
此時:參數名為args,參數類型為String [],返回值類型為void所以該方法沒有返回值,訪問修飾符public表示該方法是公有方法,static表示該方法是一個類方法而非實例方法……
現在,我們知道函數簽名是怎么回事了。那么,接口繼承又是什么東西?相信大家會遙想起Java中的interface,implements等……在此就不班門弄斧了。
我們知道,JavaScript是類型松散的語言,不像Java它們有嚴格的變量類型檢查。所以,JS的函數才沒有簽名,才無法實現接口繼承。
那么,JS的實現繼承是怎么回事呢?
二、JS的繼承
原型鏈的基本模式
理解:通過創建SuperType的實例,并將該實例賦給SubType.prototype,來實現SubType繼承SuperType。instance的原型指向SubType,SubType的原型指向SuperType,SuperType的原型指向Object,如此構成了原型鏈。
缺點:對象實例共享所有繼承的屬性和方法,不適宜多帶帶適用
function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; }; function SubType() { this.subproperty = false; } //SubType繼承SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function() { return this.subproperty; }; var instance = new SubType(); alert(instance.getSuperValue()); //true
于是,有下一個招式,來解決包含引用類型值的原型屬性會被所有實例共享的弱點。
借用構造函數
理解:“借用”超類型構造方法,在新的子類型對象上執行超類型函數定義的所有對象初始化代碼
適用:解決超類型的引用類型值被所有子類型對象實例共享,而且子類型可向超類型傳參
缺點:不能做到函數復用,從而降低效率,不適宜多帶帶適用
function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; //引用類型值 } function SubType() { SuperType.call(this, "A"); //繼承SuperType “借用”超類型的構造函數 并傳參 this.age = 20; //實例屬性 } var instance1 = new SubType(); //instance1.name: "A", instance1.age: 20 instance1.colors.push("black"); //instance1.colors: "red, blue, green, black" var instance2 = new SubType(); //instance2.colors: "red, blue, green"
接下來,組合技能出大招!
組合繼承
理解:將原型鏈和借用構造函數組合到一起,通過原型鏈來繼承共享的原型屬性和方法,通過借用構造函數來繼承實例屬性。
適用:最常用的繼承模式。
缺點:調用兩次超類型構造函數,在SubType上創建了多余的屬性,造成超類型對象的實例屬性的重寫
function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.name); }; function SubType(name, age) { SuperType.call(this, name); //繼承屬性 第二次調用超類型構造函數 新實例得到兩個實例屬性name,colors this.age = age; } SubType.prototype = new SuperType(); //繼承方法 第一次調用超類型構造函數 SubType.prototype得到兩個實例屬性name,colors SubType.prototype.sayAge = function() { alert(this.age); }; var instance1 = new SubType("妹妹", 18); instance1.colors.push("black"); alert(instance1.colors); //"red, blue, green, black" instance1.sayName(); //"妹妹" instance1.sayAge(); //18 var instance2 = new SubType("弟弟", 20); alert(instance2.colors); //"red, blue, green" instance2.sayName(); //"弟弟" instance2.sayAge(); //20
這是打boss的大招,那我怎么對付小怪?
原型式繼承
理解:本質是對給定對象的淺復制
適用:不必預先定義構造函數來實現繼承,只想讓一個對象與另一個對象保持類似
缺點:引用類型值的屬性被共享,如同原型模式一樣
function object(o) { //對o進行淺復制 function F() {} //創建一個臨時性的構造函數 F.prototype = o; //將傳入的對象o作為F的原型 return new F(); //返回F的新實例 } var person = { name: "A", friends: ["B", "C", "D"] }; var anotherPerson = object(person); // Object.create(person) anotherPerson.name = "E"; anotherPerson.friends.push("F"); var yetAnotherPerson = object(person); //Object.create(person) yetAnotherPerson.name = "G"; yetAnotherPerson.friends.push("H"); alert(person.friends); //"B, C, D, F, H" 引用類型值的屬性被共享啦
注意:Object.create()方法的第二個參數,新對象的額外屬性的對象,會覆蓋原型對象上的同名屬性。
var anotherPerson = Object.create(person, { name: { value: "E" } }); alert(anotherPerson.name); // "E"
打了這么久,能不能讓小招也升級(封裝)一下啊?
寄生式繼承
創建一個僅用于封裝繼承過程的函數,該函數在內部以某種方式來增強對象,最后再像真的是它做了所有工作一樣返回對象。
理解:繼承的工作是通過調用函數實現的,所以是“寄生”,將繼承工作寄托給別人做,自己只是做增強工作。
適用:基于某個對象或某些信息來創建對象,而不考慮自定義類型和構造函數。
缺點:不能做到函數復用,從而降低效率
function createAnother(original) { var clone = object(original); //通過調用函數創建一個新對象 clone.sayHi = function() { //以某種方式來增強這個對象 alert("hi"); } return clone; } var person = { name: "A", friends: ["B", "C", "D"] }; var anotherPerson = createAnother(person); //不僅有person所有屬性方法,還有自己的sayHi方法 anotherPerson.sayHi(); //"hi"
經驗攢足,我要把之前打boos的組合大招升到滿級!
寄生組合繼承
理解:通過借用構造函數來繼承屬性,通過原型鏈的混用形式來繼承方法。用寄生式繼承來繼承超類型的原型,再將增強后的結果指定給子類型的原型。
適用:引用類型最理想的繼承模式,高效,只調用了一個SuperType構造函數
function inheritPrototype(subType, superType) { var prototype = object(superType.prototype); //創建對象 超類型原型的副本 prototype.constructor = subType; //增強對象 彌補因重寫原型而失去默認的constructor屬性 subType.prototype = prototype; //指定對象 } function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.name); }; function SubType(name, age) { SuperType.call(this, name); //繼承屬性 this.age = age; } inheritPrototype(SubType, SuperType); //繼承方法 SubType.prototype.sayAge = function() { alert(this.age); };三、ES6的繼承
extends關鍵字用來創建一個普通類或者內建對象的子類。
class A { ... } class B extends A { ... }
其中,
B.__proto__ === A // true B.prototype.__proto__ === A.prototype // true
因為extends實現了:
Object.setPrototypeOf(B.prototype, A.prototype); //B.prototype.__proto__ = A.prototype; Object.setPrototypeOf(B, A); //B.__proto__ = A
extends更具體的實現方法參見面試官問:JS的繼承,在此就不班門弄斧了~
完~若有不足,請多指教,不勝感激!
以上代碼借鑒于《JS高級程序設計》
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103867.html
摘要:深入系列第十五篇,講解各種繼承方式和優缺點。優點融合原型鏈繼承和構造函數的優點,是中最常用的繼承模式。寄生組合式繼承為了方便大家閱讀,在這里重復一下組合繼承的代碼組合繼承最大的缺點是會調用兩次父構造函數。 JavaScript深入系列第十五篇,講解JavaScript各種繼承方式和優缺點。 寫在前面 本文講解JavaScript各種繼承方式和優缺點。 但是注意: 這篇文章更像是筆記,哎...
摘要:深入之繼承的多種方式和優缺點深入系列第十五篇,講解各種繼承方式和優缺點。對于解釋型語言例如來說,通過詞法分析語法分析語法樹,就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇,講解JavaScript各種繼承方式和優缺點。 寫在前面 本文講解JavaScript各種繼承方式和優缺點。 但是注意: 這篇文章更像是筆記,哎,再讓我...
摘要:深入系列的第一篇,從原型與原型鏈開始講起,如果你想知道構造函數的實例的原型,原型的原型,原型的原型的原型是什么,就來看看這篇文章吧。讓我們用一張圖表示構造函數和實例原型之間的關系在這張圖中我們用表示實例原型。 JavaScript深入系列的第一篇,從原型與原型鏈開始講起,如果你想知道構造函數的實例的原型,原型的原型,原型的原型的原型是什么,就來看看這篇文章吧。 構造函數創建對象 我們先...
摘要:寫在前面深入系列共計篇已經正式完結,這是一個旨在幫助大家,其實也是幫助自己捋順底層知識的系列。深入系列自月日發布第一篇文章,到月日發布最后一篇,感謝各位朋友的收藏點贊,鼓勵指正。 寫在前面 JavaScript 深入系列共計 15 篇已經正式完結,這是一個旨在幫助大家,其實也是幫助自己捋順 JavaScript 底層知識的系列。重點講解了如原型、作用域、執行上下文、變量對象、this、...
摘要:深入系列第十四篇,講解創建對象的各種方式,以及優缺點。也就是說打著構造函數的幌子掛羊頭賣狗肉,你看創建的實例使用都無法指向構造函數這樣方法可以在特殊情況下使用。 JavaScript深入系列第十四篇,講解創建對象的各種方式,以及優缺點。 寫在前面 這篇文章講解創建對象的各種方式,以及優缺點。 但是注意: 這篇文章更像是筆記,因為《JavaScript高級程序設計》寫得真是太好了! 1....
閱讀 2102·2021-11-19 09:58
閱讀 1701·2021-11-15 11:36
閱讀 2867·2019-08-30 15:54
閱讀 3386·2019-08-29 15:07
閱讀 2759·2019-08-26 11:47
閱讀 2805·2019-08-26 10:11
閱讀 2496·2019-08-23 18:22
閱讀 2744·2019-08-23 17:58