Hampir 20 tahun yang lalu, ketika Javascript lahir, itu hanya bahasa skrip web yang sederhana. Jika Anda lupa mengisi nama pengguna Anda, itu akan muncul peringatan.
Saat ini, telah menjadi hampir mahakuasa, dengan semua jenis kegunaan luar biasa dari ujung depan ke bagian belakang. Pemrogram menggunakannya untuk menyelesaikan proyek yang semakin besar.
Kompleksitas kode JavaScript juga meningkat tajam. Satu halaman web berisi 10.000 baris kode JavaScript, yang telah lama menjadi hal biasa. Pada 2010, seorang insinyur mengungkapkan bahwa panjang kode Gmail adalah 443.000 baris!
Untuk menulis dan memelihara kode kompleks seperti itu, strategi modular harus digunakan. Saat ini, pendekatan utama dalam industri ini adalah untuk mengadopsi "pemrograman berorientasi objek". Oleh karena itu, bagaimana JavaScript mengimplementasikan pemrograman berorientasi objek telah menjadi topik hangat.
Masalahnya adalah bahwa sintaks Javascipt tidak mendukung "kelas" (kelas), yang membuat metode pemrograman berorientasi objek tradisional tidak mungkin digunakan secara langsung. Pemrogram telah melakukan banyak eksplorasi untuk mempelajari cara mensimulasikan "kelas" dengan JavaScript. Artikel ini merangkum tiga metode JavaScript yang mendefinisikan "kelas", membahas karakteristik masing -masing metode, dan menekankan metode terbaik di mata saya.
==================================================================
Tiga cara untuk mendefinisikan kelas di JavaScript
Dalam pemrograman berorientasi objek, kelas adalah templat untuk objek yang mendefinisikan properti dan metode yang dibagikan oleh kelompok objek yang sama (juga dikenal sebagai "instance".
Bahasa JavaScript tidak mendukung "kelas", tetapi beberapa solusi dapat digunakan untuk mensimulasikan "kelas".
1. Metode Konstruktor
Ini adalah metode klasik dan metode yang harus diajar dalam buku teks. Ini menggunakan konstruktor untuk mensimulasikan "kelas" dan menggunakan kata kunci ini untuk merujuk ke objek instan di dalamnya.
Salinan kode adalah sebagai berikut:
function cat () {
this.name = "rambut besar";
}
Saat menghasilkan instance, gunakan kata kunci baru.
Salinan kode adalah sebagai berikut:
var cat1 = kucing baru ();
peringatan (cat1.name); // rambut besar
Properti dan metode kelas juga dapat didefinisikan pada objek prototipe konstruktor.
Salinan kode adalah sebagai berikut:
Cat.prototype.makeound = function () {
waspada ("meow meow");
}
Untuk pengantar terperinci untuk metode ini, silakan lihat serangkaian artikel yang saya tulis, "Pemrograman Berorientasi Objek Javascript", saya tidak akan membicarakannya di sini. Kerugian utamanya adalah relatif kompleks dan menggunakan ini dan prototipe, yang sangat melelahkan untuk ditulis dan dibaca.
2. Metode Object.Create ()
Untuk menyelesaikan kekurangan dari "metode konstruktor" dan untuk lebih mudah menghasilkan objek, edisi kelima ecmascript, Standar Internasional JavaScript (edisi ketiga saat ini tersedia), mengusulkan objek metode baru. Create ().
Menggunakan metode ini, "kelas" adalah objek, bukan fungsi.
Salinan kode adalah sebagai berikut:
var kucing = {
Nama: "Rambut Besar",
makeound: function () {waspada ("meow meow meow"); }
};
Kemudian, gunakan Object.Create () secara langsung untuk menghasilkan instance tanpa menggunakan yang baru.
Salinan kode adalah sebagai berikut:
var cat1 = object.create (cat);
peringatan (cat1.name); // rambut besar
cat1.makeound (); // meow meow meow meow
Saat ini, versi terbaru dari browser utama (termasuk IE9) telah menggunakan metode ini. Jika Anda menemukan browser lama, Anda dapat menggunakan kode berikut untuk menggunakannya sendiri.
Salinan kode adalah sebagai berikut:
if (! Object.create) {
Objek.create = function (o) {
fungsi f () {}
F.prototype = o;
mengembalikan f baru ();
};
}
Metode ini lebih sederhana dari "metode konstruktor", tetapi tidak dapat mengimplementasikan atribut pribadi dan metode pribadi, dan data tidak dapat dibagi antara objek instance, sehingga simulasi "kelas" tidak cukup komprehensif.
3. Hukum Minimalis
Programmer Belanda Gabor de Mooij mengusulkan pendekatan baru yang lebih baik daripada objek.create (), yang disebutnya "pendekatan minimalis". Ini juga metode yang saya rekomendasikan.
3.1 Kemasan
Metode ini tidak menggunakan ini dan prototipe, dan kodenya sangat mudah digunakan, yang mungkin mengapa disebut "hukum minimalis".
Pertama -tama, ia juga menggunakan objek untuk mensimulasikan "kelas". Di kelas ini, tentukan konstruktor createNew () untuk menghasilkan instance.
Salinan kode adalah sebagai berikut:
var kucing = {
createNew: function () {
// beberapa kode di sini
}
};
Kemudian, di CreateNew (), tentukan objek instan dan gunakan objek instan ini sebagai nilai pengembalian.
Salinan kode adalah sebagai berikut:
var kucing = {
createNew: function () {
var cat = {};
cat.name = "rambut besar";
cat.makesound = function () {alert ("meow meow"); };
kembalikan kucing;
}
};
Saat menggunakannya, hubungi metode CreateNew () untuk mendapatkan objek instan.
Salinan kode adalah sebagai berikut:
var cat1 = cat.createNew ();
cat1.makeound (); // meow meow meow meow
Keuntungan dari pendekatan ini adalah mudah dimengerti, memiliki struktur yang jelas dan elegan, dan sejalan dengan konstruksi tradisional "pemrograman berorientasi objek" tradisional, sehingga fitur-fitur berikut dapat dengan mudah digunakan.
3.2 Warisan
Sangat nyaman untuk mengimplementasikan satu kelas di kelas berikutnya. Panggil saja metode createNew () dari yang terakhir dalam metode createNew ().
Pertama -tama tentukan kelas hewan.
Salinan kode adalah sebagai berikut:
var hewan = {
createNew: function () {
var hewan = {};
animal.sleep = function () {alert ("Sleep in"); };
hewan kembali;
}
};
Kemudian, dalam metode Cat's CreateTenew (), metode createNew () disebut.
Salinan kode adalah sebagai berikut:
var kucing = {
createNew: function () {
var cat = animal.createNew ();
cat.name = "rambut besar";
cat.makesound = function () {alert ("meow meow"); };
kembalikan kucing;
}
};
Contoh kucing yang diperoleh dengan cara ini akan mewarisi kelas kucing dan kelas hewan.
Salinan kode adalah sebagai berikut:
var cat1 = cat.createNew ();
cat1.sleep (); // tidur
3.3 Atribut Pribadi dan Metode Pribadi
Dalam metode createNew (), selama metode dan properti yang tidak didefinisikan pada objek kucing bersifat pribadi.
Salinan kode adalah sebagai berikut:
var kucing = {
createNew: function () {
var cat = {};
var sound = "meow meow meow";
cat.makeound = function () {waspada (suara); };
kembalikan kucing;
}
};
Suara variabel internal dalam contoh di atas tidak dapat dibaca secara eksternal, dan hanya dapat dibaca melalui metode publik Cat Makeound ().
Salinan kode adalah sebagai berikut:
var cat1 = cat.createNew ();
peringatan (cat1.sound); // belum diartikan
3.4 Berbagi Data
Terkadang, kita membutuhkan semua objek instan untuk dapat membaca dan menulis data internal yang sama. Pada saat ini, cukup merangkum data internal ini di dalam objek kelas dan di luar metode CreateNew ().
Salinan kode adalah sebagai berikut:
var kucing = {
suara: "meow meow meow",
createNew: function () {
var cat = {};
cat.makeound = function () {warting (cat.sound); };
cat.changeSound = function (x) {cat.sound = x; };
kembalikan kucing;
}
};
Kemudian, dua objek instance dihasilkan:
Salinan kode adalah sebagai berikut:
var cat1 = cat.createNew ();
var cat2 = cat.createNew ();
cat1.makeound (); // meow meow meow meow
Pada saat ini, jika ada objek instan dan data bersama dimodifikasi, objek instance lainnya juga akan terpengaruh.
Salinan kode adalah sebagai berikut:
Cat2.changeSound ("Lalala");
cat1.makeound (); // Lalala
(lebih)