Pengenalan kepada beberapa kaedah pewarisan dalam javascript_Pengetahuan asas

WBOY
Lepaskan: 2016-05-16 15:09:47
asal
1110 orang telah melayarinya

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
Salin selepas log masuk

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
Salin selepas log masuk

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方法
Salin selepas log masuk

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"]
Salin selepas log masuk

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
Salin selepas log masuk

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() 方法*/
Salin selepas log masuk

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)
Salin selepas log masuk

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;

Pengenalan di atas kepada beberapa kaedah pewarisan JavaScript adalah semua kandungan yang dikongsi oleh editor saya harap ia dapat memberi anda rujukan, dan saya harap anda akan menyokong Script Home.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!