js中继承的方法_代码007(未授权)

本人刚写了一篇原型链的封装继承多态,用家有儿女做的demo。其实我个人感觉封装和多态都容易去理解与实现。关键在于继承,js的才是比较难的,也容易让人混乱,至少我是因为继承头大过(^o^)/~

这里插一句,个人习惯是展示代码,展示效果,完了去解释发生了什么。因为我感觉对于大部分人来说,光听理论还是不行,最重要的是让他们看到清晰的代码和输出流程,这样才能知道每一步都发生了什么,最后个人开始悟。我大部分文章都是这么写的,希望大家能理解我的思路

        //1.原型链继承
        //妈妈刘梅的构造函数
        function Liumei(){
            this.name = '刘梅'
            //方法1:定义时添加
            this.xuexing = 'o型血'
        }
        //方法2:定义完毕再添加
        // Liumei.prototype.xuexing = 'o型血'
        //儿子刘星的构造函数
        function Liuxing(){
            this.name = '刘星'
        }
        //刘星的原型对象继承刘梅,核心代码就是这句
        Liuxing.prototype = new Liumei()

        console.log(Liuxing,'继承后刘星的构造函数')
        console.log(Liuxing.prototype,'刘星的原型对象')
        let liuxingPerson = new Liuxing()
        console.log(liuxingPerson,'刘星本人')
        console.log(liuxingPerson.name,'刘星本人名字')
        console.log(liuxingPerson.xuexing,'刘星本人血型')

这里最关键的一步是将刘星构造函数的原型对象指向了刘梅的构造函数,这里就实现了继承,主要看那句输出 ‘刘星的原型对象’。

这里就要说到一个大家比较熟悉的例子了,vue2中的全局事件总线

new Vue({
    beforeCreate () {
        Vue.prototype.$bus = this  //这里就是用的这种继承方法
    },
    router,
    render: h => h(App)
}).$mount('#app')

        //2.子构造函数继承父构造函数

        //写法1
        function Liumei(){
            console.log(this,'这里的this在new刘星时,就是刘星实例对象')
            this.name = '刘梅'
            this.xuexing = 'o型'
        }
        function Liuxing(){
            Liumei.call(this)
            //这段代码要写在call方法后面,如果写在call方法前面,名字就会被覆盖掉。如果感觉不合适,可以让Liumei构造函数添加一个name参数,在call方法中加入刘星的名字
            this.name = '刘星'  
        }
    
        // //写法2
        // function Liumei(name = '刘梅'){
        //     this.name = name
        //     this.xuexing = 'o型'
        // }
        // function Liuxing(name){
        //     Liumei.call(this,name)
        // }

        let liuxingPerson = new Liuxing('刘星')
        console.log(liuxingPerson,'刘星本人')

        //3.Object.create继承
        let LiumeiPerson = {
            name:'刘梅',
            xuexing:'o型'
        }
        let liuxingPerson = Object.create(LiumeiPerson)
        liuxingPerson.name = '刘星' 
        console.log(liuxingPerson,'刘星本人')

        //4.寄生式继承
        let LiumeiPerson = {
            name:'刘梅',
            xuexing:'o型'
        }
        function ParasitismFun(motherObj){
            //记住,箭头函数不能当构造函数
           function NewFun (name){
            this.name = name
           }
           NewFun.prototype = motherObj
          return NewFun
       }
       //传递刘梅的对象,将刘梅的对象属性添加一个构造函数的原型的原型上,返回值是那个添加了刘梅属性的构造函数
       let Liuxing =  ParasitismFun(LiumeiPerson)
       console.log(Liuxing,'刘星构造函数')
       let liuxingPerson = new Liuxing('刘星')
       console.log(liuxingPerson,'刘星本人')

    //5.class类继承
    class Liumei{
        constructor(name){
            this.name = name
            this.xuexing = 'o型'
        }
    }
    class Liuxing extends Liumei{
        constructor(name){
         super(name)
        }
    }
    let liuxingPerson = new Liuxing('刘星')
    console.log(liuxingPerson,'刘星本人')