Saya telah mencoba untuk mendapatkan kepalaku tentang getter dan setter dan itu tidak meresap. Saya telah membaca JavaScript Getters and Setters dan Mendefinisikan Getters and Setters dan tidak mendapatkannya.
Dapatkah seseorang dengan jelas menyatakan:
- Apa yang harus dilakukan oleh seorang pengambil dan penentu, dan
- Berikan beberapa contoh SANGAT sederhana?
javascript
setter
getter
Alexander Abakumov
sumber
sumber
a = setValue(5);
dengana = 5;
dan dengansetValue()
demikian akan dipanggil di bawah tenda untuk melakukan apa pun yang Anda suka.Jawaban:
Selain jawaban @ millimoose , setter juga dapat digunakan untuk memperbarui nilai lainnya.
Sekarang, Anda dapat mengatur
fullName
,first
danlast
akan diperbarui dan sebaliknya.sumber
Object.defineProperty
fungsi yang lebih baru yang dapat menentukan getter dan setter.this.__defineGetter__
atauObject.defineProperty
fungsi yang lebih baru .Name.prototype.constructor
? Sepertinya alternatif yang buruk untuk Jawaban millimoose .Getters dan Setter dalam JavaScript
Gambaran
Getters dan setter dalam JavaScript digunakan untuk mendefinisikan properti yang dihitung , atau accessor . Properti yang dihitung adalah properti yang menggunakan fungsi untuk mendapatkan atau menetapkan nilai objek. Teori dasarnya adalah melakukan sesuatu seperti ini:
Ini berguna untuk secara otomatis melakukan hal-hal di belakang layar ketika properti diakses, seperti menjaga angka dalam jangkauan, memformat ulang string, memicu peristiwa nilai-telah-berubah, memperbarui data relasional, menyediakan akses ke properti pribadi, dan banyak lagi.
Contoh di bawah ini menunjukkan sintaks dasar, meskipun mereka hanya mendapatkan dan menetapkan nilai objek internal tanpa melakukan sesuatu yang istimewa. Dalam kasus dunia nyata Anda akan memodifikasi input dan / atau nilai output sesuai dengan kebutuhan Anda, seperti yang disebutkan di atas.
dapatkan / set Kata Kunci
Dukungan ECMAScript 5
get
danset
kata kunci untuk mendefinisikan properti yang dihitung. Mereka bekerja dengan semua browser modern kecuali IE 8 dan di bawahnya.Setter dan Setter Kustom
get
danset
bukan kata-kata yang dilindungi undang-undang, sehingga kata-kata tersebut kelebihan beban untuk membuat fungsi properti terkomputer-sendiri milik browser Anda sendiri. Ini akan berfungsi di browser apa pun.Atau untuk pendekatan yang lebih ringkas, satu fungsi dapat digunakan.
Hindari melakukan sesuatu seperti ini, yang dapat menyebabkan kode mengasapi.
Untuk contoh di atas, nama properti internal diabstraksi dengan garis bawah untuk mencegah pengguna dari hanya melakukan
foo.bar
vs.foo.get( 'bar' )
dan mendapatkan nilai "mentah". Anda dapat menggunakan kode kondisional untuk melakukan berbagai hal tergantung pada nama properti yang sedang diakses (melaluiname
parameter).Object.defineProperty ()
Menggunakan
Object.defineProperty()
adalah cara lain untuk menambahkan getter dan setter, dan dapat digunakan pada objek setelah ditetapkan. Ini juga dapat digunakan untuk mengatur perilaku yang dapat dikonfigurasi dan enumerable. Sintaks ini juga berfungsi dengan IE 8, tetapi sayangnya hanya pada objek DOM.__defineGetter __ ()
Akhirnya,
__defineGetter__()
adalah pilihan lain. Ini sudah usang, tetapi masih banyak digunakan di web dan karenanya tidak akan hilang dalam waktu dekat. Ini bekerja di semua browser kecuali IE 10 dan di bawah. Meskipun opsi lain juga berfungsi dengan baik pada non-IE, jadi yang satu ini tidak begitu berguna.Juga patut dicatat adalah bahwa dalam contoh-contoh terakhir, nama-nama internal harus berbeda dari nama pengakses untuk menghindari rekursi (yaitu,
foo.bar
panggilanfoo.get(bar)
memanggilfoo.bar
panggilanfoo.get(bar)
...).Lihat juga
MDN dapatkan , atur , Object.defineProperty () , __defineGetter __ () , __defineSetter __ () Dukungan Getter
MSDN IE8
sumber
this[ '_' + name ] = value;
bisathis[ '_' + name ] = arguments[1];
dan tidak perlu menentukanvalue
arg.var foo = { bar : 123, get bar(){ return bar; }, set bar( value ){ this.bar = value; } }; foo.bar = 456;
Meningkatkan pengecualian: Uncaught RangeError: Ukuran stack panggilan maksimum melebihi di Object.set bar [sebagai bar] (<anonymous>: 4: 32) di Object.set bar [as bar] (<anonymous>: 4: 32 ) di bar Object.set [sebagai bar] (<anonymous>: 4: 32) di bar Object.set [sebagai bar] (<anonymous>: 4: 32) di bar Object.set [[bar]] (<anonymous> : 4: 32) di bar Object.set [sebagai bar] (<anonymous>: 4: 32)bar: 123
danthis.bar = value
lain - lain ubahlah ini menjadi_bar
misalnya. Lihat: hongkiat.com/blog/getters-setters-javascript_foo
ataumFoo
. Jika sama dengan pengambil / penyetel, itu akan menyebabkan loop tak terbatas karena rekursi dan kemudian Stack Overflow ™ ;-) karena ketika Anda mengatakan a = b, ia memanggil a.get (b) yang dengan sendirinya memanggil a = b , yang memanggil a.get (b), ...Anda akan menggunakannya misalnya untuk mengimplementasikan properti yang dihitung.
Sebagai contoh:
(CodePen)
sumber
Object.defineProperties
.Maaf membangkitkan pertanyaan lama, tapi saya pikir saya mungkin berkontribusi beberapa contoh yang sangat mendasar dan penjelasan for-dummies. Tidak ada jawaban lain yang diposting sejauh ini yang mengilustrasikan sintaksis seperti contoh pertama panduan MDN , yang kira-kira sama mendasarnya dengan yang didapat.
Getter:
... akan masuk
John Smith
, tentu saja. Seorang rajin berperilaku seperti properti objek variabel, tetapi menawarkan fleksibilitas fungsi untuk menghitung nilai yang dikembalikan dengan cepat. Ini pada dasarnya cara yang bagus untuk membuat fungsi yang tidak memerlukan () saat memanggil.Setter:
... akan masuk
New York
ke konsol. Seperti getter, setter dipanggil dengan sintaksis yang sama dengan menetapkan nilai properti objek, tetapi cara mewah lain untuk memanggil fungsi tanpa ().Lihat jsfiddle ini untuk contoh yang lebih menyeluruh, mungkin lebih praktis. Melewati nilai ke setter objek memicu penciptaan atau populasi item objek lainnya. Secara khusus, dalam contoh jsfiddle, melewatkan array angka meminta setter untuk menghitung rata-rata, median, mode, dan rentang; lalu setel properti objek untuk setiap hasil.
sumber
maps.roll
sebagai properti daripadamaps.roll()
mengembalikan nilai. Itu hanya preferensi.maps.roll()
Getters dan setter benar-benar hanya masuk akal ketika Anda memiliki properti pribadi kelas. Karena Javascript tidak benar-benar memiliki properti kelas privat seperti yang biasa Anda pikirkan dari Bahasa Berorientasi Objek, mungkin sulit untuk dipahami. Ini adalah salah satu contoh objek penghitung pribadi. Yang menyenangkan tentang objek ini adalah bahwa variabel "jumlah" internal tidak dapat diakses dari luar objek.
Jika Anda masih bingung, lihat artikel Crockford tentang Anggota Pribadi dalam Javascript .
sumber
var baz = foo.bar
untuk memiliki set lengkap perilaku tersembunyi di baliknya. Saya akan berharap bahwa darifoo.getBar()
, namun.Saya pikir artikel pertama yang Anda tautkan menyatakannya dengan cukup jelas:
Tujuannya di sini adalah untuk merangkum dan mengabstraksi bidang dengan hanya mengizinkan akses ke sana melalui suatu
get()
atauset()
metode. Dengan cara ini, Anda dapat menyimpan bidang / data secara internal dengan cara apa pun yang Anda inginkan, tetapi komponen luar hanya jauh dari antarmuka yang Anda terbitkan. Ini memungkinkan Anda untuk membuat perubahan internal tanpa mengubah antarmuka eksternal, untuk melakukan validasi atau pengecekan kesalahan dalamset()
metode, dll.sumber
Meskipun sering kita terbiasa melihat objek dengan properti publik tanpa kontrol akses, JavaScript memungkinkan kita untuk menggambarkan properti dengan akurat. Bahkan, kita bisa menggunakan deskriptor untuk mengontrol bagaimana properti dapat diakses dan logika mana yang bisa kita terapkan padanya. Perhatikan contoh berikut:
Hasil akhir:
sumber
Yang sangat membingungkan tentang itu ... getter adalah fungsi yang dipanggil saat Anda mendapatkan properti, setter, saat Anda mengaturnya. Misalnya, jika Anda melakukannya
Anda sedang mengatur properti prop, jika Anda menggunakan getter / setter, maka fungsi setter akan dipanggil, dengan "abc" sebagai argumen. Definisi fungsi setter di dalam objek idealnya akan terlihat seperti ini:
Saya tidak yakin seberapa baik yang diterapkan di seluruh browser. Tampaknya Firefox juga memiliki sintaks alternatif, dengan metode khusus ganda ("ajaib"). Seperti biasa Internet Explorer tidak mendukung semua ini.
sumber
Anda dapat mendefinisikan metode instance untuk kelas js, melalui prototipe konstruktor.
Berikut ini adalah kode sampel:
Dan, ini harus bekerja untuk browser apa pun, Anda juga bisa menggunakan nodejs untuk menjalankan kode ini.
sumber
Saya juga agak bingung dengan penjelasan yang saya baca , karena saya mencoba menambahkan properti ke prototipe yang sudah ada yang tidak saya tulis, jadi mengganti prototipe sepertinya pendekatan yang salah. Jadi, untuk anak cucu, inilah cara saya menambahkan
last
properti keArray
:Jauh lebih bagus daripada menambahkan fungsi IMHO.
sumber
Jika Anda mengacu pada konsep pengakses, maka tujuan sederhananya adalah menyembunyikan penyimpanan yang mendasarinya dari manipulasi sewenang-wenang. Mekanisme paling ekstrem untuk ini adalah
Jika Anda merujuk ke fitur JS pengambil / penyetel sebenarnya, mis.
defineGetter
/defineSetter
, atau{ get Foo() { /* code */ } }
, maka perlu dicatat bahwa dalam kebanyakan mesin modern penggunaan selanjutnya dari sifat-sifat itu akan jauh lebih lambat daripada yang seharusnya. misalnya. membandingkan kinerjavs.
sumber
Saya punya satu untuk kalian yang mungkin sedikit jelek, tapi itu bisa dilakukan di semua platform
dengan cara ini, saat Anda menelepon
Jika Anda benar-benar ingin memperbaikinya .. Anda dapat memasukkan jenis cek:
atau lebih gila lagi dengan kode typeof check: type.of () yang canggih di codingforums.com
sumber