当前位置: 首页 > Web前端 > HTML

原型链及其继承

时间:2023-03-28 14:59:22 HTML

注意:_proto_的使用规则是非标准属性,不允许通过对象修改原型中的原理。继承的目的是让一个引用类型可以使用另一个引用类型的属性和方法。先写一个父类//constructor构造FunctionfunctionAnimal(name){this.name=name}//添加原型方法Animal.prototype.eat=function(food){console.log(this.name+"eat"+this.food)}varcat=new在Animal('cat')console.log(cat)的截图中可以看到实例cat自带的构造函数属性和原型方法1.原型链继承核心:实例父类的作为子类的原型//constructorconstructorfunctionAnimal(name){this.name=name}//添加原型方法Animal.prototype.eat=function(food){console.log(this.name+"eat"+this.food)}//构造子类FunctionfunctionCat(){}Cat.prototype=newAnimal();//关键代码Cat.prototype.name='cat';varcat=newCat()console.log(cat)特点:1.cat是Cat()的一个实例也是Animal()的一个实例2.Cat()和Animal()增加了新的属性和方法,两者猫可以访问它们。缺点:1.如果要给Cat()添加属性和方法,必须在像Animal()这样的newExecuteafter语句中添加2.原型对象的所有属性被所有实例共享,造成不必要的内存空间3.创建cat实例时,不能给父类构造函数传递参数2.构造继承核心:父类实例的属性复制给子类//constructorconstructorfunctionAnimal(name){this.name=name}//Animal添加一个原型方法Animal.prototype.eat=function(food){console.log(this.name+"Eat"+this.food)}//构造函数Cat(){Animal.call(this),this.name='cat'}varcat=newCat()console.log(cat)特点1.调用可以用于多重继承2.实例是子类的实例,不是一个父类实例解决共享父类属性的问题。缺点1.只能继承父类的实例属性和方法,不能继承父类原型上的属性和方法。2.无法实现功能复用,影响性能。父类的实例作为子类的实例返回//constructorconstructorfunctionAnimal(name){this.name=name}//Animal添加原型方法Animal.prototype.eat=function(food){console.log(this.name+"eat"+this.food)}//子类构造函数Cat(name){varinstance=newAnimal()instance.name=name;returninstance}varcat=newCat('cat')console.log(cat)console.log(catinstanceofCat)//falseconsole.log(catinstanceofAnimal)//true特点1.调用没有限制方法,无论是newCat()还是Cat(),返回的对象都具有相同的效果缺点1.父类的实例2.不支持多重继承4.复制继承核心:复制父类的属性//constructorconstructorfunctionAnimal(name){this.name=name}//动物添加原型方法Animal.prototype.eat=function(food){console.log(this.name+"eat"+this.food)}//构造函数Cat(name){varanimal=newAnimal();for(letainanimal){Cat.prototype[a]=animal[a]}}//子类实例varcat=newCat('cat')console.log(cat)console.log(catinstanceofCat)//trueconsole.log(catinstanceofAnimal)//false特性支持多重继承缺点1.效率低,内存占用高2.无法获取父类不可枚举的方法(不可枚举方法,不能用forin访问)5.组合继承核心:原型链继承和构造继承组合//子类构造函数Cat(name){Animal.call(this);this.name=name;}Cat.prototype=newAnimal();//复合继承需要固定构造函数指向Cat.prototype.constructor=Cat;//子类实例varcat=newCat('cat')console.log(cat)console.log(catinstanceofCat)//trueconsole.log(catinstanceofAnimal)//true特点1.结合原型链继承和构造继承2.修复不存在引用属性共享问题3.可以传参重复缺点是调用父类构造函数两次,生成两个实例(子类实例屏蔽了子类原型上的那个)6.寄生组合继承的核心:通过寄生方法,切断实例属性父类的,当父类的构造被调用两次时,实例方法/属性不会被初始化两次,避免了组合继承的缺点//constructorconstructorfunctionAnimal(name){this.name=name}//动物addsprototypeMethodAnimal.prototype.eat=function(food){console.log(this.name+"eat"+this.food)}//子类构造函数Cat(name){Animal.call(this);this.name=name;}(function(){functionNew(){}New.prototype=Animal.prototype;Cat.prototype=newNew()})()//固定构造函数参数Cat.prototype.constructor=Cat;//Subclassinstancevarcat=newCat('cat')console.log(cat)console.log(catinstanceofCat)//trueconsole.log(catinstanceofAnimal)//true最常用最完美的就是最后一个