如何用 ES6的Class 实现继承

1.Class

ES6提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class Programmer {
    constructor(name, type) {
        this.name = name;
        this.type = type;
    }
    code() {
        console.log(`${this.name} is 正在写代码`);
    }
    job() {
        console.log(`${this.name} is ${this.type}`);
    }
}

const John = new Programmer('John', '前端工程师');
console.log(John.name); // John
console.log(John.type); // 前端工程师
John.code();  //John is 正在写代码
John.job(); //John is 前端工程师

const Huan = new Programmer('Huan', '后端工程师');
console.log(Huan.name); // Huan
console.log(Huan.type); // 后端工程师
Huan.code(); //Huan is 正在写代码
Huan.job(); //Huan is 后端工程师

2.继承

继承是面向对象中老生常谈的一个内容，在ECMAScript6之前，JavaScript中的继承可谓是非常的繁琐的，有各种各样的继承，本质上所有的继承都是离不开原型链的，ES6新增的extends关键字也是通过原型链实现的继承。

// 父类（基类）
class People {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayName() {
        console.log(this.name);
    }
}

// 子类使用 extends 关键字 实现继承
class Programmer extends People {
    constructor(name, type) {
        // super() 调用父类的构造函数
        super(name);
        this.type = type;
    }
    code() {
        console.log(`${this.name} is 正在写代码`);
    }
    job() {
        console.log(`${this.name} is ${this.type}`);
    }
}

const John = new Programmer('John', '前端工程师');
console.log(John.name); // John
console.log(John.type); // 前端工程师
John.code();  //John is 正在写代码
John.job(); //John is 前端工程师
John.sayName(); //John

1. extends 继承父类(原型上的一些方法)；
2. super 调用父级构造方法；
3. 子类对父类同名方法重写，直接写，直接覆盖，就无法获取到父类的同名方法了。
4. 在class上写的方法实际上是在原型对象上面，构造函数中的属性，依然会成为子对象的自有属性。
5. 多个实例共用的属性应该怎么设置呢？这就需要用到静态成员，加static关键字，当然获取的时候也只能通过类名去获取。
6. 构造函数统一更名为contructor,也就是一new,就会自动调用的方法。

3.注意事项

1. class是ES6语法规范，由ECMA委员会发布
2. ECMA只规定语法规则，即我们代码的书写规范，不规定如何实现
3. 以上实现方式都是基于V8引擎实现，也是目前主流的！