Computer Science
6. Classes & Prototypes (OOP)
- Sumber: Closure, Async, and OOP: The Hard Parts of JavaScript | Frontend Masters
- Jumlah video: 14
- Jumlah kartu anki: 43
Chapter keenam di course Will Sentance, membahas Classes dan Prototypes pada Javascript untuk implementasi Object Oriented Programming (OOP). Proses distilasi akan langsung per video karena pendekatannya sedikit berubah — jadi per 3 video alih-alih satu chapter secara penuh, sehingga pendahuluan distilasi tidak bisa dilakukan dengan baik.
Berikut hasil distilasi dari tiap video pada Chapter ini:
Object-Oriented Javascript
Video pembuka untuk chapter ini, berisi pengenalan singkat ke konten dalam chapter ini. Menyebutkan beberapa keyword seperti new, class, [[Prototype]], prototype chain, dll. Menjelaskan secara ringkas inti dari software development — yang mana hanya save data dan run code, keuntungan menggunakan pendekatan OOP, dll.
Create Javascript Object
Will Sentance mengenalkan 3 cara untuk melakukan inisiasi struktur data object yang dapat membantu kita mengimplementasikan OOP. Dijelaskan di awal video bahwa paradigma OOP sangat membantu untuk melakukan organisasi kode, dimana data dan fungsi/method terkait akan ditempatkan dalam ruang kapsul yang sama.
Generate Object Using a Function
Video ini mengenalkan cara yang lebih efisien dan ramah prinsip DRY dalam membuat sebuah object, yaitu dengan menggunakan fungsi dimana fungsi tersebut akan mengembalikan object. Namun ada masalah pada pendekatan ini, yaitu duplikasi fungsi dengan mekanisme yang sama pada setiap object, masalah ini akan jadi pembuka untuk video selanjutnya.
Prototype Chain
Pengenalan ke Prototype Chain yang dapat membantu kita memisahkan kumpulan method dari objectnya dan dapat menjadi solusi untuk masalah memori yang dijelaskan pada video sebelumnya. Prototype Chain dapat dibuat dengan Object.create(storedFunctions).
Prototypes & Object.create()
Lanjutan dari video sebelumnya yang membahas Prototype Chain, pada video ini Will Sentance melakukan demonstrasi terkait bagaimana cara kerja Prototype Chain secara rinci di papan tulis. Dia juga mengenalkan nama dari properti tersembunyi yang menjadi ikatan antar object, yaitu [[Prototype]].
hasOwnProperty & Object Prototype
Pada video ini, kita dikenalkan lebih jauh terkait mekanisme Prototype Chain pada object; titik akhir chain-nya, asal built-in method yang dibawa object, dan bagaimana struktur dari built-in object yang menjadi muara dari prototype chain. Kita juga dikenalkan dengan method hasOwnProperty() yang bisa dipakai pada object untuk mengecek apakah object tersebut punya properti tertetu.
Arrow Functions & this Keyword
Tampaknya ada masalah ketika kita berusaha menggunakan this keyword di dalam fungsi yang dideklarasikan di dalam method, dimana itu malah akan merujuk ke window object, itu karena pemanggilan fungsi di dalam method tersebut tidak menggunakan dot notation. Video ini menunjukkan bahwa penggunaan Arrow Function dapat menjadi solusi untuk itu, jujur saya belum paham ‘kenapa’-nya, akan saya ulas lagi lain kali.
The new Keyword
Video ini mengenalkan ke keyword new yang dapat membantu pekerjaan dalam membuat fungsi yang menghasilkan object jadi lebih ringkas, tapi tampaknya ada bagian yang perlu disesuaikan; seperti penggunaan keyword this untuk merujuk ke object yang sedang dibuat. Will Sentance juga mengenalkan default property yang akan selalu ada pada function (untuk sisi Object mereka) di Javascript, yaitu prototype, dan ini berbeda dengan [[Prototype]] yang ada untuk setiap Object. Dia juga memberi tahu bahwa sebenarnya function pada Javascript punya dua identitas; fungsi dan object. Ketika kita memanggilnya dengan parenthesis () maka kita sedang berinteraksi dengan bagian function, tapi jika kita menggunakan dot notation padanya maka kita sedang berinteraksi dengan bagian object.
Refactor userCreator with new Keyword
Pada video ini Will Sentance mendemonstrasikan bagaimana kode sebelumnya yang sudah direfaktor dengan keyword new bekerja. Tampak memang penggunaan keyword new dapat meningkatkan efisiensi pekerjaan dengan mengotomatisasi sebagian pekerjaannya; 3 task inti dari pembuatan constructor object. Properti prototype yang diadakan secara otomatis pada sebuah function menjadi wadah dari method-method yang mau diwariskan nantinya, ini membuat kita tidak perlu melakukannya seecara manual seperti sebelumnya.
The class Keyword
Will Sentance mengenalkan keyword class dan menunjukkan bagaimana keyword tersebut dapat membuat pekerjaan untuk membuat constractor function dan menambahkan method jadi lebih rapih secara sintaksis. Keyword ini ditambahkan pada ES2015 dan membuat Javascript dapat memberikan mekanisme OOP dengan class seperti bahasa yang secara native mendukung OOP, walau ini semua hanya rekayasa dari sifat function pada Javascript yaitu first-class object.
Public Static Fields
Pengenalan ke keyword static yang bisa dipakai di dalam class untuk membuat properti yang terkait ke constructor functionnya alih-alih ke instance object yang dihasilkan. Keyword ini membuat kita dapat mengakses fungsionalitas properti tersebut dengan dot notation langsung dari contructor function-nya. Di akhir video, Will Sentance menunjukkan studi kasus untuk video berikutnya dengan yang akan membahas default value.
Public Instance Fields
Pengenalan ke konsep public instance field dimana properti tersebut akan diwariskan/ditempelkan ke setiap instance yang dibuat dengan nilai bawaan dari classnya. Sintaksnya cukup sederhana. Cocok untuk membuat sebuah default value untuk instance tersebut, dan manipulasi pada satu instance tidak akan mempengaruhi instance lain. Properti ini disimpan di dalam hidden properti [[fields]] pada class-nya.
Private Instance Fields
Pengenalan ke konsep private instance field dimana properti tersebut akan bersifat tertutup untuk setiap instance yang dihasilkan dari classnya, ini memungkinkan kita untuk mencegah manipulasi nilai dari field tersebut secara eksternal. Sintaksnya sederhana, hanya menggunakan hashtag # di depan nama propertinya.
Private Static Field
Pengenalan ke konsep Private Static Field dimana sebuah field dari class tidak akan diwariskan ke instance object yang dihasilkan dan hanya dapat diakses dari dalam class-nya (termasuk method yang tersimpan di object prototype).