ES5和ES6中类和继承的简单实例

作者:admin     发表时间:8/27/2019

ES6中类和继承

------------------------------

class Person{

    constructor(n,a){

        //所有的私有属性位置

        this.name = n;

        this.age = a;

    }

    //所有的原型方法位置

    showName(){

        console.log(this.name);

    }

    showAge(){

        console.log(this.age);

    }

    //原型属性的变通写法,推荐

    x(){

        return 10;

    }

}

//原型属性的写法同es5

// Person.prototype.x = 10;

class Teacher extends Person{

    constructor(n,a,id){

        super(n,a); //继承私有属性,不写报错

        //私有属性

        this.id = id;

    }

    //原型默认继承

    //可以新建与父类的同名原型方法(自有的优先使用)

    showName(){

        //可以在继承父类的同名原型方法基础上添加功能

        super.showName(); //继承父类的同名原型方法

        console.log("Teacher类的name:" + this.name);

    }

    //子类新增的原型方法

    showId(){

        console.log(this.id);

    }

}

let t = new Teacher("老师",18,110);

console.log(t); //Teacher {name: "老师", age: 18, id: 110}

t.showName(); //老师 Teacher类的name:老师

console.log(t.x()); //10

=======================================================================

ES5中类和继承

------------------------------

//父类Person

function Person(n, a) {

    this.name = n;

    this.age = a;

}

//定义Person原型的属性和方法

Person.prototype.showName = function () {

    console.log(this.name);

};

Person.prototype.showAge = function () {

    console.log(this.age);

};

Person.prototype.x = 10;


//继承原型函数

function extend(CLASS) {

    function F() {}

    F.prototype = CLASS.prototype;

    return new F();

}

//子类Teacher

function Teacher(n,a,id) {

    //继承Person的私有属性

    Person.call(this,n,a);

    //Teacher私有属性

    this.id = id;

}

Teacher.prototype = extend(Person);//继承Person原型

Teacher.prototype.constructor = Teacher;

Teacher.prototype.showId = function () {

    console.log(this.id);

};


var t = new Teacher("老师",18,110);

console.log(t); //Teacher {name: "老师", age: 18, id: 110}

t.showName(); //老师

t.showId(); //110

评论