继承

原型继承

js
    我们的开发中某些时候，可能需要用到 继承， 那么 此时 有一种继承 的 方式就是利用了原型
    这个方法我们叫做 原型继承
    
    这种继承方式是将 自己的原型对象更改为 要继承的 父类的 实例化对象
    缺点
        自己的原型 被修改了

js
    <script>
        function Person(name,age) {
            this.name = name
            this.age = age
        }

        Person.prototype.sayHi = function() {
            console.log('我是父级')
        }

        function PersonChild(gender) {
            this.gender = gender
        }

        PersonChild.prototype = new Person('张三',18)

        const per = new PersonChild('男')

        console.log(per.name) // 张三
        console.log(per.age)  // 18
        per.sayHi()           // 我是父级
    </script>

借用继承

js
    原型继承得到属性和方法都不在自己对象本身，而是在原型对象上
    借用继承就是将属性继承到自己的身上
    
    这种继承方式 可以将父级的所有属性继承到子类对象自身
    但是父类的原型上的属性和方法，跟子类没有任何关系

js
    <script>
        function Person(name,age) {
            this.name = name
            this.age = age
        }
        
        Person.prototype.sayHi = function() {
            console.log('123,茄子')
        }

        function Subclass(id) {
            this.id = id
            Person.call(this,'张三',18)
        }

        const sub = new Subclass(10086)
        
        console.log(sub.name)   // 张三
        console.log(sub.id)     // 10086
        console.log(sub.age)    // 18
        sub.sayHi()             // Uncaught TypeError: sub.sayHi is not a function
d

    </script>

组合继承

js
    1、原型继承： 能够继承到属性和原型上的方法，但是继承到的属性不在对象本身
    2、借用继承： 能够将父级的属性继承到对象本身，但是父类原型上的方法继承不到
    
    基于上述，将原型继承和借用继承组合起来，创建了一个 组合继承
    
    
        优点： 能够继承到所有的属性和原型上的方法
               并且属性能够继承到对象本身
        缺点：
               在原型上会多一套多余的属性

js
    <script>
        function Person() {
            this.name = '张三'
            this.age = '18'
        }

        Person.prototype.sayHi = function() {
            console.log('我是父级')
        }

        function Subclass() {
            this.gender = '男'

            Person.call(this)
        }

        Subclass.prototype = new Person()

        const s1 = new Subclass()
        console.log(s1.name)  // 张三
        console.log(s1.age)   // 18
        console.log(s1.gender) // 男
        s1.sayHi()             // 我是父级
    </script>

拷贝继承

js
    <script>
        function Person(name,age) {
            this.name = name 
            this.age = age
        }

        Person.prototype.sayHi = function() {
            console.log('我是父级')
        }

        function Subclass(gender,...ages) {
            this.gender = gender

            const obj = new Person(...ages)

            for(let key in obj) {
                Subclass.prototype[key] = obj[key]
            }

        }   

        const s1 = new Subclass('男','张三',18)

        console.log(s1.name)     // 张三
        console.log(s1.age)      // 18
        console.log(s1.gender)   // 男
        s1.sayHi()               // 我是父级

    </script>

ES6 继承

js
    在 实现 ES6 类的继承的时候，书写方法有几个要求
    
    1. class 子类的类名 extends 要继承的父类类名 {}
    
    2. constructor  内部 必须书写 super
            他的作用可以在调用的时候对他进行传参，传递的参数会传递到 父类中
            
            注意： 哪怕父类不需要任何参数，我们的  super 也需要书写
                   并且需要书写在 constructor  内部的 第一行
                   
           当前的方法只能给 class 类使用
                   但是可以继承到构造函数中的内容，也就是说父类是构造函数或者 class 都可以

js
    <script>
        class Person {
            constructor() {
                this.name = '张三'
                this.age = 18
            }

            sayHi() {
                console.log('我是父级')
            }
        }

        class Subclass extends Person {
            constructor() {
                super()
                this.gender = '男'
            }
        }

        const s1 = new Subclass()

        console.log(s1.name)   // 张三
        console.log(s1.age)    // 18
        console.log(s1.gender) // 男
        s1.sayHi()             // 我是父级
    </script>