Objek adalah apa pun yang ingin dipelajari orang, dari bilangan bulat paling sederhana hingga pesawat yang kompleks, dll., Yang tidak hanya dapat mewakili hal -hal konkret, tetapi juga aturan, rencana, atau peristiwa abstrak. --Kuten dari ensiklopedia Baidu
Pemrograman berorientasi objek adalah model pemrograman paling populer saat ini. Tetapi membuat frustrasi bahwa, karena javascript front-end yang paling banyak digunakan, tidak mendukung objek yang berorientasi pada objek.
JavaScript tidak memiliki karakter kontrol akses, itu tidak menentukan kelas kata kunci, itu tidak mendukung Extend atau usus besar yang diwariskan, dan tidak menggunakan virtual untuk mendukung fungsi virtual. Namun, JavaScript adalah bahasa yang fleksibel. Mari kita lihat bagaimana JavaScript tanpa kata kunci kelas mengimplementasikan definisi kelas dan membuat objek.
Tentukan kelas dan buat objek instance dari kelas
Dalam JavaScript, kami menggunakan fungsi untuk mendefinisikan kelas, sebagai berikut:
Salinan kode adalah sebagai berikut:
bentuk fungsi ()
{
var x = 1;
var y = 2;
}
Anda mungkin mengatakan, keraguan? Bukankah ini fungsi yang menentukan? Benar, ini adalah fungsi yang menentukan. Kami mendefinisikan fungsi bentuk dan menginisialisasi x dan y. Namun, jika Anda melihatnya dari perspektif lain, ini adalah untuk menentukan kelas bentuk, yang berisi dua properti x dan y, dan nilai awal masing -masing adalah 1 dan 2. Namun, kata kunci yang kami definisikan kelas adalah fungsi daripada kelas.
Kemudian, kita dapat membuat objek ashape dari kelas bentuk, sebagai berikut:
Salinan kode adalah sebagai berikut:
var ashape = bentuk baru ();
Tentukan properti publik dan pribadi
Kami telah membuat objek Ashape, tetapi ketika kami mencoba mengakses propertinya, kami mendapatkan kesalahan seperti ini:
Salinan kode adalah sebagai berikut:
ashape.x = 1;
Ini menunjukkan bahwa properti yang didefinisikan dengan var bersifat pribadi. Kita perlu menggunakan kata kunci ini untuk mendefinisikan atribut publik.
Salinan kode adalah sebagai berikut:
bentuk fungsi ()
{
this.x = 1;
this.y = 2;
}
Dengan cara ini, kita dapat mengakses properti bentuk, seperti:
Salinan kode adalah sebagai berikut:
ashape.x = 2;
OK, kita dapat meringkas dari kode di atas: menggunakan var untuk menentukan atribut pribadi kelas, dan menggunakan ini untuk menentukan atribut publik kelas.
Tentukan metode publik dan pribadi
Dalam JavaScript, suatu fungsi adalah instance dari kelas fungsi, dan fungsi secara tidak langsung diwariskan dari objek, sehingga suatu fungsi juga merupakan objek. Oleh karena itu, kami dapat membuat fungsi menggunakan metode penugasan. Tentu saja, kami juga dapat menetapkan fungsi ke variabel atribut kelas. Kemudian, variabel atribut ini dapat disebut metode karena merupakan fungsi yang dapat dieksekusi. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
bentuk fungsi ()
{
var x = 0;
var y = 1;
this.draw = function ()
{
//mencetak;
};
}
Kami mendefinisikan undian dalam kode di atas dan menetapkan fungsi untuk itu. Di bawah ini, kita dapat menyebut fungsi ini melalui Ashape, yang disebut metode publik di OOP, seperti:
Salinan kode adalah sebagai berikut:
ashape.draw ();
Jika didefinisikan dengan VAR, maka undian menjadi pribadi, yang disebut metode pribadi di OOP, seperti:
Salinan kode adalah sebagai berikut:
bentuk fungsi ()
{
var x = 0;
var y = 1;
var draw = function ()
{
//mencetak;
};
}
Dengan cara ini, Anda tidak dapat menggunakan ashape.draw untuk memanggil fungsi ini.
Konstruktor
Javascript tidak mendukung OOP, jadi tentu saja tidak ada konstruktor. Namun, kita dapat mensimulasikan konstruktor sendiri dan membuat objek secara otomatis dipanggil ketika dibuat. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
bentuk fungsi ()
{
var init = function ()
{
// Kode Konstruktor
};
init ();
}
Di akhir bentuk, kami secara artifisial menyebut fungsi init. Kemudian, saat membuat objek bentuk, init akan selalu dipanggil secara otomatis, yang dapat mensimulasikan konstruktor kami.
Konstruktor dengan parameter
Bagaimana cara membuat konstruktor mengambil parameter? Bahkan, ini sangat sederhana. Cukup tulis parameter yang akan diteruskan ke daftar parameter fungsi, seperti:
Salinan kode adalah sebagai berikut:
bentuk fungsi (kapak, ay)
{
var x = 0;
var y = 0;
var init = function ()
{
// konstruktor
x = kapak;
y = ay;
};
init ();
}
Dengan cara ini, kita dapat membuat objek seperti ini:
Salinan kode adalah sebagai berikut:
var ashape = bentuk baru (0,1);
Sifat statis dan metode statis
Bagaimana cara mendefinisikan sifat dan metode statis dalam JavaScript? Seperti yang ditunjukkan di bawah ini:
Salinan kode adalah sebagai berikut:
bentuk fungsi (kapak, ay)
{
var x = 0;
var y = 0;
var init = function ()
{
// konstruktor
x = kapak;
y = ay;
};
init ();
}
Shape.count = 0; // Tentukan jumlah properti statis, yang termasuk dalam kelas, bukan pada objek.
Shape.staticmethod = function () {}; // Tentukan metode statis
Dengan sifat dan metode statis, kita dapat mengaksesnya dengan nama kelas, sebagai berikut:
Salinan kode adalah sebagai berikut:
waspada (ashape.count);
ashape.staticmethod ();
Catatan: Properti dan metode statis keduanya publik. Sejauh ini, saya tidak tahu cara membuat properti dan metode statis pribadi ~
Akses properti publik dan pribadi kelas ini dalam suatu metode
Mengakses properti Anda sendiri dalam metode kelas. Metode akses JavaScript untuk properti publik dan pribadi berbeda. Silakan lihat kode berikut:
Salinan kode adalah sebagai berikut:
bentuk fungsi (kapak, ay)
{
var x = 0;
var y = 0;
this.gx = 0;
this.gy = 0;
var init = function ()
{
x = ax; // Tambahkan atribut pribadi dan tulis nama variabel secara langsung
y = ay;
this.gx = ax; // Untuk mengakses atribut publik, Anda perlu menambahkan ini sebelum nama variabel.
this.gy = ay;
};
init ();
}
Hal -hal yang perlu diperhatikan tentang ini
Menurut pengalaman saya, ini di kelas tidak selalu menunjukkan objek kita sendiri. Alasan utamanya adalah bahwa JavaScript bukan bahasa OOP, dan fungsi dan kelas didefinisikan oleh fungsi, yang tentu saja akan menyebabkan beberapa masalah kecil.
Situasi di mana pointer ini secara keliru secara tidak benar dalam pemrosesan acara. Kami ingin fungsi anggota dari suatu objek tertentu untuk menanggapi suatu peristiwa. Ketika acara dipicu, sistem akan memanggil fungsi anggota kami. Namun, lulus pointer ini bukan lagi objek kita sendiri. Tentu saja, itu akan menjadi kesalahan untuk memanggil ini dalam fungsi anggota saat ini.
Solusinya adalah menyimpan ini ke properti pribadi di awal kelas definisi. Kemudian, kita dapat menggunakan properti ini alih -alih ini. Saya menggunakan pointer ini dengan metode ini cukup aman dan bebas khawatir ~
Mari kita ubah kode untuk menyelesaikan masalah ini. Dengan membandingkan kode di Bagian 6, Anda pasti akan memahami:
Salinan kode adalah sebagai berikut:
bentuk fungsi (kapak, ay)
{
var _pis = ini; // Simpan ini dan gunakan _ ini alih -alih ini di masa depan sehingga Anda tidak akan bingung dengan ini
var x = 0;
var y = 0;
_this.gx = 0;
_This.gy = 0;
var init = function ()
{
x = ax; // Tambahkan atribut pribadi dan tulis nama variabel secara langsung
y = ay;
_this.gx = ax; // Untuk mengakses atribut publik, Anda perlu menambahkan ini sebelum nama variabel.
_This.gy = ay;
};
init ();
}
Di atas kami berbicara tentang cara mendefinisikan kelas dalam JavaScript, membuat objek kelas, membuat properti dan metode publik dan pribadi, membuat properti dan metode statis, mensimulasikan konstruktor, dan mendiskusikan rawan kesalahan ini.
Itu semua tentang implementasi OOP di JavaScript. Di atas adalah konten yang paling praktis. Secara umum, JavaScript mendefinisikan kelas, dan menggunakan kode di atas untuk membuat objek sudah cukup. Tentu saja, Anda juga dapat menggunakan mootool atau prototipe untuk menentukan kelas dan membuat objek. Saya telah menggunakan kerangka kerja Mootools dan rasanya sangat enak. Ini lebih sempurna untuk simulasi kelas JavaScript dan mendukung warisan kelas. Pembaca yang tertarik dapat mencobanya. Tentu saja, jika Anda menggunakan kerangka kerja, Anda perlu menyertakan file header JS yang relevan di halaman web Anda. Karena itu, saya masih berharap pembaca dapat membuat kelas tanpa kerangka kerja. Dengan cara ini, kode ini lebih efisien, dan Anda juga dapat melihat bahwa tidak merepotkan untuk membuat kelas sederhana ~