Pengenalan JavaScript Berorientasikan Objek

Oleh sebab tertentu, ada kecenderungan dalam industri TI untuk berpandangan bahawa jika anda tidak menggunakan kaedah Object Oriented Programming (OOP), maka anda bukan "programmer sebenar". Itu sebenarnya adalah sikap yang agak konyol untuk diambil, kerana terdapat banyak keadaan di mana OOP bukanlah cara yang paling tepat untuk mengatasi masalah. Ini adalah kekurangan dalam bahasa seperti Java yang memaksa OOP ke dalam setiap tugas pengaturcaraan sama ada anda memerlukannya atau tidak.

JavaScript (yang hampir tidak ada kaitan dengan Java) adalah bahasa yang berbeza. Ia memberikan kebebasan dan fleksibiliti yang hampir tidak terhad, dengan kerumitan yang dikurangkan di kebanyakan kawasan. Sayangnya ada beberapa perkara yang lebih rumit dalam JavaScript kerana kebebasan yang cuba diberikannya kepada anda.

Mengapa OOP tidak selalu sesuai untuk setiap tugas adalah bahawa ia menambahkan lebih banyak kerumitan pada program dan selalunya akan melibatkan langkah-langkah tambahan, lebih banyak kerja, dan lebih banyak perkara yang berpotensi menjadi salah jika anda tidak memberi perhatian. Tetapi OOP juga dapat memberikan banyak kelebihan jika digunakan dalam situasi yang sesuai.

Kelebihan yang paling penting yang ditawarkan OOP kepada kami adalah replikasi, yang bermaksud kami dapat mengklon objek dan menggunakannya kembali berkali-kali dalam program yang sama, kapan pun kami memerlukannya. Kerumitan yang tersirat, dan fakta bahawa JavaScript tidak dibina sejak awal untuk menjadi bahasa OOP (dengan itu menambahkan lebih banyak kerumitan), adalah salah satu sebab mengapa OOP mewakili sempadan terakhir bagi banyak pengaturcara JavaScript yang baru sebelum mereka memperoleh sayap.

OK, sukar, tetapi tidak sukar

Sebelum anda mula memikirkan konsep JavaScript Berorientasi Objek terlalu banyak untuk anda, anggap anda sudah menggunakan OOP walaupun anda tidak menyedarinya. Orang puristik mungkin tidak setuju, tetapi saya rasa wajar untuk mengatakan bahawa jika anda sudah menggunakan HTML dan CSS, dan kadang-kadang anda menggunakan JavaScript untuk memanipulasi elemen HTML di laman web, maka anda sudah menjadi pengaturcara OOP yang berpengalaman.

Setiap elemen HTML di laman web sebenarnya adalah objek. Semuanya sesuai dengan hierarki Model Objek Dokumen (DOM), yang bermaksud mereka mempunyai kelas yang ditentukan, sifat yang ditentukan, dan warisan yang ditentukan. Kecuali anda menetapkan nilai harta secara eksplisit, semua objek akan menggunakan nilai harta lalai mereka. Semasa anda menulis arahan CSS, apa yang sebenarnya berlaku ialah anda menggunakan kaedah untuk mengubah satu atau lebih nilai harta tanah kelas.

Setiap kali anda menulis arahan HTML, anda membuat contoh kelas yang baru. Dan seperti yang anda pasti sudah tahu, anda boleh membuat kelas anda sendiri berdasarkan kelas yang telah ditentukan pada setiap jenis objek (contohnya, anda boleh membuat yang mungkin mempunyai sifat yang sangat berbeza dari kelas asalnya ia dihasilkan). Anda boleh menentukan bahawa objek H2 dengan kelas ini akan mempunyai warna dan ukuran yang berbeza dari objek H2 biasa. Dan anda boleh menggunakan semula objek yang diubah sekerap yang anda mahukan. Objek H2 yang asal adalah templat objek dan kelas baru anda berasal dari kelas templat.

Jadi ya, OOP tidak mudah, tetapi anda mungkin sudah melakukannya, jadi apa yang perlu ditakutkan?

Tahap seterusnya: membuat objek anda sendiri

Bekerja dengan objek DOM terbina dalam terlalu mudah. Anda memerlukan lebih banyak cabaran. Membuat objek anda sendiri adalah langkah pertama ke tahap OOP yang lebih tinggi.

Dengan mukadimah itu, anda mungkin menjangkakan bahawa membuat objek adalah masalah besar yang memerlukan banyak kod yang kompleks. Sudah tentu jika anda pernah mencuba membuat kelas objek tersuai dalam bahasa seperti Java atau C #, anda pasti akan membuat pembina kelas yang panjang. Inilah cara kami melakukannya dalam JavaScript:

Baik itu anti-iklim, ya? Apa yang kami lakukan di sana adalah kami membuat objek kosong kelas "myObject". Jelas objek kosong membosankan, kerana mereka tidak melakukan apa-apa kecuali mengambil ruang dalam ingatan. Untuk menjadi berguna, objek perlu mempunyai isi. Mari pertimbangkan kelas yang lebih praktikal:

Di atas menunjukkan objek yang disebut objAlien yang mempunyai semua sifat yang berbeza (pemboleh ubah biasa) dan kaedah (fungsi) yang ditentukan di dalamnya. Oleh itu, secara teknikal, Anda juga dapat menganggap objek sebagai array pemboleh ubah dan / atau fungsi.

Menggunakan objek dalam program

Setelah objek ditentukan, anda boleh merujuknya dalam program anda. Dalam permainan, anda mempunyai banyak makhluk asing, tetapi menulis kod untuk setiap permainandividual alien akan menjadikan program ini terlalu membebankan. Cara yang lebih baik adalah dengan membuat array untuk menyimpan semua alien, dan kemudian menggunakan kelas alien untuk membuat alien baru. Sebagai contoh:

Kod ini akan menjadikan 20 alien hijau berlendir dengan jarak 110 piksel (jadi kita dapat meneka dari ini bahawa gambar yang digunakan untuk menyimpan makhluk asing itu selebar 100px, dan terdapat margin 10px antara setiap makhluk asing). Sudah tentu, ini bukan cara yang baik untuk melaksanakan permainan dalam JavaScript kerana ada teknik yang lebih baik, tetapi artikel ini bukan tentang membuat permainan, ini tentang membuat dan menggunakan objek.

Objek tidak selalu harus ditambahkan menggunakan kata kunci baru. Berikut adalah contoh kod dari projek di mana objek menetapkan sifatnya sendiri menggunakan nilai objek lain:

 

Di sini kita dapat melihat cara penggunaan objek yang sangat kompleks, di mana nilai-nilai objek diteruskan ke sifat attr objek R. Sekiranya anda biasa dengan JSON (Notasi Objek JavaScript), maka anda mungkin menganggap bahagian pertama contohnya menggunakan JSON dengan kesalahan sintaks, tetapi sebenarnya ia bukan kod JSON.

Alasan nama pembolehubah, kecuali isian, disebut adalah untuk mengelakkan JavaScript memproses tolak operator dalam nama pemboleh ubah (yang merupakan sifat CSS). Sejak program itu ditulis, perubahan dibuat untuk membolehkan sifat CSS seperti font-family ditulis sebagai fontFamily, tetapi kod warisan ini belum disesuaikan untuk memanfaatkan perubahan itu.

Mengapa menggunakan objek?

Objek adalah yang terbaik untuk situasi di mana anda perlu membuat beberapa contoh sesuatu, atau di mana anda memerlukan cara mudah untuk mengumpulkan data yang berkaitan dengan sesuatu jenis tertentu. Dalam contoh permainan di atas, kita dapat melihat bahawa mungkin untuk membuat banyak salinan objek objAlien, tetapi kita juga dapat memanipulasi sifat objek setelah kita menambahkannya, yang dalam contohnya adalah harta x.

Bilakah tidak menggunakan objek?

Anda tidak boleh menggunakan objek jika projek anda tidak memerlukannya. Tidak ada gunanya menyulitkan program anda tanpa alasan yang baik. Sekiranya program anda dirancang untuk melakukan sesuatu yang mudah, teknik OOP tidak semestinya diperlukan.

Mengapa Objek JavaScript lebih mudah dibuat daripada Objek dalam bahasa OOP lain

Dalam bahasa seperti Java dan bahkan Visual Basic, membuat objek adalah tugas besar. Ini kerana anda perlu membuat templat kelas (atau menggunakan templat yang ada) untuk mendasarkan objek anda sebelum anda dapat menentukannya. Itu tidak diperlukan dalam JavaScript kerana kami diberi teknik pembinaan yang mudah (nama objek = {…}). Objek dalam JavaScript juga boleh merangkumi semua jenis pemboleh ubah, termasuk tatasusunan, dan pernyataan jenis tidak ada. Nilai pulangan adalah pilihan.

Sama ada perkara yang baik atau yang buruk adalah perkara yang perlu diperdebatkan, tetapi program JavaScript juga tidak akan gagal jika anda berusaha memanggil nilai harta tanah yang tidak ada. Contohnya, jika anda menaip:

Anda benar-benar mengharapkan baris kod di atas meletakkan 5 di dalam elemen dengan ID "par1". Tetapi jika anda menaip sesuatu seperti:

Anda tidak akan melihat rasa kegemaran makhluk asing, anda akan melihat penampilan yang tidak ditentukan di par1. Bagi kebanyakan aplikasi, ini tidak akan menjadi masalah, tetapi bagi sebilangan besar aplikasi. Dalam kes tersebut, anda perlu bersedia untuk itu dan menulis kod yang menguji nilai yang sah sebelum bergantung padanya.

Salah satu cara untuk menguji ini adalah:

Tanggapan itu agak melampau, tetapi anda mendapat idea. Perhatikan kami menguji “! ==” dan bukan “! =”, Yang merupakan perkara mudah untuk dibingungkan. Inilah kaedah lain untuk melakukannya:

Perkara yang sama, cara yang berbeza. Anda juga boleh menambahkan sifat ke objek setelah membuatnya. Anda boleh melakukannya dengan cara ini:

Anda juga boleh mengubah nilai-nilai sifat dengan cara yang sama. Untuk membuang sifat favoritFlavor dari objek, kami perlu melakukan ini:

Terdapat sangat sedikit keadaan di mana perkara ini diperlukan.

Menjadikan Objek lebih boleh digunakan semula

Anda mungkin menyedari kemungkinan masalah terbesar dengan membuat objek, iaitu jika anda ingin mempunyai pelbagai jenis makhluk asing, anda perlu menjadikan sifat objAlien.type sebagai array. Tetapi ada cara lain, yang lebih baik.

Teknik ini disebut prototaip objek, yang bermaksud anda membuat templat asas untuk objek tetapi tidak mengisi semua perinciannya. Di sini juga, kita semakin hampir dengan cara sebenar untuk menambahkan objek ke dalam permainan.

Anda dapat melihat sekarang kaedah objek ditentukan, tetapi kebanyakan sifat tidak ditentukan. Selain daripada menjadi pemboleh ubah sederhana, deklarasi objek sekarang dibungkus dalam fungsi, dan itu kerana ia sebenarnya bukan objek. Ini hanya prototaip objek, yang menerangkan bagaimana membuat objek tanpa benar-benar membuatnya.

Jadi sekarang untuk benar-benar membuat objek berdasarkan prototaip kita dapat melakukan ini:

Ini sama dengan melakukan ini:

Kerana kami membuat prototaip, kami tidak perlu melakukannya dengan cara kedua, dan menyatakan pelbagai jenis makhluk asing dengan kelajuan yang berbeza, jumlah senjata, senjata, dan posisi permulaan jauh lebih mudah.

Apa selepas ini?

Artikel ini adalah pengenalan kepada Objektif Berorientasi JavaScript, yang diharapkan dapat mengaburkan topik dan membuatnya kelihatan kurang menakutkan. Kami merangkumi semua asas termasuk cara membuat objek sederhana, cara menambah, membuang, dan mengubah sifat, cara menyatakan dan menggunakan kaedah, dan bagaimana menggunakan prototaip untuk menjadikan objek lebih mudah digunakan kembali. Tetapi masih ada banyak lagi yang perlu dipelajari, jadi sekarang anda mempunyai titik permulaan yang baik, anda dapat mendekati mana-mana tutorial atau pelajaran mengenai OOP yang lebih maju dengan yakin.

Bogdan Rancea

Bogdan adalah ahli pengasas Inspired Mag, yang telah mengumpulkan hampir 6 tahun pengalaman dalam tempoh ini. Pada masa lapang dia suka belajar muzik klasik dan mendalami seni visual. Dia juga taksub dengan fixies juga. Dia sudah memiliki 5 orang.