ES6 中关于Class类的继承理解

ES5 和 ES6 在类和继承的不同，举例如下：

ES5 的类和继承：

function Person(name){
    this.name = name;
}
Person.prototype.showName = function(){
    return this.name;
};
var ops = new Person('娃哈哈');
console.log(ops.showName());  // 娃哈哈

ES6 的类和继承：

class Person{  // Person类  它也是一个函数
    constructor(name){  // 构造函数
        this.name = name;
    }
    showName(){
        return this.name;
    }
}
var p1 = new Person('娃哈哈');
console.log(p1.showName());  // 娃哈哈

 

---

constructor的中文意思就是构造，他在这里代表的就是构造函数，那么class是一个类也是一个函数，只不过ES6标准是把这个函数包装成了一个class的写法而已，在new一个实例的时候，构造函数自动执行。

---

 

Class 可以通过 extends 关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多，举例如下：

ES5 之前的写法：

function Person(name){  // 父类
    this.name = name;
}
Person.prototype.showName = function(){
    return this.name;
};
function SubPerson(name,job){  // 子类
    Person.call(this,name);  // 子类继承父类的属性 需要将this指向父类中的name
    this.job = job;  // job是子类自己的属性
}
SubPerson.prototype = new Person();  // 子类继承父类的方法
var p1 = new SubPerson('娃哈哈');
console.log(p1.name);  // 娃哈哈
// console.log(p1.showName());  // 娃哈哈

ES6 有Class类之后的写法：

class Person{
    constructor(name){
        this.name = name;
    }
    showName(){
        return this.name;
    }
}
class SubPerson extends Person{
    constructor(name,job){
        super(name);    // 指向父类的构造函数
        this.job = job;
    }
    showJob(){
        return this.job;
    }
}
var p1 = new SubPerson('娃哈哈','喜洋洋');
console.log(p1.name);  // 娃哈哈
// console.log(p1.showName());  // 娃哈哈
// console.log(p1.job); // 喜洋洋

 

---

 

estends 就是继承的意思，super 就是指向父类的构造函数，指代了整个prototype对象或者_proto_指针指向的对象。

如果在子类中也写入showName方法，和父类中的方法重名，这样就会覆盖父类的，倘若不想覆盖而是想引用父类的showName方法，那么就在子类的showName方法中通过super来调用父类的showName：super.showName

 

---

该文引用了https://www.jianshu.com/p/129976ab0015，用作学习记录