ES6学习笔记（九）ES6的面向对象和继承

创建对象和继承的一般流程

使用class（语法糖）定义一个类。

使用constructor()设置构造函数。

使用extends关键字进行继承。

使用super()函数为子类继承父类的属性。

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    showName() {
        console.log(this.name)
    }
}
let clozer = new Person('clozer', '19')
clozer.showName() // clozer
class SKT extends Person {
    constructor(name, age, id, job) {
        super(name, age)
        this.id = id
        this.job = job
    }
    showWork() {
        console.log(this.name + ' ' + this.age + ' ' + this.id + ' ' + this.job)
    }
}
let faker = new SKT('이상혁', '24', 'Faker', 'SKT T1 MID')
faker.showWork() // 이상혁 24 Faker SKT T1 MID
faker.showName() // 이상혁

get和set对属性进行拦截

读取属性和设置属性，方便实现各种业务逻辑。

// 父类
class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
        this._sex = -1
    }
    showName() {
        console.log(this.name)
    }
    // get方法获取属性
    get sex() {
        if (this._sex === 1) {
            return 'male'
        } else if (this._sex === 0) {
            return 'female'
        } else {
            return 'error'
        }
    }
    // set方法设置属性
    set sex(value) {
        if (value === 1 || value === 0) {
            this._sex = value
        }
    }
}
// 子类继承父类
class Player extends Person {
    constructor(name, age, team) {
        super(name, age)
        this.team = team
    }
    showTeam() {
        console.log(this.team)
    }
}

// 父类测试
let faker = new Person('Faker', 24)
faker.sex = 1
console.log(faker.sex) // male

// 子类测试，可以继承父类的set和get方法
let Wolf = new Player('Wolf', 24, 'SK Telecom T1')
Wolf.sex = 1
console.log(Wolf.sex) // male

静态方法和属性

JavaScript可以使用static关键字设置静态方法。

但是很遗憾，无法使用static设置静态属性。

我们可以使用ES5的语法进行静态属性的设置。

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    // 设置静态方法
    static test() {
        console.log('Static Test')
    }
}
// 使用ES5语法
Person.sex = 'female'
Person.test() // Static Test
console.log(Person.sex) // female