JS中的繼承操作實例總結
更新時間：2020年06月06日 10:27:58 作者：Jacano
這篇文章主要介紹了JS中的繼承操作,結合實例形式總結分析了JS中的原型鏈繼承、構造函數(shù)繼承、組合繼承、class繼承等常見繼承操作實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了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]
在子類中調用父類的構造函數(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相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
堆疊柱狀圖將每個柱子進行分割以顯示相同類型下各個數(shù)據(jù)的大小情況?？梢孕蜗蟮谜故疽粋€大分類包含的每個小分類的數(shù)據(jù)，以及各個小分類的占比，顯示的是單個項目與整體之間的關系。本文將利用JavaScript實現(xiàn)堆疊柱狀圖的繪制，需要的可以參考一下2022-03-03
本文主要介紹了在JavaScript中實現(xiàn)復制圖片的方法,先介紹了實現(xiàn)復制的前置知識,包括傳統(tǒng)的 execCommand 方法及其優(yōu)缺點和 Clipboard API,然后詳細闡述了如何將不同形式的圖片轉化為blob對象并通過Clipboard API實現(xiàn)復制,還提及了兼容性問題及預覽、下載圖片的實現(xiàn)思路2025-03-03
下面小編就為大家分享一篇JS控制鼠標拒絕點擊某一按鈕的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
平移和縮放是查看圖像時常用的功能,我們可以放大圖像以查看更多細節(jié),進行圖像編輯,Dynamsoft Document Viewer是一個用于此目的的SDK,它為文檔圖像提供了一組查看器,在本文中,我們將演示如何使用它來平移和縮放圖像,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)搜索欄效果，以及焦點問題的解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要推薦了10 款 SVG 動畫的 JavaScript 庫，非常的實用，效果也非常棒，有需要的朋友可以參考下。2015-03-03
日歷想必大家都比較熟悉吧，實現(xiàn)的方法有很多種，在本文大家將學會到如何使用js簡單實現(xiàn)日歷，感興趣的朋友可以了解下2013-10-10
這篇文章主要介紹了JS中關于filter()方法的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了詳解ES6中class的實現(xiàn)原理，幫助大家更好的理解和學習JavaScript es6，感興趣的朋友可以了解下2020-10-10
文件下載是最常見的流形式返回數(shù)據(jù)的應用場景之一,通過流形式返回文件內容,可以避免將整個文件加載到內存中,從而減少內存消耗,這篇文章主要介紹了前端實現(xiàn)獲取后端返回的文件流并下載的三種方法,需要的朋友可以參考下2025-04-04