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

JavaScriptInheritance_045

时间:2023-04-02 14:18:57 HTML

JavaScript继承原型链继承函数Parent(){this.name='Father';//实例的基本属性(该属性强调private,不shared)this.arr=[1];//(这个属性,强调private)}Parent.prototype.say=function(){//--在父类的原型上定义需要复用和共享的方法console.log('hello')}functionChild(like){this.like=like;}Child.prototype=newParent()//核心letboy1=newChild()letboy2=newChild()//优点:共享父类的say方法constructorconsole.log(boy1.say(),boy2.say(),boy1.say===boy2.say);//hello,hello,true//缺点一:不能传参//缺点二:console.log(boy1.name,boy2.name,boy1.name===boy2.name);//父亲,父亲,trueboy1.arr.push(2);//修改boy1的arr属性后,boy2的arr属性也会发生变化,因为这两个实例(Child.prototype)的原型都有父类构造函数的实例属性arr;所以只要修改boy1.arr,boy2.arr的属性也会随之改变。----原型上的arr属性是共享的。控制台日志(boy2.arr);//[1,2]注意:修改boy1的name属性不会影响boy2.name。因为名称是基本属性,不是引用属性。构造函数继承functionParent(name){this.name=name;//实例的基本属性(该属性强调private,不shared)this.arr=[1];//(该属性强调private)this.say=function(){//实例引用属性(该属性强调复用,需要共享)console.log('hello')}}functionChild(name,like){Parent.call(this,name);//核心this.like=like;}letboy1=newChild('小红','apple');letboy2=newChild('小明','orange');//优点一:可以传参给console.log(boy1.name,boy2.name);//小红、小明//优势二:不共享父类构造函数boy1.arr.push(2)的引用属性;console.log(boy1.arr,boy2.arr);//[1,2][1]//缺点一:方法不能复用console.log(boy1.say===boy2.say)//false(说明boy1和boy2的say方法是独立的,不共享)//缺点2:不能继承父类原型上的方法Parent.prototype.walk=function(){//在父类上定义一个walk方法父类的原型对象。console.log('我可以走路')}boy1.walk;//undefined(表示实例,不能获取到父类原型上的方法)combinedinheritancefunctionParent(name){this.name=name;//实例的基本属性(该属性强调private,不shared)this.arr=[1];//(这个属性强调private)}Parent.prototype.say=function(){//---将需要重用和共享的方法定义在父类的原型上console.log('hello')}functionChild(name,like){Parent.call(this,name,like)//核心第二次this.like=like;}Child.prototype=newParent()//核心第一次letboy1=newChild('Xiaohong','apple')letboy2=newChild('Xiaoming','orange')//优点一:可以传参console.日志(boy1.name,boy1.like);//小红,apple//优势2:可以复用父类原型上的方法console.log(boy1.say===boy2.say)//真正的原型继承//两种方法//Object.create//函数对象functionobject(o){functionF(){}F.pototype=o;returnnewF()}letparent={name:'parent',share:[1,2,3],//父类的所有引用属性都被子类共享log:function(){//父类方法可以复用returnthis.name}}letchild=Object.create(parent)//子类不能给父类传递参数寄生继承functioncreateAnother(original){varclone=object(original)clone.sayHi=function(){alert('hi');}returnclone;}varperson={name:"hello",friends:['z',"x","p"]}varanotherPerson=createAnother(person);anotherPerson.sayHi()//'hi'寄生combinationinheritancefunctionParent(name,friends){this.name=namethis.friends=friends}Parent.prototype={constructor:Parent,//需要手动绑定构造函数share:[1,2,3],log:function(){returnthis.name}}functionChild(name,friends,gender){Parent.call(this,name,friends)//这里只需要调用Parentthis.gender=gender}//前半部分是和组合继承一样letF=function(){}//创建一个中介函数F.prototype=Parent.prototype//这个中介的原型指向Parent的原型Child.prototype=newF()//注意new运算符不用于调用ParentChild.prototype.constructor=Child//封装函数Parent(name,friends){this.name=name//可以定义私有属性this.friends=friends//可以定义公共引用propertieswillnotbeshared}Parent.prototype={constructor:Parent,//需要手动绑定constructorshare:[1,2,3],//这里定义的公共属性会被共享log:function(){//该方法是共享的returnthis.name}}functionChild(name,friends,gender){Parent.call(this,name,friends)//可以给父类传递参数这里它再次调用一次Parentthis.gender=gender}functionproto(child,parent){letclonePrototype=Object.create(parent.prototype)//核心会通过创建中间对象、子类原型和父类原型来隔离child.prototype=clonePrototypechild.prototype.constructor=child}proto(Child,Parent)ES2015classextendslassParent{constructor(name,friends){//这个属性在构造函数上,不共享this.name=namethis.friends=friends}log(){//该方法在原型上共享returnthis}}Parent.prototype.share=[1,2,3]//原型上的属性是共享的classChildextendsParent{constructor(name,friends,gender){super(name,friends)this.gender=gender}}