前端 JS面向对象 继承

目录

一、ES5通过prototype来继承

二、ES6 class实现

---

一、ES5通过prototype来继承

    const Person={
        eyes:2,
        head:1
    }
    function Woman(){

    }
    Woman.prototype=Person
    const lady=new Woman()
    console.log(lady)
    function Man(){

    }
    Man.prototype=Person
    const man=new Man()
    console.log(man)

打印：

不过，上面的写法还是有点问题，并没有制定原来的构造函数是谁，规范书写如下：

    const Person={
        eyes:2,
        head:1
    }
    function Woman(){

    }
    Woman.prototype={
        ...Person,
        //指回原来的构造函数
        constructor:Woman
    }
    const lady=new Woman()
    console.log(lady)
    function Man(){

    }
    Man.prototype=Person
    //指回原来的构造函数W
    Man.prototype.constructor=Man
    const man=new Man()
    console.log(man)

打印：

这里我不难看出，第一种写法也存在一种问题，两个类型继承同一各方法时，修改的原型对象是同一各个导致一些修改上的问题。

由此演进出不会影响修改的更优方案：通过构造函数来实现

    function Person(){
        this.eyes=2
        this.head=1
    }
    function Woman(){

    }
    Woman.prototype=new Person()
    Woman.prototype.constructor=Woman
    const lady=new Woman()
    console.log(lady)
    function Man(){

    }
    Man.prototype=new Person()
    //指回原来的构造函数W
    Man.prototype.constructor=Man
    const man=new Man()
    console.log(man)

打印：效果一样

二、ES6 class实现

直接通过class来标注，并且构造函数同一为constructor(), 允许静态方法，添加extends关键字进行继承。注意：类里面的所有代码将默认按严格模式进行执行。

    class Person{
        static alive=true
    
    
        //构造函数
        constructor() {
            this.eyes=2
            this.head=1
        }

        eat(){
            console.log("吃东西")
        }

        static isPerson(){
            //注意静态方法的this不再是对象而是类对象
            console.log("是个人")
        }
    }

    const p=new Person()
    p.eat()
    Person.isPerson()

    class Woman extends Person{
        constructor() {
            super()
            console.log("lady")
        }

    }
    const lady=new Woman()
    lady.eat()

打印：