es5和es6类的写法和继承

//ES5和ES6中创建类

//es5中
function person(name,age){
    this.name = name
    this.age = age
}
person.prototype.say = function(){
    return console.log(this.name+this.age)
}
p1 = new person('linzhen','18')
p1.say()
//es6

class persones6{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    say(){
        return console.log(this.name+this.age)
    }
}
p2 = new persones6('lin','24')
p3 = new persones6('lin','24')
p2.name = 'ha'
p2.say()
p3.say()

//es5继承方式
//原型链继承
function Child1(sex){
    this.sex = sex
}
Child1.prototype = new person('林振 ','18')
c1 = new Child1('男')
c2 = new Child1('女')
console.log(c1.age)
c1.say()
c1.__proto__.age = 24//给c1原型上的age赋值,则导致Child1上的age也改变,父类构造函数上的属性被所有子类共享
console.log(c1.age)
console.log(c2.age)
//构造函数继承
function Child2(sex,name,age){
    this.sex = sex
    person.call(this,name,age)
}

c3 = new Child2('男','林振','24')
console.log(c3.age)
//console.log(c3.say())//只能解决属性的继承,使用属性的值不重复,但是父级类别的方法不能继承,所以会出错

//组合类继承,结合了上面两种方式
function Child3(sex,name,age){
    this.sex = sex
    person.call(this,name,age)
}
Child3.prototype = new person('林振 ','18')

c4 = new Child3('男','林振','24')
console.log(Child3.prototype)
//组合继承,既能达到对父类属性的继承,也能继承父类原型上的方法
    //父类属性继承也不会在所有子类的实例上共享
    //唯一缺点,子类原型上有父类构造函数的属性,也就是多了一份属性
//

//寄生组合继承
function Child4(sex,name,age){
    this.sex = sex
    person.call(this,name,age)
}

Child4.prototype = Object.create(person.prototype) 隔离了父类和子类的构造函数,父类的添加到了__proto__属性上
Child4.prototype.constructor = Child4


//es6类的继承

class Child5 extends persones6{
    constructor(name,age,sex){
        super(name,age)
        this.sex = sex//执行父类的构造函数 ,子类必须在构造函数中掉用super
    /* 使用this一定要在super 之后 */
    }
}  
c5 = new Child5('林振','24','男')
c5.say()
console.log(c5.age)
console.log(Child5 === Child5.prototype.constructor)

你可能感兴趣的:(es5和es6类的写法和继承)