JS中的繼承操作實例總結
本文實例講述了JS中的繼承操作。分享給大家供大家參考,具體如下:
1.原型鏈繼承
function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; } function SubType() { ths.subproperty = false; } SubType.prototype = new SuperType(); // 實現(xiàn)繼承 SubType.prototype.getSubValue = function() { return this.subproperty; } var instance = new SubType(); console.log(instance.getSuperValue()); // true
原理:讓SuperType的實例成為子類的原型對象,子類的實例擁有了父類的屬性和方法。但也有弊端,如果父類的屬性是引用類型,這將導致共享的屬性被改變的時候,全部的屬性將被改變,我們一下代碼。
function SuperType() { this.property = [1,2,3]; } SuperType.prototype.getSuperValue = function() { return this.property; } function SubType() { ths.subproperty = false; } SubType.prototype = new SuperType(); // 實現(xiàn)繼承 SubType.prototype.getSubValue = function() { return this.subproperty; } var instance1 = new SubType(); var instance2 = new SubType(); instance1.property.push(4); console.log(instance1.property); // [1,2,3,4] console.log(instance2.property); // [1,2,3,4]
我們修改一處的實例屬性,兩個實例的屬性都會被修改,因為這個屬性是共享的,這也是原型鏈繼承的缺點。
2.構造函數(shù)繼承
function SuperType(name) { this.name = name; this.numbers = [1,2,3]; } function SubType() { SuperType.call(this,"Nicholas"); this.age = 29; } var instance1 = new SubType(); var instance2 = new SubType(); instance1.property.push(4); console.log(instance1.name); // Nicholas console.log(instance1.age); // 29 console.log(instance1.numbers); // [1,2,3,4] console.log(instance2.numbers); // [1,2,3]
在子類中調(diào)用父類的構造函數(shù),每次實例化時都會新建父類的屬性放在新實例中,因此每個實例中的屬性都是不一樣的,改變一個實例的值不會造成另一個實例的值改變。這個繼承方式的缺點是方法的定義不能復用。
3.組合繼承
這個方法將原型鏈繼承和構造函數(shù)繼承結合到一起,融合了他們各自的優(yōu)點。
function SuperType(name) { this.name = name; this.colors = ["red","blue","green"] } SuperType.prototype.sayName = function() { console.log(this.name); } function SubType(name,age) { SuperType.call(this,name); this.age = age; } SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function() { console.log(this.age); } var instance1 = new SubType("Nicholas", 29); var instance2 =new SubType("Greg", 27); instance1.colors.push("black"); console.log(instance1.colors); // red,blue,green,black console.log(instance2.colors); // red,blue,green instance1.sayName(); // Nicholas instance2.sayName(); // Greg instance1.sayAge(); // 29 instance2.sayAge(); // 27
4.class繼承
ES6中可以通過class創(chuàng)建對象,通過關鍵字extends繼承。
class Point { constructor(x, y) { this.x = x; this.y = y; } } class ColorPoint extends Point { constructor(x, y, color) { this.color = color; // ReferenceError super(x, y); this.color = color; // 正確 } }
在ES6的繼承中,子類一定要重寫父類的構造函授的方法,否則會報錯。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
支付寶小程序實現(xiàn)類似微信多行輸入功能(思路詳解)
這篇文章主要介紹了支付寶小程序實現(xiàn)類似微信多行輸入功能,輸入超過 8 行的時候會出現(xiàn)滾動,這樣做的好處就是輸入框不會直接頂?shù)巾撁孀铐敳?支付寶小程序實現(xiàn)多行輸入框:使用textarea多行輸入框實現(xiàn),感興趣的朋友一起看看吧2024-02-02bootstrapValidator bootstrap-select驗證不可用的解決辦法
這篇文章主要為大家詳細介紹了bootStrapValidator和bootStrap-select驗證不可用的解決辦法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01Bootstrap datepicker日期選擇器插件使用詳解
這篇文章主要為大家詳細介紹了Bootstrap datepicker日期選擇器插件的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07JS中的算法與數(shù)據(jù)結構之鏈表(Linked-list)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結構之鏈表(Linked-list),結合實例形式詳細分析了javascript中鏈表的概念、原理、定義及常用操作技巧,需要的朋友可以參考下2019-08-08