ES6关键字Class
Class关键字给我们提供了一种方式离开那些繁琐的prototype、call,写出逻辑清晰的代码。
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