Dalam pengembangan front-end, seringkali perlu untuk mendefinisikan kelas JS. Jadi dalam JavaScript, ada beberapa cara untuk mendefinisikan kelas, dan apa perbedaannya? Artikel ini menjelaskan enam cara berikut untuk mendefinisikan kelas JS (deskripsi kasus):
1. Metode pabrik
function car () {var ocar = objek baru; ocar.color = "blue"; ocar.doors = 4; ocar.showcolor = function () {document.write (this.color)}; return ocar;} var car1 = car (); var car2 = car ();Ketika fungsi ini dipanggil, objek baru dibuat dan semua properti dan metode ditetapkan. Gunakan fungsi ini untuk membuat 2 objek dengan properti yang persis sama.
Tentu saja, Anda dapat memodifikasi metode ini dengan memberikan parameter padanya.
Fungsi mobil (warna, pintu) {var ocar = objek baru; ocar.color = warna; ocar.doors = pintu; ocar.showcolor = function () {document.write (this.color)}; return ocar;} var car1 = car ("merah", 4); var car2 = car ("biru", 4); car1 = car1.); // output: "merah" car2.showcolor () // output: "biru"Sekarang Anda bisa mendapatkan objek dengan nilai yang berbeda dengan memberikan parameter yang berbeda ke fungsi.
Dalam contoh sebelumnya, setiap kali fungsi mobil () disebut, showColor () dibuat, yang berarti bahwa setiap objek memiliki metode showColor () sendiri.
Namun pada kenyataannya, setiap objek berbagi fungsi yang sama. Meskipun metode dapat didefinisikan di luar fungsi, kemudian dengan mengarahkan sifat fungsi ke metode.
function showColor () {waspada (this.color);} function car () {var ocar = objek baru (); ocar.color = warna; ocar.doors = pintu; ocar.showcolor = showcolor; return ocar;}Tapi ini tidak terlihat seperti metode fungsi.
2. Metode Konstruktor
Metode konstruktor sesederhana metode pabrik, seperti yang ditunjukkan di bawah ini:
function car (warna, pintu) {this.color = color; this.doors = door; this.showcolor = function () {alert (this.color)};} var car1 = mobil baru ("merah", 4); var car2 = mobil baru ("biru", 4);Anda dapat melihat bahwa metode konstruktor tidak membuat objek di dalam fungsi, dan kata kunci ini digunakan. Karena suatu objek telah dibuat saat memanggil konstruktor, dan ini hanya dapat digunakan untuk mengakses properti objek dalam fungsi.
Sekarang gunakan yang baru untuk membuat objek, sepertinya itu! Tapi itu sama dengan pabrik. Setiap panggilan membuat metode sendiri untuk objek.
3. Metode prototipe
Metode ini memanfaatkan atribut prototipe objek. Pertama, buat nama kelas dengan fungsi kosong, dan kemudian semua atribut dan metode ditetapkan ke atribut prototipe.
function car () {} car.prototype.color = "red"; car.prototype.doors = 4; car.prototype.showcolor = function () {alert (this.color);} var car1 = car baru (); var car2 = car baru ();Dalam kode ini, fungsi kosong pertama kali didefinisikan, dan kemudian properti objek didefinisikan melalui atribut prototipe. Ketika fungsi ini dipanggil, semua properti prototipe akan ditugaskan ke objek yang akan dibuat segera. Semua objek dalam fungsi ini menyimpan petunjuk untuk menampilkanColor (), yang secara sintaksis tampaknya termasuk objek yang sama.
Namun, fungsi ini tidak memiliki parameter, dan atribut tidak dapat diinisialisasi dengan melewati parameter. Nilai default atribut harus diubah setelah objek dibuat.
Masalah yang sangat serius dengan metode prototipe adalah bahwa ketika atribut menunjuk ke suatu objek, seperti array.
function car () {} car.prototype.color = "red"; car.prototype.doors = 4; car.prototype.arr = array baru ("a", "b"); car.prototype.showcolor = function () {this.color);} var car1 = new car (); Car (); car1.arr.push ("cc"); alert (car1.arr); //output:aa,bb ,cclert(car2.arr); // Output: AA, BB, CCDi sini, karena nilai referensi dari array, kedua objek mobil menunjuk ke array yang sama, jadi ketika nilainya ditambahkan di CAR1, Anda juga dapat melihatnya di CAR2.
Union adalah metode yang dapat membuat objek seperti bahasa pemrograman lainnya menggunakan konstruktor/prototipe. Ini adalah metode yang menggunakan konstruktor untuk mendefinisikan sifat non-fungsional objek dan menggunakan prototipe untuk mendefinisikan objek.
function car (warna, pintu) {this.color = color; this.doors = door; this.arr = array baru ("aa", "bb");} car.prototype.showcolor () {alert (this.color);} var car1 = baru ("merah", 4); var car2 = new = new = new = var car1 = red ("red", 4); var car2 = var car2 = var car1 = red ("red", 4); var car2 = var car1 = var car1 = red ("red", 4); Mobil ("biru", 4); car1.arr.push ("cc"); waspada (car1.arr); //output:aa,bb ,calert(car2.arr); // Output: AA, BB5. Metode Prototipe Dinamis
Metode prototipe dinamis mirip dengan metode konstruktor/prototipe campuran. Satu -satunya perbedaan adalah posisi yang diberikan pada metode objek.
Fungsi mobil (warna, pintu) {this.color = warna; this.doors = door; this.arr = array baru ("aa", "bb"); if (typeof car._initialized == "tidak terdefinisi") {car.prototype.showcolor = function () {waspada (this.color);};Metode prototipe dinamis adalah menggunakan bendera untuk menentukan apakah prototipe telah diberi metode. Ini memastikan bahwa metode ini dibuat hanya sekali
6. Metode Pabrik Campuran
Guru tujuannya menciptakan konstruktor palsu yang hanya mengembalikan contoh baru dari objek lain.
function car () {var ocar = objek baru (); ocar.color = "red"; ocar.doors = 4; ocar.showcolor = function () {alert (this.color)}; return ocar;}Berbeda dengan metode pabrik, metode ini menggunakan operator baru.
Di atas adalah semua metode membuat objek. Metode yang paling banyak digunakan adalah metode konstruktor/prototipe hybrid, dan metode prototipe dinamis juga sangat populer. Secara fungsional setara dengan metode konstruktor/prototipe.
Penjelasan terperinci di atas tentang enam cara untuk mendefinisikan kelas JS adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.