ES6面向对象的浅理解。

Posted 2020-09-28

网上一些es6资源还是很多的在对于es6面向这块比较少，所以新人在学习的时候做了一些总结。

因本人并不资深也能看懂，直接贴代码。

class Person{
    //为对象添加属性
    constructor(name=‘default‘,age=0){ //给参数传默认值，防止调用时忘记传实参而报错
        this.name=name;
        this.age=age;
    }
    //为对象添加方法
    showName(){
        alert(this.name);
    }
    showAge(){
        alert(this.age);
    }
    sayAll(){
        alert(`My name is ${this.name}
My age is ${this.age}
My job is ${this.job}`)
    }
}

//继承
class SomeBody extends Person{ //这里即可实现子类的继承
    //继承之后，添加子类特有的属性
    constructor(name,age,job){
        super(name,age); //使用super()将父类的属性继承过来，同时添加子类自己的新属性。
                                         //如果不加，这个constructor将会把从父类继承的constructor中的属性和方法覆盖，从而使子类没有继承name,age属性，而报错
        this.job=job;
    }
    //继承之后，添加子类特有的方法
    showJob(){
        alert(this.job);
    }
}

const person1 =new Person(‘javascript‘,20,‘Programer‘);
person1.showName(); //JavaScript
person1.showAge();  //20
person1.sayAll();        //虽然sayAll方法中有提到 this.job。 但是构造函数Person参数只有name和age，也未定义job所以会弹出“My job is undefined”。
const person2=new SomeBody(‘Milo‘,18,‘monkey‘);
person2.showName(); //Milo
person2.showAge();    //32
person2.showJob();    //monkey
person2.sayAll();   //相当于sayAll方法写入 子类 SomeBody 中  所以 this.job 不会undefined

 

相对于es5的面向对象，es6更易理解，刚刚接触js的同学们的福音呢。

最后欢迎大神的评论，以及发表一些指点和看法。