es6基礎(chǔ)0x018：類、繼承、重寫、超類調(diào)用

LiuRhoRamen 發(fā)布于2019-08-26 12:23 / 2309人閱讀

摘要：要注意的是，如果要重寫構(gòu)造函數(shù)，必須要在構(gòu)造函數(shù)的第一行調(diào)用父類的構(gòu)造函數(shù)，在而在其他地方，則可以通過或者調(diào)用父級的變量或者方法

0x000 概述

es6真正的引入的面相對象的類，以前我們總是通過其他手段來模擬類這種形式，現(xiàn)在終于有了，我有點開心，又有點難過，因為在我看來，js并不是所謂的面相對象的語言，反而更偏向函數(shù)式，原型繼承是他真正的面目。面相對象不過是人們在思考問題時總結(jié)出一套有效的、大家都認同的解決問題的思路。在其他語言、各種領(lǐng)域取得成功之后，又將這種思想帶入js中，為的是將已有的經(jīng)驗可以復(fù)用到js，從而更有效的解決js中的問題。

的確，面相對象是一個很有用的思考模塊，在分解真實世界、大型項目的維護上有很大的好處，但是卻缺少了函數(shù)式的靈巧。曾經(jīng)想用完全面向?qū)ο蟮姆绞綄懸粋€redux，卻發(fā)現(xiàn)無法用這種方式寫出compose這種神奇的東西。

或許是我還沒能在面相對象和函數(shù)式之間取得一種平衡，以取得面相對象和函數(shù)式共同的優(yōu)點。

0x001 類

普通的類

class Person{}

類表達式

// 匿名類
let Person=class{}
// 具名類
let Person=class Person{}

0x001 初始化類和構(gòu)造函數(shù)

實例化類
可以使用new來調(diào)用一個類，從而實例化一個類實例

class Person{}
new Person() // Person{}

構(gòu)造函數(shù)
使用new實例化一個類實例之后，將會自動調(diào)用該類的構(gòu)造函數(shù)constructor，并且可以傳遞參數(shù)

class Person{
    constructor(name, age){
        console.log(name, age)
    }
}
new Person("jack", 23) // "jack", 23

類變量
類中可以保存一些變量，在類中，可以通過this.variable_name來訪問，在類外，可以通過instance_name.variable_name只有類實例可以訪問他們，并且每個類實例的變量都是屬于每個類實例的。

class Person {
   constructor(nickname, age){
       this.nickname = nickname
       this.age = age
   }
}
console.log(Person.nickname) // undefined
console.log(Person.age) // undefined

let person=new Person("jack",23) 
console.log(person.nickname) // "jack"
console.log(person.age) // 23

let person2=new Person("maria",11) 
console.log(person2.nickname) // "maria"
console.log(person2.age) // 11

類方法
類方法是定義在類內(nèi)部的函數(shù)，可以在類內(nèi)部調(diào)用：this.function_name(params)，也可以在實例上調(diào)用：instance_name.function_name(params)

class Person{
    constructor(nickname, age){
        this.nickname = nickname
        this.age =age
    }
    getNickname(){
        return this.nickname
    }
    getAge(){
        return this.age
    }
    summary(){
        return  `${this.nickname}:${this.age}`
    }
}
let person=new Person("jack", 23)
console.log(person.getNickname()) // ""jack
console.log(person.getAge()) // 23
console.log(person.summary()) // "jack:23"

靜態(tài)方法
靜態(tài)方法是可以通過類直接調(diào)用的方法，不需要實例化

class Person{
    static sayHello(){
        console.log("hello")
    }
}
Person.sayHello() // "hello"

繼承

繼承就是將父類所有的方法和都繼承下來，包括構(gòu)造函數(shù)

class Person{
        constructor(nickname, age){
            this.nickname = nickname
            this.age =age
        }
        getNickname(){
            return this.nickname
        }
        getAge(){
            return this.age
        }
        summary(){
            return  "this is Person"
        }
}
class Male extends Person {}
let  male=new Male("jack",23)
console.log(male.nickname) // "jack"
console.log(male.age) // 23
console.log(male.getNickname()) // "jack"
console.log(male.getAge()) // 23
console.log(male.summary()) // "this is Person"

0x003 重寫

有時候我們不希望一個函數(shù)的作用和父類一致，比如在上面的栗子中，male.summary()返回this is Person，不符合我們的逾期，我們希望返回this is Male，這個時候就可以用到重寫，只要寫一個和父類相同名字和函數(shù)就行了，甚至參數(shù)個數(shù)不一致也不影響

class Person{
        constructor(nickname, age){
            this.nickname = nickname
            this.age =age
        }
        getNickname(){
            return this.nickname
        }
        getAge(){
            return this.age
        }
        summary(){
            return  "this is Person"
        }
}
class Male extends Person {
    summary(){
        return  "this is Male"
    }
}
let male=new Male()
console.log(male.summary()) // this is Male

0x004 調(diào)用超類

有時候我們希望在父類的流程基礎(chǔ)上添加一些自己的邏輯，這個時候就可以用到調(diào)用超類。要注意的是，如果要重寫構(gòu)造函數(shù)，必須要在構(gòu)造函數(shù)的第一行調(diào)用父類的構(gòu)造函數(shù)super(...params)，在而在其他地方，則可以通過super.variable_name或者super.function_name(params)調(diào)用父級的變量或者方法

class Person{
        constructor(nickname, age){
            this.nickname = nickname
            this.age =age
        }
        getNickname(){
            return this.nickname
        }
        getAge(){
            return this.age
        }
        summary(){
            return  "this is Person"
        }
}
class Male extends Person {
    constructor(nickname, age){
        super(nickname, age)
        this.sex="male"
    }
    getSex(){
        return this.sex
    }
    summary(){
        return  super.summary()+", and this is Male"
    }
}
let male=new Male()
console.log(male.sex) // male
console.log(male.summary) //this is Person, and this is Male