首页 > 代码库 > ES6面向对象的浅理解。

ES6面向对象的浅理解。

网上一些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的同学们的福音呢。

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

ES6面向对象的浅理解。