JS原型与几种继承总结

博客介绍了JavaScript原型链相关知识,利用原型可让引用类型继承属性和方法,构造函数、原型对象和新对象间通过特定属性关联。还提到默认顶端原型,即默认继承Object类型。此外,列举了原型链继承、实例继承、构造函数继承和组合继承等继承方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • 原型链:

利用原型让一个引用类型继承另一个引用的属性和方法。

构造函数中有prototype属性,指向他的原型对象,每个原型对象中也相应的有个constructor属性,指向原构造函数。

通过构造函数创建的新对象中都有一个无法直接访问的[[proto]]属性,使得该对象也指向构造函数的原型。使得对象也获得了原型中的方法和属性。当访问对象中的方法和属性时,如果对象中没有该方法和属性,则会向上一级原型对象中寻找该方法和属性,如果找到了就返回该方法和属性,如果没有,则继续向上面的原型中去查找该方法和属性,直到找到为止。

默认顶端原型:

是当所有类型都没有指明继承某个类型时,则默认继承Object类型;

  1. object中也有prototype属性,指向他的原型,object中也有[[proto]],只不过它指向的是null,可以忽略;
  2. object的很多方法,都存在object的原型中;
  3. 在原型链中查找,从当前位置一直往上访问,直到原型链顶端位置。
  • 原型链继承

  function Animal(){
           this.name="动物";// 属性
           this.eat=function(){  // 实例方法
               return this.name+"正在吃饭!";
           }
       }
        Animal.prototype.color="pink";// 原型属性
        Animal.prototype.sit=function (){// 原型方法
            return this.name+"正准备坐下!";
        };
        //声明一个子类
        function Dog(){}
        //原型链继承 直接原型一个父类    核心:将父类的实例作为子类的原型
       Dog.prototype=new Animal();
       //直接输出就是undefined
       var dog=new Dog();
      /* console.log(Dog.eat());//提示eat不是一个函数
       console.log(this.eat());*/
       console.log(dog.name);//动物
       console.log(dog.eat());//动物正在吃饭
       console.log(dog.color);//pink
       console.log(dog.sit());//动物正准备坐下
       Dog.prototype.type="犬类";
       Dog.prototype.name="小狗";
       Dog.prototype.color="red";
       console.log(dog.type);//犬类
       console.log(dog.name);//小狗
       console.log(dog.color);//red
       console.log(dog.eat());//小狗正在吃饭
       console.log(dog.sit());//小狗正准备坐下
       console.log(dog instanceof Dog);//true dog是Dog的一个实例化
       console.log(dog instanceof Animal);//true dog是Animal的一个实例化
     /*  特点:
       非常纯粹的继承关系,实例是子类的实例,也是父类的实例
       父类新增原型方法/原型属性,子类都能访问到
       简单,易于实现
       缺点:
       要想为子类新增属性和方法,必须要在new Animal()这样的语句之后执行,不能放到构造器中
       无法实现多继承
       创建子类实例时,无法向父类构造函数传参*/
  • 实例继承

function Animal(){
            this.name=name||"猫";
            this.eat=function(){
                return this.name+"正在吃东西!";
            }
        }
        Animal.prototype.sit=function(){
            return this.name+"正在准备坐下!";
        };
        function Cat(){
           var mao=new Animal();
            mao.name="小猫";//先是以小猫为主,其次为猫this.name=name||"猫";
            return mao;
        }
        var cat=new Cat();// var cat=new Animal();
        console.log(cat.name);
        console.log(cat.eat());
        console.log(cat.sit());
       /* 特点:
        不限制调用方式,不管是new 子类()还是子类(),返回的对象具有相同的效果
        缺点:
        实例是父类的实例,不是子类的实例
        不支持多继承*/
  • 构造函数继承

 /*替换对象*/
      /*call apply*/
      /*用法一致   传递的参数不一样  apply(object,[])  call(object,x1,x2,x3....)*/
      /*构造继承*/
      //核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

      function Animal(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;
            this.eat=function(){
                return this.name+"正在吃东西!";
            }
        }
      //实现多继承Type,Animal
      function Type(type){
          this.type=type;
          this.bite=function (){
              return "咬人!"
          }
      }
      /*Type.prototype.bite=function (){
       return "咬人!"
       }*/
        function Dog(name,age,sex,type){
           Animal.call(this,name,age,sex);
           Type.apply(this,[type]);//Type.apply(this,arguments);//不能实现
           /* Animal.call(this);//同上效果
            Type.apply(this);
            this.name=name;
            this.sex=sex;
            this.age=age;
            this.type=type;*/
        }
        var dog=new Dog("小狗",13,"女","犬类");
        console.log(dog.name);
        console.log(dog.age);
        console.log(dog.sex);
        console.log(dog.eat());
        console.log(dog.type);
        console.log(dog.bite());
      console.log(dog instanceof Dog);//true  dog是Dog的一个实例化
      console.log(dog instanceof Animal);//false
    /*  特点:
      创建子类实例时,可以向父类传递参数
      可以实现多继承(call多个父类对象)
      缺点:
      实例并不是父类的实例,只是子类的实例
      只能继承父类的实例属性和方法,不能继承原型属性/方法
      无法实现函数复用,每个子类都有父类实例函数的副本,影响性能*/
  • 组合继承

  //组合继承   重要
        function Animal(name){
            this.name=name;
            this.eat=function(){
                return this.name+"正在吃东西!";
            }
        }
        Animal.prototype.sit=function(){
            return this.name+"正在准备吃东西!";
        };
        //构造函数
       function Dog(name){
           Animal.apply(this,arguments)
       }
       Dog.prototype=new Animal();//同指同一个原型   使dog能够调用原型中sit方法
        var dog=new Dog("猫");
        console.log(dog.name);
        console.log(dog.eat());
        console.log(dog.sit());
      /*  特点:
        弥补了方式 构造函数的缺陷
        缺点:
        生成了两个实例,消耗内存;*/

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值