Penjelasan terperinci tentang tiga kaedah mentakrifkan kelas dalam kemahiran Javascript_javascript

Hampir 20 tahun yang lalu, apabila Javascript dilahirkan, ia hanyalah bahasa skrip web yang mudah. Jika anda terlupa mengisi nama pengguna anda, amaran akan muncul.

Kini, ia telah menjadi hampir mahakuasa, dari hujung depan hingga hujung belakang, dengan pelbagai jenis kegunaan yang luar biasa. Pengaturcara menggunakannya untuk menyelesaikan projek yang semakin besar.

Kerumitan kod Javascript juga telah meningkat. Sudah lama menjadi perkara biasa bagi satu halaman web mengandungi 10,000 baris kod Javascript. Pada tahun 2010, seorang jurutera mendedahkan bahawa panjang kod Gmail ialah 443,000 baris!

Menulis dan mengekalkan kod kompleks tersebut memerlukan strategi modular. Pada masa ini, pendekatan arus perdana dalam industri adalah menggunakan "pengaturcaraan berorientasikan objek". Oleh itu, bagaimana untuk melaksanakan pengaturcaraan berorientasikan objek dalam Javascript telah menjadi topik hangat.
Masalahnya ialah sintaks Javascript tidak menyokong "kelas" (kelas), menjadikan kaedah pengaturcaraan berorientasikan objek tradisional tidak dapat digunakan secara langsung. Pengaturcara telah melakukan banyak penyelidikan tentang cara mensimulasikan "kelas" dalam Javascript. Artikel ini meringkaskan tiga cara untuk mentakrifkan "kelas" dalam Javascript, membincangkan ciri-ciri setiap kaedah dan memberi tumpuan kepada kaedah terbaik di mata saya.

============================================

Tiga cara untuk menentukan kelas dalam Javascript

Dalam pengaturcaraan berorientasikan objek, kelas ialah templat untuk objek, yang mentakrifkan sifat dan kaedah yang biasa kepada kumpulan objek yang sama (juga dipanggil "contoh").

Bahasa Javascript tidak menyokong "kelas", tetapi anda boleh menggunakan beberapa penyelesaian untuk mensimulasikan "kelas".

1. Kaedah Pembina

Ini adalah kaedah klasik dan kaedah yang mesti diajar dalam buku teks. Ia menggunakan pembina untuk mensimulasikan "kelas" dan menggunakan kata kunci ini secara dalaman untuk merujuk kepada objek contoh.

Salin kod Kod adalah seperti berikut:

fungsi Cat() {
　　this.name = "大毛";
}

Apabila menjana tika, gunakan kata kunci baharu.

Salin kod Kod adalah seperti berikut:

var cat1 = New Cat();
alert(cat1.name); // Da Mao

Atribut dan kaedah kelas juga boleh ditakrifkan pada objek prototaip pembina.

Salin kod Kod adalah seperti berikut:

Cat.prototype.makeSound = function(){
makluman("meow meow meow");
}

Untuk pengenalan terperinci kepada kaedah ini, sila baca siri artikel yang saya tulis "Pengaturcaraan Berorientasikan Objek Javascript", jadi saya tidak akan menerangkan butiran di sini. Kelemahan utamanya ialah ia agak rumit, menggunakan ini dan prototaip, dan sangat susah payah untuk menulis dan membaca.

2. kaedah Object.create()

Untuk menyelesaikan kekurangan "kaedah pembina" dan menjana objek dengan lebih mudah, edisi kelima ECMAScript, piawaian antarabangsa untuk Javascript (edisi ketiga sedang popular), mencadangkan kaedah baharu Object.create() .
Dengan kaedah ini, "kelas" ialah objek, bukan fungsi.

Salin kod Kod adalah seperti berikut:

var Kucing = {
　　Nama: "大毛",
　　makeSound: function(){ alert("Meow Meow Meow"); };

Kemudian, gunakan terus Object.create() untuk menjana tika tanpa menggunakan baharu.

Salin kod Kod adalah seperti berikut:

var cat1 = Object.create(Cat);
alert(cat1.name); // Da Mao
cat1.makeSound(); // Meow Meow Meow

Pada masa ini, versi terkini semua penyemak imbas utama (termasuk IE9) telah menggunakan kaedah ini. Jika anda menemui penyemak imbas lama, anda boleh menggunakan kod berikut untuk menggunakannya sendiri.

Salin kod Kod adalah seperti berikut:

​jika (!Object.create) {
　　Object.create = fungsi (o) {
　　　 fungsi F() {}
　　　F.prototaip = o;
　　　kembali F();
　　};
}

Kaedah ini lebih mudah daripada "kaedah pembina", tetapi ia tidak boleh melaksanakan sifat persendirian dan kaedah persendirian, ia juga tidak boleh berkongsi data antara objek contoh, dan simulasi "kelas" tidak cukup komprehensif.

3. Kaedah Minimalisme

Pengaturcara Belanda Gabor de Mooij mencadangkan kaedah baharu yang lebih baik daripada Object.create(), yang dipanggilnya sebagai "pendekatan minimalis". Ini juga kaedah yang saya cadangkan.

3.1 Pembungkusan

Kaedah ini tidak menggunakan ini dan prototaip, dan kod ini sangat mudah untuk digunakan Ini mungkin sebab ia dipanggil "kaedah minimalis".

Pertama sekali, ia juga menggunakan objek untuk mensimulasikan "kelas". Dalam kelas ini, tentukan pembina createNew() untuk menjana kejadian.

Salin kod Kod adalah seperti berikut:

var Kucing = {
​​createNew: function(){
　　　 // beberapa kod di sini
　　}
};

Kemudian, dalam createNew(), tentukan objek contoh dan gunakan objek contoh ini sebagai nilai pulangan.

Salin kod Kod adalah seperti berikut:

var Kucing = {
​​createNew: function(){
　　 var cat = {};
　　　cat.name = "大毛";
　　　cat.makeSound = function(){ alert("Meow Meow Meow");
　　　kembali kucing;
　　}
};

Apabila menggunakannya, panggil kaedah createNew() untuk mendapatkan objek contoh.

Salin kod Kod adalah seperti berikut:

var cat1 = Cat.createNew();
cat1.makeSound(); // Meow Meow Meow

Kelebihan kaedah ini ialah ia mudah difahami, mempunyai struktur yang jelas dan elegan serta mematuhi konstruk "pengaturcaraan berorientasikan objek" tradisional, jadi ciri berikut boleh digunakan dengan mudah.

3.2 Warisan

Biar satu kelas mewarisi kelas lain, yang sangat mudah untuk dilaksanakan. Cuma panggil kaedah createNew() yang terakhir dalam kaedah createNew() yang pertama.

Tentukan dahulu kelas Haiwan.

Salin kod Kod adalah seperti berikut:

var Haiwan = {
​​createNew: function(){
　　 var haiwan = {};
animal.sleep = function(){ alert("Sleep in");
　　　binatang balik;
　　}
};

Kemudian, dalam kaedah createNew() Cat, panggil kaedah createNew() Animal.

Salin kod Kod adalah seperti berikut:

var Cat = {
​​createNew: function(){
　　 var cat = Animal.createNew();
　　　cat.name = "大毛";
　　　cat.makeSound = function(){ alert("Meow Meow Meow");
　　　kembali kucing;
　　}
};

Contoh Kucing yang diperoleh dengan cara ini akan mewarisi kedua-dua kelas Kucing dan kelas Haiwan.

Salin kod Kod adalah seperti berikut:

var cat1 = Cat.createNew();
cat1.sleep(); // Tidur dalam

3.3 Harta persendirian dan kaedah persendirian

Dalam kaedah createNew(), semua kaedah dan sifat yang tidak ditakrifkan pada objek kucing adalah peribadi.

Salin kod Kod adalah seperti berikut:

var Cat = {
​​createNew: function(){
　　 var cat = {};
　　 var sound = "meow meow meow";
　　　cat.makeSound = function(){ alert(bunyi);
　　　kembali kucing;
　　}
};

Bunyi pembolehubah dalaman dalam contoh di atas tidak boleh dibaca secara luaran dan hanya boleh dibaca melalui kaedah awam makeSound() cat.

Salin kod Kod adalah seperti berikut:

var cat1 = Cat.createNew();
alert(cat1.sound); // undefined

3.4 Perkongsian Data

Kadangkala, kita memerlukan semua objek contoh untuk dapat membaca dan menulis data dalaman yang sama. Pada masa ini, hanya merangkum data dalaman di dalam objek kelas dan di luar kaedah createNew().

Salin kod Kod adalah seperti berikut:

var Kucing = {
Bunyi: "meow meow meow",
​​createNew: function(){
　　 var cat = {};
　　　cat.makeSound = function(){ alert(Cat.sound };
　　　cat.changeSound = fungsi(x){ Cat.sound = x };
　　　kembali kucing;
　　}
};

Kemudian, hasilkan dua objek contoh:

Salin kod Kod adalah seperti berikut:

var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.makeSound(); // Meow Meow Meow

Pada masa ini, jika satu objek contoh mengubah suai data yang dikongsi, objek contoh yang lain juga akan terjejas.

Salin kod Kod adalah seperti berikut:

cat2.changeSound("La La La");
cat1.makeSound(); // La La La

(Tamat)