Konsep warisan JS
Dua metode warisan berikut yang biasa digunakan dalam JS:
Warisan rantai prototipe (warisan antara objek)
Warisan klasik (warisan antara konstruktor)
Karena JS bukan bahasa yang benar-benar berorientasi objek seperti Java, JS berbasis objek dan tidak memiliki konsep kelas. Oleh karena itu, jika Anda ingin menerapkan warisan, Anda dapat menggunakan mekanisme prototipe prototipe JS atau menggunakan metode Apply and Call untuk mengimplementasikannya
Dalam bahasa yang berorientasi objek, kami menggunakan kelas untuk membuat objek khusus. Namun, semua yang ada di JS adalah objek, jadi metode apa yang dapat digunakan untuk membuat objek khusus? Ini membutuhkan prototipe JS:
Kami dapat dengan mudah menganggap prototipe sebagai templat. Objek kustom yang baru dibuat adalah salinan dari templat ini (prototipe) (sebenarnya bukan salinan tetapi tautan, tetapi tautan semacam ini tidak terlihat. Ada pointer __proTo__ yang tidak terlihat di dalam objek yang baru dibahas, menunjuk ke objek prototipe).
JS dapat mensimulasikan dan mengimplementasikan fungsi kelas melalui konstruktor dan prototipe. Selain itu, implementasi warisan tipe JS juga dicapai dengan mengandalkan rantai prototipe.
Prototipe warisan dan warisan kelas
Warisan klasik adalah panggilan konstruktor supertype di dalam konstruktor subtipe.
Warisan kelas yang ketat tidak terlalu umum, dan umumnya digunakan dalam kombinasi:
Salinan kode adalah sebagai berikut:
fungsi super () {
this.colors = ["merah", "biru"];
}
fungsi sub () {
Super.call (ini);
}
Prototipe warisan adalah untuk membuat objek baru dengan bantuan objek yang ada dan arahkan prototipe subclass ke kelas induk, yang setara dengan menambahkan rantai prototipe kelas induk.
Warisan rantai prototipe
Agar kelas anak dapat mewarisi sifat -sifat kelas induk (termasuk metode), konstruktor pertama -tama diperlukan untuk mendefinisikan. Kemudian, tetapkan contoh baru kelas induk ke prototipe konstruktor. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<script>
function parent () {
this.name = 'mike';
}
function child () {
this.age = 12;
}
Child.prototype = Parent baru (); // Anak mewarisi orang tua dan membentuk rantai melalui prototipe.
var test = anak baru ();
waspada (test.age);
alert (test.name); // Dapatkan atribut yang diwariskan
// Terus mewarisi rantai prototipe
function brother () {// Brother Construct
this.weight = 60;
}
Brother.prototype = new child (); // Lanjutkan ke prototipe rantai warisan
var saudara = saudara baru ();
waspada (saudara.name); // mewarisi orang tua dan anak, Mike muncul
Peringatan (Brother.Age); // Pop 12
</script>
Warisan rantai prototipe di atas masih hilang satu tautan, yaitu objek, dan semua konstruktor diwarisi dari objek. Objek mewarisi secara otomatis diselesaikan dan tidak memerlukan warisan manual sendiri. Jadi apa hubungan bawahan mereka?
Tentukan hubungan antara prototipe dan instance
Ada dua cara untuk menentukan hubungan antara prototipe dan instance. Metode Operator Operator dan IsprototypeOf ():
Salinan kode adalah sebagai berikut:
ALERT (Saudara Contoh Objek) // Benar
waspada (tes instance dari saudara); // false, tes adalah superclass dari saudara
waspada (contoh saudara anak); // true
waspada (contoh saudara orang tua); // true
Selama itu adalah prototipe yang muncul dalam rantai prototipe, dapat dikatakan sebagai prototipe dari instance yang berasal dari rantai prototipe. Oleh karena itu, metode isPrototypeOf () juga akan mengembalikan true.
Dalam JS, fungsi yang diwariskan disebut supertype (kelas induk, kelas dasar, dan juga) dan fungsi yang diwariskan disebut subtipe (subkelas, kelas turunan). Menggunakan prototipe warisan terutama melibatkan dua masalah:
Pertama, penulisan ulang prototipe literal akan mematahkan hubungan, menggunakan prototipe dari jenis referensi, dan subtipe tidak dapat meneruskan parameter ke supertype.
Pseudo-Class memecahkan masalah berbagi referensi dan supertype tidak dapat lulus argumen. Kita dapat menggunakan teknologi "pinjaman konstruktor".
Pinjaman Konstruktor (Warisan Klasik)
Salinan kode adalah sebagai berikut:
<script>
function parent (usia) {
this.name = ['mike', 'jack', 'smith'];
this.age = usia;
}
fungsi anak (usia) {
Parent.call (ini, usia);
}
var test = anak baru (21);
peringatan (test.age); // 21
waspada (test.name); // mike, jack, smith
test.name.push ('Bill');
peringatan (test.name); // Mike, Jack, Smith, Bill
</script>
Meskipun pinjaman konstruktor memecahkan dua masalah sekarang, tanpa prototipe, tidak ada cara untuk menggunakan kembali, jadi kita membutuhkan rantai prototipe + pola konstruktor pinjaman. Pola ini disebut warisan kombinasi.
Warisan Kombinasi
Salinan kode adalah sebagai berikut:
<script>
function parent (usia) {
this.name = ['mike', 'jack', 'smith'];
this.age = usia;
}
Parent.prototype.run = function () {
kembalikan this.name + 'keduanya' + this.age;
};
fungsi anak (usia) {
Parent.call (ini, usia); // objek menyamar dan meneruskan parameter ke supertype
}
Child.prototype = new Parent (); // prototipe rantai warisan
var test = anak baru (21); // Menulis orang tua baru (21) OK
Peringatan (test.run ()); // Mike, Jack, Smith adalah Both21
</script>
Kombinasi warisan adalah metode warisan yang relatif umum digunakan. Gagasan di baliknya adalah menggunakan rantai prototipe untuk mengimplementasikan pewarisan properti dan metode prototipe, dan untuk mengimplementasikan pewarisan properti instan dengan meminjam konstruktor. Dengan cara ini, multiplexing fungsi dicapai dengan mendefinisikan metode pada prototipe, dan memastikan bahwa setiap instance memiliki sifatnya sendiri.
Penggunaan panggilan (): Panggilan metode objek dan ganti objek saat ini dengan objek lain.
Salinan kode adalah sebagai berikut:
Call ([thisobj [, arg1 [, arg2 [, [, .Argn]]]]))
Warisan prototipe
Cara ini mewarisi pembuatan objek baru berdasarkan objek yang ada tanpa membuat tipe khusus disebut prototipe warisan
Salinan kode adalah sebagai berikut:
<script>
fungsi obj (o) {
fungsi f () {}
F.prototype = o;
mengembalikan f baru ();
}
var box = {
Nama: 'trigkit4',
Arr: ['Brother', 'Sister', 'Baba']
};
var b1 = obj (kotak);
alert (b1.name); // trigkit4
b1.name = 'mike';
peringatan (b1.name); // mike
waspada (b1.arr); // saudara laki -laki, saudara perempuan, baba
b1.arr.push ('orang tua');
Peringatan (B1.ARR); // Saudara laki -laki, saudara perempuan, Baba, orang tua
var b2 = obj (kotak);
alert (b2.name); // trigkit4
waspada (b2.arr); // saudara laki -laki, saudari, baba, orang tua
</script>
Prototipe warisan pertama kali membuat konstruktor sementara di dalam fungsi OBJ (), kemudian menggunakan objek yang dilewatkan sebagai prototipe konstruktor, dan akhirnya mengembalikan instance baru dari tipe sementara ini.
Warisan parasit
Metode warisan ini menggabungkan model pabrik prototipe +, dengan tujuan proses pembuatan enkapsulasi.
Salinan kode adalah sebagai berikut:
<script>
function create (o) {
var f = obj (o);
f.run = function () {
kembalikan this.arr; // Demikian pula, referensi akan dibagikan
};
kembali f;
}
</script>
Masalah kecil dengan warisan kombinasi
Kombinasi warisan adalah mode warisan yang paling umum digunakan dalam JS, tetapi supertype dari pewarisan gabungan akan disebut dua kali selama penggunaan; Sekali adalah saat membuat subtipe, dan yang lainnya berada di dalam konstruktor subtipe.
Salinan kode adalah sebagai berikut:
<script>
Function Parent (Name) {
this.name = name;
this.arr = ['Brother', 'Sister', 'Parents'];
}
Parent.prototype.run = function () {
kembalikan nama ini;
};
function anak (nama, usia) {
Parent.call (ini, usia); // Panggilan kedua
this.age = usia;
}
Child.prototype = new parent (); // panggilan pertama
</script>
Kode di atas adalah warisan kombinasi sebelumnya, sehingga pewarisan kombinasi parasit memecahkan masalah dua panggilan.
Warisan kombinasi parasit
Salinan kode adalah sebagai berikut:
<script>
fungsi obj (o) {
fungsi f () {}
F.prototype = o;
mengembalikan f baru ();
}
function create (Parent, test) {
var f = obj (parent.prototype); // Buat objek
f.constructor = test; // objek yang ditingkatkan
}
Function Parent (Name) {
this.name = name;
this.arr = ['Brother', 'Sister', 'Parents'];
}
Parent.prototype.run = function () {
kembalikan nama ini;
};
function anak (nama, usia) {
Parent.call (ini, nama);
this.age = usia;
}
whereitprototype (induk, anak); // warisan diwujudkan di sini
var test = anak baru ('trigkit4', 21);
test.arr.push ('keponakan');
waspada (test.arr); //
waspada (test.run ()); // Hanya metode yang dibagikan
var test2 = anak baru ('jack', 22);
waspada (test2.arr); // selesaikan masalah kutipan
</script>
hubungi dan lamar
Fungsi global berlaku dan panggilan dapat digunakan untuk mengubah titik ini dalam fungsi, sebagai berikut:
Salinan kode adalah sebagai berikut:
// Tentukan fungsi global
fungsi foo () {
console.log (this.fruit);
}
// Tentukan variabel global
var buah = "apel";
// Sesuaikan objek
var pack = {
Buah: "Orange"
};
// setara dengan window.foo ();
foo.Amply (window); // "apel", ini sama dengan jendela
// ini === Paket di foo
foo.Amply (paket); // "oranye"