4.2(JS高级继承初体验)

一：前言

  我们知道面向对象的语言中继承是一个非常重要的概念，而对于JS来讲，它不想其他语言那样可以直接继承，JS是通过原型链来继承的(当然ES6也提供了extends关键字和类的概念)，这里我们就来讲一下JS继承的几种方式。

二：内容

  方式一：

// 定义父类
        function OneFather(name,age){
            this.name=name
            this.age=age
        }
        // 为父类原型中添加方法
        OneFather.prototype.say=function(){
            console.log("我是爸爸原型中的say方法(第一种继承方式)");
        }
        // 定义子类
        function OneSon(name,age,price){
            this.name=name
            this.age=age
            this.age=age
        }
        // 将子类的原型变换为父类的实例，这样就可以访问父类原型中的方法
        OneSon.prototype=new OneFather()
        // 修正子类原型中的constructor属性
        OneSon.prototype.constructor=OneSon
        // 实例化对象
        var one=new OneSon("jack",12,1000)
        // 调用say方法
        one.say()

  方式二(假的，所以这里不过多说明)：

// 定义父类
        function TwoFather(name,age){
            this.name=name
            this.age=age
        }
        // 定义子类
        function TwoSon(name,age,price){
            // 改变this指向，相当于把TwoFather中的代码拿到这里执行
            TwoFather.call(this,name,age)
            this.price=price
        }

  方式三：

// 定义父类
        function ThreeFather(name,age){
            this.name=name
            this.age=age
        }
        // 为父类原型中添加方法
        ThreeFather.prototype.say=function(){
            console.log("我是爸爸原型中的say方法(第三种继承方式)")
        }
        // 定义子类
        function ThreeSon(name,age,price){
            //改变this指向，将父类代码加以复用
            ThreeFather.call(this,name,age)
            this.price=price
        }
        //  将子类的原型变换为父类的实例
        ThreeSon.prototype=new ThreeFather()
        // 修正子类原型中的constructor属性
        ThreeSon.prototype.constructor=ThreeSon
        // 实例化对象
        var three=new ThreeSon("jack",12,10000)
        three.say()

  方式四：

// 定义父类
        function FourFather(name,age){
            this.name=name
            this.age=age
        }
        // 向父类原型中添加方法
        FourFather.prototype.say=function(){
            console.log("我是爸爸原型中的say方法(第四种继承方式)");
        }
        // 定义子类
        function FourSon(name,age,price){
            FourFather.call(this,name,age)
            this.price=price
        }
        /* 
        FourSon.prototype=Object.create(FourFather.prototype)代码解析
                var o={}
                o.__proto__=FourFather.prototype
                FourSon.prototype=o
        Object.create()是可以接收两个参数的，但是这里只是讲解继承的方法，大家可以自行搜索来了解具体内容
        */
        FourSon.prototype=Object.create(FourFather.prototype)
        // 修正子类原型的constructor属性
        FourSon.prototype.constructor=FourSon
        // 实例化对象
        var four=new FourSon("jack",12,10000)
        four.say()

  方式五：

// 定义父类
        class FiveFather{
            // 在实例化时自动执行constructor方法(因为这里主要讲的是继承方法，具体内容可以看ES6自行了解)
            constructor(name,age){
                this.name=name
                this.age=age
            }
            say(){
                console.log("我是爸爸中的say方法(第五种继承方式)");
            }
        }
        class FiveSon extends FiveFather{
            constructor(name,age,price){
                // 调用父类的方法
                super(name,age)
                this.price=price
            }
        }
        var five=new FiveSon()
        five.say()

备注:除了上边写的五种继承方式还有两种继承方式，但是我感觉很鸡肋就没有写,大家如果想知道的话可以自行了解。

三：总结

    在我看来继承的方式都是延长子类的原型链，原本情况下，子类原型的__proto__属性指向的是Object，而上边的操作都是子类原型的__proto__属性指向父类的原型，但是这样做的同时也要记住一件事就是往子类原型中添加方法要在原型改变后再添加否则后边的操作会将其覆盖掉。