004 ES6关键字Class

61 阅读1分钟

ES6关键字Class

Class关键字给我们提供了一种方式离开那些繁琐的prototypecall,写出逻辑清晰的代码。

1. 如何使用Class

1.1 创建类

使用ES6中的class来实现类:

class Employee {
    constructor(name, dept) {
        this.name = name
        this.dept = dept
    }
    static fun() {
        console.log('static')
    }
    getName() {
        console.log(this.name)
    }
}

这里创建了一个类,含有name和dept两个参数,并且含有一个静态方法fun和一个方法getName。

1.2 通过继承实现子类

使用extents实现继承进行比较:

class Manager extends Employee{
    constructor(name, dept, reports) {
        super(name, dept)
        this.reports = reports
    }
}

这里通过继承父类Employee创建了子类Manager,比父类多一个reports的属性,其余全部继承自父类。

2. ES6和ES5的比较

下面是ES5和ES6两种方式创建子类和父类:

// ES6
class Employee{
    constructor(name,dept) {
        this.name = name
        this.dept = dept
    }
    static fun() {
        console.log('static')
    }
    getName() {
        console.log(this.name)
    }
}
​
// ES5
function Employee(name, dept) {
    this.name = name
    this.dept = dept
}
Employee.fun = function() {
    console.log('static')
}
Employee.prototype.getName = function() {
    console.log(this.name)
}

再比较子类Manager, 使用extends继承创建的子类Manager自然继承了其中的属性和方法(包括静态方法),但是要在ES5中实现继承,不仅需要通过call解决调用的问题,同时静态方法无法直接继承,需要在子类中二次声明才能继承。

// ES6
class Manager extends Employee {
    constructor(name,dept,reports) {
        super(name, dept)
        this.reports = reports
    }
}
​
// ES5
function Manager(reports,name,dept) {
    Employee.call(this,name,dept)
    this.reports = reports
}
Manager.fun = Employee.fun