Rumah > Artikel > hujung hadapan web > Pengenalan kepada beberapa kaedah pewarisan dalam javascript_Pengetahuan asas
1. Warisan rantaian prototaip: Hubungan antara pembina, prototaip dan kejadian: Setiap pembina mempunyai objek prototaip, dan objek prototaip mengandungi penunjuk kepada pembina, dan kejadian mengandungi penunjuk dalaman kepada objek prototaip. Gunakan instanceof untuk mengesahkan hubungan antara prototaip dan contoh.
Kelemahan pewarisan rantai prototaip: penggantian literal prototaip akan memutuskan hubungan, menggunakan prototaip jenis rujukan dan subjenis tidak boleh menghantar parameter kepada superjenis
function Parent(){ this.name='mike'; } function Child(){ this.age=12; } //儿子继承父亲(原型链) Child.prototype=new Parent();//Child继承Parent,通过原型形成链条 var test=new Child(); console.log(test.age); console.log(test.name);//得到被继承的属性 //孙子继续原型链继承儿子 function Brother(){ this.weight=60; } Brother.prototype=new Child();//继承原型链继承 var brother=new Brother(); console.log(brother.name);//继承了Parent和Child,弹出mike console.log(brother.age);//12 console.log(brother instanceof Child);//ture console.log(brother instanceof Parent);//ture console.log(brother instanceof Object);//ture
2. Pembina melaksanakan warisan: Ia juga dipanggil objek palsu atau warisan klasik.
Kelemahan warisan pelaksanaan pembina: Walaupun meminjam pembina menyelesaikan dua masalah pewarisan rantaian prototaip, tanpa prototaip, penggunaan semula adalah mustahil, jadi rantaian prototaip + corak pembina yang dipinjam diperlukan.
function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);//把this指向Parent,同时还可以传递参数 } var test=new Child(21); console.log(test.age);//21 console.log(test.name); test.name.push('bill'); console.log(test.name);//mike,jack,smith,bill
3. Warisan gabungan: Gunakan rantaian prototaip untuk mewarisi sifat dan kaedah prototaip, dan meminjam pembina untuk mencapai pewarisan sifat contoh. Dengan cara ini, penggunaan semula fungsi dicapai dengan mentakrifkan kaedah pada prototaip, dan setiap pelaksanaan dijamin mempunyai atributnya sendiri.
Kelemahan: Dalam apa jua keadaan, pembina supertype akan dipanggil dua kali, sekali apabila mencipta prototaip subjenis, sekali apabila mencipta prototaip subjenis, dan sekali di dalam pembina subjenis.
function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } Parent.prototype.run=function(){ return this.name+' are both '+this.age; } function Child(age){ Parent.call(this,age);//给超类型传参,第二次调用 } Child.prototype=new Parent();//原型链继承,第一次调用 var test1=new Child(21);//写new Parent(21)也行 console.log(test1.run());//mike,jack,smith are both 21 var test2=new Child(22); console.log(test2.age); console.log(test1.age); console.log(test2.run()); //这样可以使test1和test2分别拥有自己的属性age同时又可以有run方法
4. Warisan prototaip: Menggunakan prototaip, anda boleh mencipta objek baharu berdasarkan objek sedia ada tanpa perlu mencipta jenis tersuai. Ia memerlukan mesti ada objek yang boleh berfungsi sebagai asas untuk objek lain.
function object(o){ function F(){}; F.prototype=o; return new F(); } var person={ name:'nicho', friends:['shell','jim','lucy'] } var anotherPerson = object(person); anotherPerson.name = 'Greg'; anotherPerson.friends.push('Rob'); console.log(anotherPerson.friends);//["shell", "jim", "lucy", "Rob"] var yetAnotherPerson = object(person); yetAnotherPerson.name = 'Linda'; yetAnotherPerson.friends.push('Barbie'); console.log(yetAnotherPerson.friends);//["shell", "jim", "lucy", "Rob", "Barbie"] console.log(person.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]
ECMAScript5 menyeragamkan warisan prototaip melalui kaedah Object.create() baharu, yang menerima dua parameter: objek yang digunakan sebagai prototaip objek baharu dan (pilihan) objek yang mentakrifkan sifat untuk objek baharu.
var person2={ name:'nicho', friends:['shell','jim','lucy'] }; var anoP2=Object.create(person2); anoP2.name="Greg"; anoP2.friends.push('Rob'); console.log(anoP2.friends);//["shell", "jim", "lucy", "Rob"] var yetP2=Object.create(person2); yetP2.name="Linda"; yetP2.friends.push('Barbie'); console.log(yetP2.friends);//["shell", "jim", "lucy", "Rob", "Barbie"] console.log(person2.friends);//["shell", "jim", "lucy", "Rob", "Barbie"] /*以这种方式指定的任何属性都会覆盖原型对象上的同名属性。*/ var threeP=Object.create(person,{ name:{value:'red'} }); console.log(threeP.name);//red,如果threeP中无name则输出person2里的name值nicho
5. Warisan parasit: Ideanya serupa dengan pembina parasit dan corak kilang, iaitu mencipta fungsi yang hanya digunakan untuk merangkum proses pewarisan, dan fungsi digunakan secara dalaman dalam beberapa cara untuk meningkatkan objek, dan akhirnya mengembalikan objek seolah-olah ia benar-benar melakukan semua kerja.
function object(o){ function F(){}; F.prototype=o; return new F(); }; function createAnother(o){ var cl=object(o); cl.sayHi=function(){ console.log('hi'); } return cl; }; var person={ name:'nick', friends:['shelby','court','van'] } var anotherPerson=createAnother(person); anotherPerson.sayHi();//hi console.log(anotherPerson.name);//nick console.log(anotherPerson.friends);//["shelby", "court", "van"] /*这个例子中的代码基于 person 返回了一个新对象—— anotherPerson 。 新对象不仅具有 person 的所有属性和方法,而且还有自己的 sayHi() 方法*/
Warisan gabungan parasit: Tidak kira dalam apa keadaan sekalipun, pembina supertype akan dipanggil dua kali, sekali apabila mencipta prototaip subjenis, sekali semasa mencipta prototaip subjenis dan sekali semasa pembinaan subjenis, supaya subjenis berakhir mengandungi semua sifat contoh objek supertype, yang perlu kita tolak apabila memanggil pembina subjenis. Oleh itu kemunculan warisan gabungan parasit.
6. Warisan gabungan parasit: Pinjam pembina untuk mewarisi sifat, dan mewarisi kaedah melalui bentuk campuran rantaian prototaip. Idea asas: Anda tidak perlu memanggil pembina supertype untuk menentukan prototaip subjenis. Pada asasnya, pewarisan parasit digunakan untuk mewarisi prototaip superjenis, dan kemudian menyerahkan hasilnya kepada prototaip subjenis.
function SuperType(name){ this.name=name; this.colors=['red','blue','green']; } SuperType.prototype.sayName=function(){ console.log(this.name); } function SubType(name,age){ SuperType.call(this,name); this.age=age; } function object(o){ function F(){}; F.prototype=o; return new F(); }; /*inheritPrototype此函数第一步是创建超类型原型的一个副本。第二步是为创建的副本添加constructor属性, * 从而弥补因重写原型而失去的默认的constructor属性,第三步将新创建的对象(副本)赋值给子类型的原型*/ function inheritPrototype(subType,superType){ var prototype=object(superType.prototype);//创建对象 prototype.constructor=subType;//增强对象 subType.prototype=prototype;//指定对象 } inheritPrototype(SubType,SuperType); SubType.prototype.sayAge=function(){ console.log(this.age); } var p=new SubType('xiaoli',24); console.log(p.sayName()); console.log(p.sayAge()); console.log(p.colors)
Kelebihan kaedah ini: Pembina SuperType kelas induk hanya dipanggil sekali, dan oleh itu mengelak daripada mencipta atribut berlebihan yang tidak perlu pada SubType.prototype. Pada masa yang sama, rantai prototaip boleh kekal tidak berubah, dan instanceof dan isPrototypeOf() boleh digunakan seperti biasa;