ECMAScript 6 语法学习——类

概念

在ECMAScript 6中新引入了class(类)的概念，使JavaScript更像传统的面向对象编程语言。class写法让对象原型的写法更加清晰，不再需要用其它方式来模拟类的定义和继承。

定义类

在ECMAScript 5及早先版本中，没有类的概念，可以通过构造函数和原型混合使用的方式来模拟定义一个类。

代码示例如下

function Car(color, doors) {
    this.color = color
    this.doors = doors
}

Car.prototype.showColor = function() {
    console.log(this.color)
}

var newCar = new Car("red", 4)
newCar.showColor()

ECMAScript 6引入了class关键字，使得累的定义更接近Java、C++等面向对象语言中的写法。

使用class声明语法来改写上述代码

class Car {
    // 等价于Car构造函数
    constructor(color, doors) {
        this.color = color
        this.doors = doors
    }
    // 等价于Car.prototype.showColor
    showColor() {
        console.log(this.color)
    }
}

let newCar = new Car("red", 4)
newCar.showColor()

在类声明语法中，使用特殊的constructor方法名来定义构造函数，且由于这种类使用简写语法来定义方法，因此不需要添加function关键字。

自有属性是对象实例中的属性，不会出现在原型上，如本例中的color和doors
自有属性只能在类的构造函数（即constructor方法）或方法中创建

使用表达式的形式定义类

let Car = class {
   // 等价于Car构造函数
    constructor(color, doors) {
        this.color = color
        this.doors = doors
    }
    // 等价于Car.prototype.showColor
    showColor() {
        console.log(this.color)
    }
}

let newCar = new Car("red", 4)
newCar.showColor()

使用类表达式，可以实现立即调用类构造函数从而创建一个类的单例对象。

使用new调用类表达式

let car = new class {
   // 等价于Car构造函数
    constructor(color, doors) {
        this.color = color
        this.doors = doors
    }
    // 等价于Car.prototype.showColor
    showColor() {
        console.log(this.color)
    }
}("red", 4)

car.showColor()

这段代码先创建了一个匿名类表达式，然后立即执行。按照这种模式可以使用类语法创建单例，并且不会再作用域中暴露类的引用。

访问器属性

访问器属性是通过关键字get和set来创建的，语法为关键字get或set后跟一个空格和相应的标识符。
与自由属性不同的是，访问器属性是在原型上创建的。

代码示例如下

class Car {
    constructor(name, doors) {
        this._name = name
        this.doors = doors
    }
    // 只读属性
    get desc() {
        return `${this.name} is worth having.`
    }

    get name() {
        return this._name
    }

    set name(value) {
        this._name = value
    }
}

let car = new Car("Benz", 4)
// Benz
console.log(car.name)
// Benz is worth having.
console.log(car.desc)
car.name = "Ferrari"
// Ferrari
console.log(car.name)
// TypeError : Cannot set property 'desc' of undefined
car.prototype.desc = "very good"

在构造函数中定义一个_name属性，_name属性前面的下划线是一种常用的约定记号，用于表示只能通过对象方法访问的属性。当访问属性name时，实际上是调用它的取值方法；当给属性name赋值时，实际上是调用它的设值方法。因为是方法实现，所以定义访问器属性时，可以添加一些访问控制或额外的代码逻辑。
同时，可以通过单独添加get或set方法，来控制属性的只读或只写属性。

静态方法

ECMAScript 6引入了关键字static，用于定义静态方法。除构造函数外，类中所有的方法和访问器属性都可以用static关键字来定义。

代码示例如下

class Car {
    constructor(name, doors) {
        this.name = name
        this.doors = doors
    }

    showName() {
        console.log(this.name)
    }

    static createDefault() {
        return new Car("Audi", 4)
    }
}

let car = Car.createDefault()
// Audi
car.showName()
// TypeError : car.createDefault is not a function
car.createDefault()

使用static关键字定义的静态方法，只能通过类名来访问，不能通过实例来访问。此外，ECMAScript 6 并没有提供静态属性，即不能在实例属性前面添加static关键字。

类的继承

同样的，ECMAScript 5及早先版本也不支持类的继承，要模拟实现类的继承，需要采用一些额外的手段来实现。
而在ECMAScript 6中提供了extends关键字，这样可以很轻松地实现类的继承。

代码示例如下

class Person {
    constructor(name) {
        this.name = name
    }

    work() {
        console.log("working...")
    }
}

class Student extends Person {
    constructor(name, no) {
        // 调用父类的constructor(name)
        super(name)
        this.no = no
    }
}

let student = new Student("John", 1)
// working...
student.work()

Student类通过使用关键字extends继承Person类，Student类成为派生类
派生类中如果定义了构造函数，则必须调用super()，并且要在访问this之前调用
如果派生类中没有定义构造函数，那么在创建派生类实例时，会自动调用super()并传入参数

派生类中不定义构造函数

class Person {
    constructor(name) {
        this.name = name
    }

    work() {
        console.log("working...")
    }
}

// 没有构造函数
class Teacher extends Person {}

let teacher = new Teacher("John")
// working...
teacher.work()

派生类中，重写父类方法

class Person {
    constructor(name) {
        this.name = name
    }

    work() {
        console.log("working...")
    }
}

class Student extends Person {
    constructor(name, no) {
        super(name)
        this.no = no
    }

    // 重写父类方法
    work() {
        console.log("studying...")
    }
}

let student = new Student("John", 1)
// studying...
student.work()

在派生类中调用父类方法

class Person {
    constructor(name) {
        this.name = name
    }

    work() {
        console.log("working...")
    }
}

class Student extends Person {
    constructor(name, no) {
        super(name)
        this.no = no
    }

    work() {
        super.work()
        console.log("studying...")
    }
}

let student = new Student("John", 1)
// working...
// studying...
student.work()