es6+最佳入门实践(12)

Posted 2021-02-08 dadifeihong

12.class基础用法和继承

12.1.class基础语法

在es5中，面向对象我们通常写成这样

function Person(name,age) {
    this.name = name;
    this.age = age;
}
Person.prototype.showName = function () {
    console.log(this.name);
};

let p = new Person("xiaoqiang", 10);
p.showName();

上面这种写法与传统的面向对象写法有很大的不同，让学习过其他面向对象语言的同学感到很别扭，因此，在ES6中，增加了语法糖，使用class关键字来定义类，这里说的语法糖的意思简单的理解就是另一种更便捷的写法，编译后的功能实际上是一样的

下面是ES6中定义类的语法：

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    showName(){
        console.log(this.name)
    }
}
let p = new Person("xiaoqiang2", 10);
p.showName();

注意1: constructor是默认添加的方法，当new 关键字去调用类的时候，constructor会默认被执行,即使不写这个constructor方法，也会默认添加一个空方法

constructor(name, age){
    console.log("开始执行了")
    this.name = name;
    this.age = age;
}

注意2: 在类中写的方法之间不能加逗号，否则会报错

class Person{
    constructor(name, age){
        console.log("开始执行了")
        this.name = name;
        this.age = age;
    }
    showName(){
        console.log(this.name)
    },
    showAge(){
        console.log(this.age);
    }
}
let p = new Person("xiaoqiang2", 10);
p.showName();

12.2.继承

在ES6中使用extends关键字来实现继承

class Parent{
    constructor(name, age){
        console.log("开始执行了");
        this.name = name;
        this.age = age;
    }
    showName(){
        console.log(this.name)
    }
}

//Child去继承 Parent
class Child extends  Parent{
    
}

let c = new Child('nodeing', 20);
console.log(c);

上面代码就是继承的基本写法，只是我们并没有在子类中去增加方法，此时，子类相当于去拷贝了父类

注意1: 在子类中如果重写父类的constructor方法，需要首先调用supper方法

class Parent{
    constructor(name, age){
        console.log("开始执行了");
        this.name = name;
        this.age = age;
    }
    showName(){
        console.log(this.name)
    }
}

class Child extends  Parent{
    constructor(name, age, gender){
        super(name, age);
        this.gender = gender
    }
}

let c = new Child('nodeing', 20);
console.log(c);

注意2: 如果这样写会报错：

class Child extends Parent{
    constructor(name, age, gender){
        this.gender = gender
        super(name, age);
    }
}

视频教程地址：http://edu.nodeing.com/course/50