Panduan Utama untuk Getters and Setters dalam JavaScript
Getters dan setter adalah fungsi atau metode yang digunakan untuk mendapatkan dan set nilai-nilai variabel. Konsep getter-setter adalah umum dalam pemrograman komputer: hampir semua bahasa pemrograman tingkat tinggi datang dengan satu set sintaks untuk mengimplementasikan getter dan setter, termasuk JavaScipt.
Dalam posting ini, kita akan melihat apa setter setter, dan bagaimana caranya buat dan gunakan dalam JavaScript.
Setter-setter dan enkapsulasi
Gagasan getter dan setter selalu disebutkan dalam hubungannya dengan enkapsulasi. Enkapsulasi bisa dipahami dengan dua cara.
Pertama, itu adalah pengaturan setter data-setter trio untuk mengakses dan memodifikasi data itu. Definisi ini berguna ketika beberapa operasi, seperti validasi, harus dilakukan pada data sebelum menyimpan atau melihatnya, getter dan setter menyediakan rumah yang sempurna untuk itu.
Kedua, ada definisi yang lebih ketat sesuai dengan enkapsulasi yang dilakukan sembunyikan data, untuk membuatnya tidak dapat diakses dari kode lain, kecuali melalui getter dan setter. Dengan begini kita tidak berakhir secara tidak sengaja menimpa data penting dengan beberapa kode lain dalam program.
Buat getter dan setter
1. Dengan metode
Karena getter dan setter adalah pada dasarnya berfungsi yang mengambil / mengubah nilai, ada lebih dari satu cara untuk membuat dan menggunakannya. Cara pertama adalah:
var obj = foo: 'ini adalah nilai foo', getFoo: function () return this.foo; , setFoo: function (val) this.foo = val; console.log (obj.getFoo ()); // "ini adalah nilai foo" obj.setFoo ('hello'); console.log (obj.getFoo ()); // "halo" Ini adalah cara paling sederhana untuk membuat getter dan setter. Ada sebuah properti foo dan ada dua metode: getFoo dan setFoo untuk kembali dan tetapkan nilai ke properti itu.
2. Dengan kata kunci
Lebih “resmi” dan cara kuat untuk membuat getter dan setter adalah dengan menggunakan mendapatkan dan set kata kunci.
Untuk buat pengambil, tempatkan mendapatkan kata kunci di depan deklarasi fungsi yang akan berfungsi sebagai metode pengambil, dan gunakan set kata kunci dengan cara yang sama buat setter. Sintaksnya adalah sebagai berikut:
var obj = fooVal: 'ini adalah nilai foo', get foo () return this.fooVal; , atur foo (val) this.fooVal = val; console.log (obj.foo); // "ini adalah nilai foo" obj.foo = 'hello'; console.log (obj.foo); // "halo"
Perhatikan bahwa data hanya bisa disimpan dengan nama properti (fooVal) itu berbeda dari nama metode pengambil-penyetel (foo) karena properti memegang pengambil-pengambil tidak dapat menyimpan data demikian juga.
Jalan mana yang lebih baik?
Jika Anda memilih untuk membuat getter dan setter dengan kata kunci, Anda dapat menggunakan operator penugasan untuk mengatur data dan operator dot untuk mendapatkan data, dengan cara yang sama Anda akan mengakses / menetapkan nilai properti biasa.
Namun, jika Anda memilih cara pengkodean getter dan setter pertama, Anda harus memanggil metode setter dan pengambil menggunakan sintaks panggilan fungsi karena mereka adalah fungsi khas (tidak ada yang istimewa seperti yang dibuat menggunakan mendapatkan dan set kata kunci).
Juga, ada kemungkinan Anda akan berakhir secara tidak sengaja menugaskan beberapa nilai lainnya ke properti yang memiliki metode pengambil-penyetel dan kehilangan mereka sepenuhnya! Sesuatu yang tidak perlu Anda khawatirkan di metode selanjutnya.
Jadi, Anda bisa melihat mengapa saya mengatakan Teknik kedua lebih kuat.
Timpa pencegahan
Jika karena alasan tertentu Anda lebih suka teknik pertama, buat properti yang memegang metode pengambil-penyetel hanya baca dengan menciptakan mereka menggunakan Object.defineProperties. Properti dibuat melalui Object.defineProperties, Object.defineProperty dan Reflect.defineProperty secara otomatis mengkonfigurasi untuk dapat ditulis: salah yang berarti hanya baca:
/ * Pencegahan overwrite * / var obj = foo: 'ini adalah nilai foo'; Object.defineProperties (obj, 'getFoo': value: function () return this.foo;, 'setFoo': value: function (val) this.foo = val;); obj.getFoo = 66; // getFoo tidak akan ditimpa! console.log (obj.getFoo ()); // "ini adalah nilai foo"
Operasi di dalam getter dan setter
Setelah Anda memperkenalkan getter dan setter, Anda dapat melanjutkan dan melakukan operasi pada data sebelum mengubah atau mengembalikannya.
Dalam kode di bawah ini, pada fungsi pengambil data adalah digabungkan dengan string sebelum dikembalikan, dan dalam fungsi setter validasi apakah nilainya angka atau tidak dilakukan sebelum memperbarui n.
var obj = n: 67, dapatkan id () return 'ID adalah:' + this.n; , atur id (val) if (typeof val === 'number') this.n = val; console.log (obj.id); // "ID-nya adalah: 67" obj.id = 893; console.log (obj.id); // "ID-nya adalah: 893" obj.id = 'hello'; console.log (obj.id); // "ID-nya adalah: 893"
Lindungi data dengan getter dan setter
Sejauh ini, kami membahas penggunaan getter dan setter dalam konteks pertama enkapsulasi. Mari kita beralih ke yang kedua, yaitu bagaimana sembunyikan data dari kode luar dengan bantuan getter dan setter.
Data yang tidak dilindungi
Pengaturan getter dan setter tidak berarti data hanya dapat diakses dan diubah melalui metode tersebut. Dalam contoh berikut, ini berubah secara langsung tanpa menyentuh metode pengambil dan penyetel:
var obj = fooVal: 'ini adalah nilai foo', get foo () return this.fooVal; , atur foo (val) this.fooVal = val; obj.fooVal = 'hello'; console.log (obj.foo); // "halo"
Kami tidak menggunakan penyetel tetapi langsung mengubah data (fooVal). Data yang awalnya kami atur di dalamnya obj sudah pergi sekarang! Untuk mencegah hal ini terjadi (secara tidak sengaja), Anda butuh perlindungan untuk data Anda. Anda dapat menambahkannya dengan membatasi ruang lingkup di mana data Anda tersedia. Anda dapat melakukannya dengan baik memblokir pelingkupan atau fungsi pelingkupan.
1. Memblokir pelingkupan
Salah satu caranya adalah dengan gunakan lingkup blok di mana data akan ditentukan menggunakan membiarkan kata kunci yang membatasi ruang lingkupnya ke blok itu.
SEBUAH ruang lingkup blok dapat dibuat dengan menempatkan kode Anda di dalam sepasang kurung kurawal. Setiap kali Anda membuat ruang lingkup blok pastikan untuk Tinggalkan komentar di atasnya meminta kawat gigi dibiarkan begitu saja, supaya tidak ada menghapus kawat gigi oleh kesalahan berpikir mereka adalah beberapa kawat gigi ekstra berlebihan dalam kode atau tambahkan label ke ruang lingkup blok.
/ * BLOK RUANG LINGKUP, biarkan kawat gigi sendirian! * / let fooVal = 'ini adalah nilai foo'; var obj = get foo () return fooVal; , atur foo (val) fooVal = val fooVal = 'hello'; // tidak akan memengaruhi fooVal di dalam blok console.log (obj.foo); // "ini adalah nilai foo"
Mengubah / membuat fooValdi luar blok tidak akan mempengaruhi itu fooVal disebut di dalam setter getter.
2. Fungsi pelingkupan
Cara yang lebih umum untuk melindungi data dengan pelingkupan adalah dengan menjaga data di dalam suatu fungsi dan mengembalikan suatu objek dengan getter dan setter dari fungsi itu.
function myobj () var fooVal = 'ini adalah nilai foo'; return get foo () return fooVal; , atur foo (val) fooVal = val fooVal = 'hello'; // tidak akan memengaruhi fooVal var obj = myobj () kami yang asli; console.log (obj.foo); // "ini adalah nilai foo"
Objek (dengan foo () pengambil - setter di dalamnya) dikembalikan oleh myobj () fungsi adalah disimpan dalam obj, lalu obj digunakan untuk hubungi pengambil dan penyetel.
3. Perlindungan data tanpa pelingkupan
Ada juga cara lain Anda dapat melindungi data Anda dari ditimpa tanpa membatasi ruang lingkupnya. Logika di baliknya seperti ini: bagaimana Anda bisa mengubah sepotong data jika Anda tidak tahu apa namanya?
Jika data memiliki a tidak begitu mudah direproduksi variabel / nama properti, kemungkinan tidak ada seorang pun (bahkan diri kita sendiri) yang akhirnya akan menimpanya dengan memberikan nilai pada variabel / nama properti itu.
var obj = s89274934764: 'ini adalah nilai foo', get foo () return this.s89274934764; , atur foo (val) this.s89274934764 = val; console.log (obj.foo); // "ini adalah nilai foo"
Lihat, itu salah satu cara menyelesaikan masalah. Meskipun nama yang saya pilih bukan yang benar-benar bagus, Anda juga bisa gunakan nilai atau simbol acak untuk membuat nama properti seperti yang diusulkan oleh Derick Bailey di posting blog ini. Tujuan utamanya adalah untuk merahasiakan data dari kode lain dan biarkan pasangan pengambil-setter untuk mengakses / memperbaruinya.
Kapan Anda harus menggunakan getter dan setter?
Sekarang muncul pertanyaan besar: apakah Anda mulai menetapkan getter dan setter ke semua data Anda sekarang?
Jika kamu menyembunyikan data, lalu ada tidak ada pilihan lain.
Tetapi jika data Anda dilihat oleh kode lain baik-baik saja, apakah Anda masih perlu menggunakan setter getter hanya untuk membundelnya dengan kode yang melakukan beberapa operasi di atasnya? aku akan mengatakan iya nih. Kode bertambah segera. Membuat unit mikro data individu dengan pengambil-penyetelnya sendiri memberi Anda kemerdekaan tertentu untuk mengerjakan data tersebut tanpa mempengaruhi bagian lain dari kode.
