js高级--三种继承方式

最新推荐文章于 2024-07-24 11:09:48 发布

打折瘸子那条好腿

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量84

点赞数

文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/weixin_66386149/article/details/125264925

版权

一、原型继承法

创建一个人类，然后继承学生类以及教师类，分别通过三种不同的继承方式，总结优点缺点

由此可见原型继承法优点：它可以继承调用people的构造函数

缺点：无法重置属性值，只有在继承的时候设置的是什么，之后所有的对象属性就是啥

<body>
    <script>
        //创建一个人类然后继承学生类以及教师类，分别通过三种不同的继承方式，总结优点缺点
         function people(name,age){
            this.name=name;
            this.age=age;
         }
         people.prototype.eat=function(){
            console.log(this.name+"吃西瓜")
         }
         people.prototype.run=function(){
            console.log(this.name+"正在跑")
         }


         //创建教师类
         function teacher(name,age){

         }
         teacher.prototype=new people("小名",20)   //原型继承法
         teacher.prototype.eat=function(){
            console.log(this.name+"正在吃大西瓜")
         }
         var s1=new teacher("小红",15)
         s1.eat()   //输出结果 不是小红正在吃大西瓜  而是小名正在吃大西瓜
         console.log(s1.name) //这个输出结果也是小名
         var s2=new teacher("小东",14)
         s2.eat()//输出结果 同样是小名正在吃大西瓜
         console.log(s2.name)//小名

    </script>
</body>

原型链图解

二、冒充继承法

通过使用call()和apply()方法改变this的指向性来实现继承

优点：可以调用一次函数，无法复用

缺点：这种方法虽解决了原型链继承方法问题，但不能将原型方法继承过来

<body>
    <script>
         function people(name,age){
            this.name=name;
            this.age=age;
         }
         people.prototype.eat=function(){
            console.log(this.name+"吃西瓜")
         }
         people.prototype.run=function(){
            console.log(this.name+"正在跑")
         }

         //创建学生对象
         function student(name,age){
             people.call(this,name,age)//冒充继乘  改变了this的指向性 
         }
         student.prototype.eat=function(){
            console.log(this.name+"正在吃东西")
         }
         var s1=new student("小张",25)
         s1.eat()//可以调用  小张正在吃东西
        s1.run()//报错 原型无法继承过来
         console.log(s1.name)

         
    </script>
</body>

三、组合继承

既可以继承调用people 的构造函数，也可以把原型继承过来啦

解决了之前两种继承方法存在的问题

<body>
    <script>
function people(name,age){
            this.name=name;
            this.age=age;
         }
         people.prototype.eat=function(){
            console.log(this.name+"吃西瓜")
         }
         people.prototype.run=function(){
            console.log(this.name+"正在跑")
         }
         //创建学生对象
         function student(name,age){//冒充继承
            people.call(this,name,age)
         }
          student.prototype=new people()//原型继承
          student.prototype.eat=function(){
            console.log(this.name+"吃西瓜")
          }
          var s1=new student("明明",21)
          s1.eat()//明明吃西瓜
          s1.run()//可以正常调用了   明明正在跑
          console.log(s1.name) 
          
         
    </script>
</body>