Dasar-Dasar AJAX: Implementasi Kelas dalam JavaScript Dalam JavaScript, Anda dapat menggunakan kata kunci fungsi untuk mendefinisikan "kelas" dan cara menambahkan anggota ke kelas. Variabel atau metode yang direferensikan melalui pointer ini dalam suatu fungsi akan menjadi anggota kelas. Misalnya:
Berikut cuplikan kodenya:
function class1(){
var s="abc";
ini.p1=s;
ini.metode1=fungsi(){
alert("ini adalah metode pengujian");
}
}
var obj1=kelas1 baru();
Dapatkan objek obj1 melalui class1() baru, dan objek obj1 secara otomatis mendapatkan atribut p1 dan metode metode1.
Dalam JavaScript, pengertian fungsi sendiri adalah konstruktor suatu kelas. Menggabungkan properti objek yang diperkenalkan sebelumnya dan penggunaan operator baru, berikut ini penjelasan proses pembuatan objek menggunakan yang baru.
(1) Ketika penerjemah menemukan operator baru, ia membuat objek kosong;
(
2) Mulai menjalankan fungsi class1 dan mengarahkan penunjuk ini ke objek yang baru dibuat;
Saat memberikan nilai pada suatu atribut, interpreter akan membuat atribut untuk objek tersebut. Misalnya, di class1, ketika pernyataan this.p1=s dijalankan, atribut p1 akan ditambahkan dan nilai variabel s akan menjadi. ditugaskan padanya, sehingga Eksekusi fungsi adalah proses inisialisasi objek ini, yaitu mewujudkan peran konstruktor;
(4) Ketika fungsi dijalankan, operator baru mengembalikan objek yang diinisialisasi;
Melalui seluruh proses ini, mekanisme dasar berorientasi objek diimplementasikan dalam JavaScript. Terlihat bahwa dalam JavaScript, pengertian fungsi sebenarnya adalah mengimplementasikan konstruktor suatu objek, yang diselesaikan melalui fungsi. Kerugian dari metode ini adalah:
· Menyatukan semua pernyataan inisialisasi dan definisi anggota, logika kode tidak cukup jelas, dan sulit untuk mengimplementasikan fungsi yang kompleks.
·Setiap kali sebuah instance kelas dibuat, konstruktor harus dieksekusi satu kali. Properti dan metode yang didefinisikan dalam konstruktor selalu dibuat berulang kali. Misalnya:
berikut ini adalah potongan kode:
this.method1=function(){
alert("ini adalah metode pengujian");
}
Setiap kali metode1 di sini membuat instance kelas1, maka akan dibuat satu kali, sehingga menyebabkan pemborosan memori. Bagian selanjutnya memperkenalkan mekanisme definisi kelas lain: objek prototipe, yang dapat mengatasi kekurangan yang disebabkan oleh pendefinisian anggota kelas dalam konstruktor.
Menggunakan objek prototipe untuk mendefinisikan anggota kelas
Bagian sebelumnya memperkenalkan mekanisme implementasi kelas dan implementasi konstruktor. Sekarang kita memperkenalkan mekanisme lain untuk menambahkan anggota ke kelas: objek prototipe. Ketika suatu fungsi baru, anggota objek akan secara otomatis ditugaskan ke objek yang dibuat. Misalnya:
Berikut cuplikan kodenya:
<skrip bahasa="JavaScript" type="teks/javascript">
<!--
//Definisikan fungsi kelas class1(){ hanya dengan satu atribut prop
ini.prop=1;
}
//Gunakan atribut prototipe fungsi untuk mendefinisikan anggota baru kelas class1.prototype.showProp=function(){
alert(ini.prop);
}
//Buat sebuah instance dari class1 var obj1=new class1();
//Panggil metode showProp yang ditentukan melalui objek prototipe prototipe obj1.showProp();
//-->
</skrip>
Prototipe adalah objek JavaScript yang dapat menambah, memodifikasi, dan menghapus metode dan properti pada objek prototipe. Ini menambahkan definisi anggota ke kelas.
Sekarang kita memahami objek prototipe dari fungsi tersebut, mari kita lihat proses eksekusi yang baru.
(1) Buat objek baru dan biarkan penunjuk ini menunjuk ke sana;
(2) Tetapkan semua anggotaobjek
prototipe fungsi ke objek baru ini;
(3) Jalankan badan fungsi dan inisialisasi objek;
dibuat di (1).
Dibandingkan dengan proses eksekusi yang baru diperkenalkan di bagian sebelumnya, terdapat proses tambahan menggunakan prototipe untuk menginisialisasi objek. Hal ini juga sesuai dengan arti literal dari prototype, yaitu prototipe dari instance kelas yang bersangkutan.
Proses inisialisasi ini terjadi sebelum badan fungsi(
konstruktor) dijalankan, sehingga properti dan metode yang didefinisikan dalam prototipe dapat dipanggil di dalam badan fungsi.
<skrip bahasa="JavaScript" type="teks/javascript">
<!--
//Definisikan kelas dengan hanya satu atribut prop
fungsi kelas1(){
ini.prop=1;
ini.showProp();
}
//Gunakan atribut prototype dari fungsi tersebut untuk mendefinisikan anggota baru pada kelas
class1.prototype.showProp=fungsi(){
alert(ini.prop);
}
//Buat sebuah instance dari kelas1
var obj1=kelas1 baru();
//-->
</skrip>
Dibandingkan dengan kode sebelumnya, di sini metode showProp yang didefinisikan dalam prototipe dipanggil di dalam kelas1, sehingga kotak dialog muncul selama proses konstruksi objek, menunjukkan bahwa nilai atribut prop adalah 1.
Perlu dicatat bahwa definisi objek prototipe harus sebelum pernyataan yang membuat instance kelas, jika tidak maka tidak akan berfungsi. Misalnya:
Berikut cuplikan kodenya:
<skrip bahasa="JavaScript" type="teks/javascript">
<!--
//Definisikan kelas dengan hanya satu atribut prop
fungsi kelas1(){
ini.prop=1;
ini.showProp();
}
//Buat sebuah instance dari kelas1
var obj1=kelas1 baru();
//Gunakan atribut prototype dari fungsi untuk mendefinisikan anggota baru kelas setelah pernyataan yang membuat instance. Ini hanya akan efektif untuk objek yang dibuat nanti.
class1.prototype.showProp=fungsi(){
alert(ini.prop);
}
//-->
</script>
Kode ini akan menghasilkan kesalahan runtime, yang menunjukkan bahwa objek tampilan tidak memiliki metode showProp karena metode tersebut didefinisikan setelah pernyataan yang membuat instance kelas.
Terlihat bahwa objek prototype dipersembahkan untuk anggota kelas desain, dan berkaitan erat dengan suatu kelas. Selain itu, prototipe juga memiliki atribut penting: konstruktor, yang mewakili referensi ke
konstruktor berikut cuplikan kodenya:
fungsi kelas1(){
peringatan(1);
}
class1.prototype.constructor(); //Panggil konstruktor kelas
Setelah kode ini dijalankan, akan muncul kotak dialog dengan teks "1" yang ditampilkan di atasnya. Hal ini menunjukkan bahwa prototipe berkaitan erat dengan definisi suatu kelas. Sebenarnya: class1.prototype.constructor===class1.
Pola desain untuk kelas JavaScript.
Kami telah memperkenalkan cara mendefinisikan kelas dan cara menginisialisasi instance kelas. Kelas dapat menambahkan anggota ke badan fungsi yang ditentukan oleh fungsi, dan juga dapat menggunakan prototipe untuk mendefinisikan anggota kelas . Kode pemrogramannya sepertinya membingungkan. Bagaimana cara mendefinisikan kelas dengan jelas? Pola implementasi untuk suatu kelas diberikan di bawah ini.
Dalam JavaScript, karena sifat objek yang fleksibel, anggota juga dapat ditambahkan ke kelas di konstruktor, yang tidak hanya meningkatkan fleksibilitas, tetapi juga meningkatkan kompleksitas kode. Untuk meningkatkan keterbacaan dan efisiensi pengembangan kode, Anda dapat menggunakan cara mendefinisikan anggota ini dan menggunakan objek prototipe sebagai gantinya. Dengan cara ini, definisi fungsi adalah konstruktor kelas, yang sejalan dengan implementasi dari kelas tradisional: nama kelas dan nama konstruktornya sama. Misalnya:
Berikut cuplikan kodenya:
fungsi kelas1(){
//Konstruktor
}
//Definisi anggota
class1.prototype.someProperty="sampel";
class1.prototype.someMethod=fungsi(){
//Kode implementasi metode
}
Meskipun kode di atas telah membuat definisi kelas menjadi lebih jelas, setiap kali properti atau metode didefinisikan, class1.prototype perlu digunakan. Tidak hanya ukuran kode menjadi lebih besar, tetapi keterbacaannya saja tidak cukup. Untuk perbaikan lebih lanjut, Anda dapat menggunakan konstruktor objek yang belum diketik untuk menentukan objek prototipe guna mengimplementasikan definisi anggota kelas:
Berikut cuplikan kodenya:
//Definisikan kelas kelas1
fungsi kelas1(){
//Konstruktor
}
//Realisasikan definisi anggota kelas dengan menentukan objek prototipe
kelas1.prototipe={
someProperty:"sampel", someMethod:function(){
//kode metode
},
...//Properti dan metode lainnya.
}
Kode di atas mendefinisikan class1 dengan cara yang sangat jelas. Konstruktor diimplementasikan langsung dengan nama kelas, dan anggotanya didefinisikan menggunakan objek yang tidak diketik. Semua properti dan metode diimplementasikan dalam daftar dan dapat diinisialisasi pada saat yang bersamaan didefinisikan.Nilai atribut. Ini juga lebih mirip implementasi kelas dalam bahasa berorientasi objek tradisional. Hanya saja definisi konstruktor dan anggota kelas dibagi menjadi dua bagian. Hal ini dapat dikatakan sebagai pola tetap untuk mendefinisikan kelas dalam JavaScript, yang akan memudahkan pemahaman saat menggunakannya.
Catatan: Referensi antar anggota kelas harus dilakukan melalui pointer ini. Misalnya pada metode someMethod pada contoh di atas, jika ingin menggunakan atribut someProperty, Anda harus melewati form this.someProperty, karena di JavaScript masing-masing. properti dan metode bersifat independen, mereka terhubung ke objek melalui penunjuk ini.