Penjelasan terperinci tentang warisan dalam kemahiran JavaScript_javascript

Konsep warisan js

Dua kaedah pewarisan berikut biasanya digunakan dalam js:

Pewarisan rantai prototaip (warisan antara objek)
Warisan kelas (warisan antara pembina)
Memandangkan js bukanlah bahasa yang benar-benar berorientasikan objek seperti java, js adalah berdasarkan objek dan tidak mempunyai konsep kelas. Oleh itu, jika anda ingin melaksanakan warisan, anda boleh menggunakan mekanisme prototaip js atau kaedah memohon dan memanggil

Dalam bahasa berorientasikan objek, kami menggunakan kelas untuk mencipta objek tersuai. Walau bagaimanapun, segala-galanya dalam js adalah objek, jadi bagaimana untuk mencipta objek tersuai? Ini memerlukan penggunaan prototaip js:

Kita hanya boleh menganggap prototaip sebagai templat Objek tersuai yang baru dibuat adalah semua salinan templat ini (prototaip) (sebenarnya bukan salinan tetapi pautan, tetapi pautan ini tidak kelihatan. Baharu Terdapat penunjuk __Proto__ yang tidak kelihatan di dalamnya. objek instantiated, menunjuk ke objek prototaip).

JS boleh mensimulasikan fungsi kelas melalui pembina dan prototaip. Selain itu, pelaksanaan pewarisan kelas js juga bergantung pada rantaian prototaip.

Warisan prototaip dan warisan kelas

Warisan klasik sedang memanggil pembina supertype di dalam pembina subjenis.
Warisan kelas yang ketat tidak begitu biasa, dan biasanya digunakan dalam gabungan:

Salin kod Kod adalah seperti berikut:

fungsi Super(){
This.colors=["red","blue"];
}

fungsi Sub(){
Super.call(ini);
}

Warisan prototaip adalah untuk mencipta objek baharu dengan bantuan objek sedia ada, dan menghalakan prototaip subkelas ke kelas induk, yang bersamaan dengan menyertai rantai prototaip kelas induk

Warisan rantai prototaip

Untuk subkelas mewarisi atribut (termasuk kaedah) kelas induk, anda perlu mentakrifkan pembina terlebih dahulu. Kemudian, tetapkan contoh baharu kelas induk kepada prototaip pembina. Kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

Fungsi Induk(){
This.name = 'mike';
}

fungsi Child(){
This.age = 12;
}
Child.prototype = new Parent();//Child mewarisi Ibu bapa dan membentuk rantai melalui prototaip

var test = new Child();
makluman(ujian.umur);
​​ alert(test.name);//Dapatkan atribut yang diwarisi
//Teruskan pewarisan rantai prototaip
Fungsi Abang(){ //pembinaan abang
This.weight = 60;
}
Brother.prototype = new Child();//Teruskan pewarisan rantai prototaip
var abang = Abang baru();
alert(brother.name);//Mewarisi Ibu Bapa dan Anak, muncul mike
​​ alert(brother.age);//pop-up 12

Warisan rantai prototaip di atas tiada pautan, iaitu Object Semua pembina mewarisi daripada Object. Mewarisi Objek dilakukan secara automatik dan tidak memerlukan kita mewarisi secara manual Jadi apakah gabungan mereka?

Tentukan hubungan antara prototaip dan contoh

Hubungan antara prototaip dan kejadian boleh ditentukan dalam dua cara. Kaedah operator instanceof dan isPrototypeof():

Salin kod Kod adalah seperti berikut:

alert(brother instanceof Object)//true
alert(test instanceof Brother);//false, test ialah kelas super abang
makluman(contoh abang bagi Kanak-kanak);//benar
makluman(contoh abang bagi Ibu Bapa);//benar

Selagi prototaip muncul dalam rantaian prototaip, ia boleh dikatakan sebagai prototaip contoh yang diperoleh daripada rantaian prototaip Oleh itu, kaedah isPrototypeof() juga akan kembali benar

Dalam js, fungsi yang diwarisi dipanggil jenis super (kelas induk, kelas asas juga boleh diterima), dan fungsi yang diwarisi dipanggil subjenis (subkelas, kelas terbitan). Terdapat dua masalah utama dengan menggunakan warisan prototaip:
Pertama, penggantian literal prototaip akan memutuskan hubungan, menggunakan prototaip jenis rujukan, dan subjenis tidak boleh menghantar parameter kepada superjenis.

Kelas pseudo menyelesaikan masalah perkongsian rujukan dan ketidakupayaan untuk lulus parameter jenis super Kita boleh menggunakan teknologi "pembina yang dipinjam"

Pijam pembina (warisan kelas)

Salin kod Kod adalah seperti berikut:

Fungsi Ibu Bapa(umur){
This.name = ['mike','jack','smith'];
This.age = umur;
}

fungsi Kanak-kanak(umur){
        Parent.call(ini,umur);
}
var test = new Child(21);
makluman(ujian.umur);//21
​​ alert(test.name);//mike,jack,smith
Test.name.push('bil');
​​ alert(test.name);//mike,jack,smith,bill

Walaupun meminjam pembina menyelesaikan dua masalah yang baru disebut, tanpa prototaip, penggunaan semula adalah mustahil, jadi kami memerlukan rantai prototaip untuk meminjam pembina Corak ini dipanggil warisan gabungan

Pusaka gabungan

Salin kod Kod adalah seperti berikut:

Fungsi Ibu Bapa(umur){
This.name = ['mike','jack','smith'];
This.age = umur;
}
Parent.prototype.run = fungsi () {
          kembalikan this.name ' are both' this.age;
};
Fungsi Kanak-kanak(umur){
​​​ Parent.call(this,age);//Penyamaran objek, menghantar parameter kepada jenis super
}
Child.prototype = new Parent();//Prototype chain inheritance
var test = new Child(21);//Anda juga boleh menulis new Parents(21)
alert(test.run());//mike,jack,smith kedua-duanya21

Warisan gabungan ialah kaedah warisan yang biasa digunakan Idea di sebaliknya ialah menggunakan rantaian prototaip untuk mewarisi sifat dan kaedah prototaip, dan meminjam pembina untuk mewarisi sifat contoh. Dengan cara ini, penggunaan semula fungsi dicapai dengan mentakrifkan kaedah pada prototaip, dan setiap contoh dijamin mempunyai atributnya sendiri.

Penggunaan panggilan(): Panggil kaedah objek dan gantikan objek semasa dengan objek lain.

Salin kod Kod adalah seperti berikut:

panggil([thisObj[,arg1[, arg2[, [,.argN]]]]])

Warisan prototaip

Warisan jenis ini menggunakan prototaip untuk mencipta objek baharu berdasarkan objek sedia ada tanpa mencipta jenis tersuai Ia dipanggil warisan prototaip

Salin kod Kod adalah seperti berikut:

Fungsi obj(o){
          fungsi F(){}
            F.prototaip = o;
           kembalikan F();
baharu }
kotak var = {
nama : 'trigkit4',
arr : ['abang','adik','baba']
};
var b1 = obj(kotak);
makluman(b1.name);//trigkit4

b1.name = 'mike';
makluman(b1.name);//mike

makluman(b1.arr);//abang,kakak,baba
b1.arr.push('ibu bapa');
alert(b1.arr);//abang, kakak, baba, ibu bapa

var b2 = obj(kotak);
​​ alert(b2.name);//trigkit4
alert(b2.arr);//abang, kakak, baba, ibu bapa

Warisan prototaip mula-mula mencipta pembina sementara di dalam fungsi obj(), kemudian menggunakan objek masuk sebagai prototaip pembina ini, dan akhirnya mengembalikan contoh baharu jenis sementara ini.

Warisan parasit

Kaedah pewarisan ini menggabungkan corak kilang prototaip dengan tujuan merangkum proses penciptaan.

Salin kod Kod adalah seperti berikut:

Fungsi cipta(o){
        var f= obj(o);
            f.run = fungsi () {
                kembalikan ini.arr;//Begitu juga, rujukan akan dikongsi
        };
         kembali f;
}

Masalah kecil dengan gabungan warisan

Warisan gabungan ialah corak warisan yang paling biasa digunakan dalam js, tetapi superjenis warisan gabungan akan dipanggil dua kali semasa penggunaan sekali apabila mencipta subjenis, dan masa yang lain di dalam pembina subjenis

Salin kod Kod adalah seperti berikut:

Fungsi Induk(nama){
This.name = nama;
This.arr = ['abang', 'adik', 'ibu bapa'];
}

Parent.prototype.run = fungsi () {
         kembalikan this.name;
};

fungsi Kanak-kanak(nama, umur){
        Parent.call(ini,umur);//Panggilan kedua
This.age = umur;
}

Child.prototype = new Parent();//Panggilan pertama

Kod di atas ialah warisan gabungan sebelumnya, jadi warisan gabungan parasit menyelesaikan masalah dua panggilan.

Warisan Kombinatorial Parasit

Salin kod Kod adalah seperti berikut:

Fungsi obj(o){
         fungsi F(){}
          F.prototaip = o;
          kembalikan F();
baharu }
Fungsi cipta(induk, ujian){
        var f = obj(parent.prototype);//Buat objek
            f.pembina = ujian;//Objek penambahbaikan
}

fungsi Induk(nama){
This.name = nama;
This.arr = ['abang', 'adik', 'ibu bapa'];
}

Parent.prototype.run = fungsi () {
         kembalikan this.name;
};

fungsi Kanak-kanak(nama, umur){
        Parent.call(ini,nama);
This.age =umur;
}

inheritPrototype(Ibu bapa, Anak);//Warisan dicapai melalui sini

var test = new Child('trigkit4',21);
Test.arr.push('anak saudara');
alert(test.arr);//
alert(test.run());//Hanya kaedah dikongsi

var test2 = new Child('jack',22);
alert(test2.arr);//Penyelesaian masalah sebut harga

panggil dan mohon

Fungsi global digunakan dan panggilan boleh digunakan untuk menukar penunjuk ini dalam fungsi, seperti berikut:

Salin kod Kod adalah seperti berikut:

//Tentukan fungsi global
Fungsi foo() {
console.log(this.fruit);
}

// Tentukan pembolehubah global
var fruit = "epal";
// Sesuaikan objek
pek var = {
        buah: "oren"
};

// Bersamaan dengan window.foo();
foo.apply(window); // "apple", pada masa ini sama dengan window
//Ini dalam foo pada masa ini === pek
foo.apply(pack); // "oren"