Pengenalan kepada Kelas dan Objek dalam JavaScript

Sekarang kita akan mempelajari OOP dalam JavaScript. Mari kita lihat contoh dari kehidupan sebenar, kemudian aplikasikannya kepada JavaScript.

Sebagai contoh, mari kita ambil sebuah kereta. Ia mempunyai roda, warna, jenis badan, isipadu enjin dan sebagainya. Selain itu, pemandu boleh memberinya arahan: bergerak, berhenti, belok kanan, kiri dan sebagainya.

Kita boleh katakan bahawa wujud suatu kelas kereta, yang mempunyai sifat-sifat umum (semua mempunyai roda dan semua boleh diberi arahan).

Kereta spesifik yang berada di jalan raya - adalah wakil kelas ini, atau, dengan kata lain, objek bagi kelas ini. Semua objek kelas ini mempunyai sifat: bilangan roda, warna, jenis badan dan kaedah: bergerak, berhenti, belok kanan, kiri.

Dengan kata lain, kelas itu sendiri adalah pelan, yang digunakan di kilang untuk membuat kereta. Objek adalah kereta itu sendiri, yang dibuat berdasarkan pelan tersebut.

Dalam JavaScript, kelas dicipta menggunakan kata kunci class, diikuti dengan nama kelas tersebut. Mari kita buat kelas Car:

class Car {
	// kod di sini, iaitu pelan JavaScript untuk kereta
}

Sekarang mari kita tentukan dalam pelan kita, bahawa mana-mana kereta, yang dicipta berdasarkan pelan ini, akan mempunyai sifat untuk warna dan sifat untuk kuantiti bahan bakar.

Untuk ini, tuliskan sifat color dan sifat fuel di dalam kelas:

class Car {
	color; // warna kereta
	fuel;  // kuantiti bahan bakar
}

Sekarang mari kita buat kaedah untuk kelas kita. Dalam JavaScript, kaedah adalah serupa dengan fungsi biasa, hanya diisytiharkan tanpa kata kunci function.

Seperti yang disebut di atas, kereta kita boleh bergerak, boleh membelok, boleh berhenti. Mari buat kaedah yang sepadan dalam kelas kita:

class Car {
	color; // warna kereta
	fuel;  // kuantiti bahan bakar
	
	// Arahan bergerak:
	go() {
		// beberapa kod JavaScript
	}
	
	// Arahan membelok:
	turn() {
		// beberapa kod JavaScript
	}
	
	// Arahan berhenti:
	stop() {
		// beberapa kod JavaScript
	}
}

Kita telah membuat pelan untuk kereta kita. Sekarang perlu pergi ke kilang dan membuat objek kelas ini (iaitu kereta spesifik).

Dalam JavaScript, ini dilakukan dengan kata kunci new, selepas itu ditulis nama kelas:

new Car; // arahkan kilang untuk membuat kereta

Walau bagaimanapun, jika hanya mencipta objek kelas - ia tidak akan membawa kepada apa-apa (ini sama seperti, contohnya, mengisytiharkan array dan tidak menyimpannya di mana-mana). Kita perlukan pembolehubah untuk menyimpan objek ini.

Katakan pembolehubah ini dipanggil myCar - mari kita simpan objek yang kita cipta ke dalamnya:

let myCar = new Car;

Selepas mencipta kereta, kita boleh mengakses sifat-sifatnya. Akses kepada mereka dilakukan melalui titik. Mari kita tetapkan sifat objek kita:

let myCar = new Car; // arahkan kilang untuk membuat kereta

myCar.color = 'red'; // cat dengan warna merah
myCar.fuel = 50;     // isi bahan bakar

Selesai, kereta kita telah dicipta, dicat dan diisi bahan bakar. Sekarang kita boleh memberinya arahan melalui kaedah kereta ini.

Akses kepada kaedah juga dilakukan melalui titik, tetapi, berbeza dengan sifat, selepas nama kaedah, kurungan bulat mesti ditulis. Mari kita beri arahan kepada objek kita:

myCar.go();
myCar.turn();
myCar.stop();