js中的继承

js中的继承：

es5 继承：借用构造函数继承、原型链继承、组合继承（混合）、寄生继承。

es6 继承：class  extends 语法。（多用）

什么是继承？

一个对象继承另一个对象的属性和方法。

一个构造函数（子类）继承另一个构造函数（父类）。

一个类（子类） 继承另一个类（父类 基类）。

一个类 继承另一个类的属性和方法。

1.借用构造函数继承：

    <script>
        //动物类 父类
        function Animal(name, age){
            this.name = name;
            this.age = age;
            console.log(this);
        }
        // Animal.prototype.run = function(){
        //     console.log(this.name + '会跑');
        // }

        //狗类 子类
        function Dog(name, age) {
            // 借用 父类的构造函数 在子类中调用--并传入了子类this
            // 调用了 父类的构造函数，并且改变父类构造函数中this
            // Animal(name, age) 需要传入this
            // Animal.call(this, name, age)
            Animal.apply(this, [name, age])
        }

        let dog = new Dog('xxx', 1)
        console.log(dog);
    </script>

2.原型链继承：

    <script>
        // --优点--能继承原型上的方法，缺点 属性是固定的
        // 动物类 -父类
        function Animal(name, age) {
            // this -》
            this.name = name;
            this.age = age;
        }
        Animal.prototype.run = function () {
            console.log(this.name + '：跑');
        }

        function Dog() { }

        // 将 Dog的 原型 指向 一个动物对象
        Dog.prototype = new Animal('xxx', 19);
        let dog = new Dog();
        dog.run()
    </script>

3.混合继承

    <script>
        //原型继承  或者原型链继承
        // 将 Dog的 原型 指向 一个对象（ 一个动物对象）
        // --优点--能继承原型上的方法，缺点 属性是固定

        //借用构造函数继承
        // ---只能继承 构造函数内部的 属性 ，不能继承原型上方法

        // 动物类 -父类
        function Animal(name, age) {
            // this -》
            this.name = name;
            this.age = age;
        }
        Animal.prototype.run = function () {
            console.log(this.name + '：跑');
        }

        function Dog(name, age) {

            // 通过借用父类的构造函数，给 狗对象 添加了属性
            Animal.call(this, name, age)
        }


        // 将 Dog的 原型 指向 一个动物对象
        Dog.prototype = new Animal('zhangsan', 19);

        let d1 = new Dog('小白', 2);
        console.log(d1.name);
        console.log(d1.age);
        d1.run();

        let d2 = new Dog('小黑', 2)
        console.log(d2);
        console.log(d2.name);

        console.log(d1);

        d2.run()
    </script>

4.寄生继承

    <script>
        //原型继承  或者原型链继承
        // 将 Dog的 原型 指向 一个对象（ 一个动物对象）
        // --优点--能继承原型上的方法，缺点 属性是固定

        //借用构造函数继承
        // ---只能继承 构造函数内部的 属性 ，不能继承原型上方法

        // 动物类 -父类
        function Animal(name, age) {
            // this -》
            this.name = name;
            this.age = age;
        }
        Animal.prototype.run = function () {
            console.log(this.name + '：跑');
        }

        function Dog(name, age) {

            // 通过借用父类的构造函数，给 狗对象 添加了属性
            Animal.call(this, name, age)
        }


        // Object.create(obj) --> 创建一个新对象，会把obj作为新对象的原型
        // **避免了 父类的构造函数被调用两次--避免了 用不到的属性出现
        Dog.prototype = Object.create(Animal.prototype)

        let d1 = new Dog('小白', 2);
        console.log(d1.name);
        console.log(d1.age);
        d1.run();

        let d2 = new Dog('小黑', 2)
        console.log(d2);
        console.log(d2.name);

        console.log(d1);

        d2.run()
    </script>

5.es6方法

    <script>
        //es6继承 --约等于  寄生 组合继承 
        // es6 继承 是一种语法糖
        //父类
        class Animal {
            constructor(name, age){
                this.name = name;
                this.age = age;
            }
            run(){
                console.log(this.name + '父类跑');
            }
            static ppp = 1;
        }

        //子类
        // class 子类 extends 父类
        class Dog extends Animal{
            a = 1;
            // 如果自己实现了子类构造函数-->必须使用super关键字调用父类的构造函数
            constructor(name, age, color){
                // 必须调用super 就是父类的构造函数
                super(name, age);
            }
                   
            // 给子类添加方法
            test(){}
            // ***重写： 子类的方法名和父类一样。
            // 使用子类对象的方法的时候 ，会用子类的方法
            // 子类的方法中也可以使用super  父类对象
            run(){
                console.log(this.name + '子类跑');
                super.run()
            }
        }
        let dog = new Dog('xxx', 2, 'black')
        dog.run()//优先用自己的run

         // 静态属性和方法 也能被继承
         console.log(Dog.ppp);
    </script>