ES6?class類實(shí)現(xiàn)繼承實(shí)例詳解

更新時(shí)間：2022年10月10日 10:06:49 作者：「不一」

傳統(tǒng)的javascript中只有對象,沒有類的概念,下面這篇文章主要給大家介紹了關(guān)于ES6?class類實(shí)現(xiàn)繼承的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.實(shí)現(xiàn)類的繼承

在ES6 中新增了 extends關(guān)鍵字，用于實(shí)現(xiàn)類的繼承。

MDN中對 extends關(guān)鍵字的解釋是這么說的：

**定義：****extends**關(guān)鍵字用于類聲明或者類表達(dá)式中，以創(chuàng)建一個(gè)類，該類是另一個(gè)類的子類。

語法：
class ChildClass extends ParentClass { ... }
描述： extends關(guān)鍵字用來創(chuàng)建一個(gè)普通類或者內(nèi)建對象的子類。

接下里展示一段示例代碼展示一下ES6中 extends關(guān)鍵字實(shí)現(xiàn)的繼承：

// 父類名字Parent
class Parent {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    running () {
        console.log(this.name + ' 在跑步~')
    }

}
// 使用關(guān)鍵字創(chuàng)建子類Son繼承父類
class Son extends Parent {
   
}
const P1 = new Son('Jee', 20)
console.log(P1) // Son { name: 'Jee', age: 20 }
P1.running() // Jee 在跑步~

只需要一個(gè)extends 關(guān)鍵字即可輕松實(shí)現(xiàn)繼承父類中的constructor屬性

2. Super關(guān)鍵字

注意：在子類（派生類）的構(gòu)造函數(shù)中使用this或者返回默認(rèn)對象之前，必須先通過super調(diào)用父類的構(gòu)造函數(shù)！

super的使用位置有三個(gè)：

子類的構(gòu)造函數(shù)
實(shí)例方法
靜態(tài)方法

2.1：Super關(guān)鍵字使用方法一：

在子類（派生類）的構(gòu)造函數(shù)中使用this或者返回默認(rèn)對象之前，必須先通過super調(diào)用父類的構(gòu)造函數(shù),否則會報(bào)錯(cuò)。

比如：Son類中constructor屬性中沒有去掉super方法就會報(bào)錯(cuò)。

如下展示正確的使用方法一：

// 父類名字Parent
class Parent {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    running () {
        console.log(this.name + ' 在跑步~')
    }

}
class Son extends Parent {
    constructor(name, age, height) {
        super()
        this.name = name
        this.age = age
        this.height = height
    }
}
const P1 = new Son('Jee', 20, '1.80')
console.log(P1) // Son { name: 'Jee', age: 20, height: '1.80' }

上面示例代碼中子類中有兩句重復(fù)的邏輯語句，在父類中我們已經(jīng)聲明過了，在子類中再寫一次就冗余了，讓我們接下來看看有沒有什么好的解決辦法。

2.2：Super關(guān)鍵字使用方法二：

class Son extends Parent {
    constructor(name, age, height) {
        super(name,age)
        // this.name = name
        // this.age = age
        this.height = height
    }
}

這就是上面的代碼冗余的問題解決辦法：可以將name和age寫到super參數(shù)中就可以直接繼承父類的邏輯，減少冗余代碼。

3.重寫父類方法

子類繼承父類之后，子類中也可以直接調(diào)用父類的方法（最上方示例代碼中有涉及這里就不再做展示了）。

但是在很多情況下，父類中的方法是達(dá)不到子類的要求的，那么子類就可以有一下兩個(gè)操作：

3.1：重寫父類方法

class Parent {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    running () {
        console.log(this.name + ' 在跑步~')
    }

}

class Son extends Parent {
    constructor(name, age, height) {
        super(name, age)
        this.height = height
    }
    // 重寫父類方法
    running () {
        console.log('我看見' + this.name + '在跑步~')
    }

}
const P1 = new Son('Jee', 20, '1.80')
console.log(P1)
P1.running()

3.2：新增方法，并在新增方法中調(diào)用父類方法內(nèi)容

class Parent {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    parentMethod () {
        console.log('處理邏輯一')
        console.log('處理邏輯二')
        console.log('處理邏輯三')
    }
}

class Son extends Parent {
    constructor(name, age, height) {
        super(name, age)
        this.height = height
    }
    sonMethod () {
        // 調(diào)用父類的方法供子類使用
        super.running()
        console.log('處理邏輯四')
        console.log('處理邏輯五')
        console.log('處理邏輯六')
    }
}
const P1 = new Son('Jee', 20, '1.80')
console.log(P1) // Son { name: 'Jee', age: 20, height: '1.80' }

P1.sonMethod()
// 處理邏輯一
//處理邏輯二
//處理邏輯三
//處理邏輯四
//處理邏輯五
//處理邏輯六
//我看見Jee在跑步~