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:

1. Apa yang harus dilakukan oleh seorang pengambil dan penentu, dan
2. Berikan beberapa contoh SANGAT sederhana?

Selain jawaban @ millimoose , setter juga dapat digunakan untuk memperbarui nilai lainnya.

function Name(first, last) {
    this.first = first;
    this.last = last;
}

Name.prototype = {
    get fullName() {
        return this.first + " " + this.last;
    },

    set fullName(name) {
        var names = name.split(" ");
        this.first = names[0];
        this.last = names[1];
    }
};

Sekarang, Anda dapat mengatur fullName, firstdan lastakan diperbarui dan sebaliknya.

n = new Name('Claude', 'Monet')
n.first # "Claude"
n.last # "Monet"
n.fullName # "Claude Monet"
n.fullName = "Gustav Klimt"
n.first # "Gustav"
n.last # "Klimt"

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:

var user = { /* ... object with getters and setters ... */ };
user.phone = '+1 (123) 456-7890'; // updates a database
console.log( user.areaCode ); // displays '123'
console.log( user.area ); // displays 'Anytown, USA'

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 getdan setkata kunci untuk mendefinisikan properti yang dihitung. Mereka bekerja dengan semua browser modern kecuali IE 8 dan di bawahnya.

var foo = {
    bar : 123,
    get bar(){ return bar; },
    set bar( value ){ this.bar = value; }
};
foo.bar = 456;
var gaz = foo.bar;

Setter dan Setter Kustom

getdan setbukan 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.

var foo = {
    _bar : 123,
    get : function( name ){ return this[ '_' + name ]; },
    set : function( name, value ){ this[ '_' + name ] = value; }
};
foo.set( 'bar', 456 );
var gaz = foo.get( 'bar' );

Atau untuk pendekatan yang lebih ringkas, satu fungsi dapat digunakan.

var foo = {
    _bar : 123,
    value : function( name /*, value */ ){
        if( arguments.length < 2 ){ return this[ '_' + name ]; }
        this[ '_' + name ] = value;
    }
};
foo.value( 'bar', 456 );
var gaz = foo.value( 'bar' );

Hindari melakukan sesuatu seperti ini, yang dapat menyebabkan kode mengasapi.

var foo = {
    _a : 123, _b : 456, _c : 789,
    getA : function(){ return this._a; },
    getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};

Untuk contoh di atas, nama properti internal diabstraksi dengan garis bawah untuk mencegah pengguna dari hanya melakukan foo.barvs. foo.get( 'bar' )dan mendapatkan nilai "mentah". Anda dapat menggunakan kode kondisional untuk melakukan berbagai hal tergantung pada nama properti yang sedang diakses (melalui nameparameter).

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.

var foo = { _bar : 123 };
Object.defineProperty( foo, 'bar', {
    get : function(){ return this._bar; },
    set : function( value ){ this._bar = value; }
} );
foo.bar = 456;
var gaz = foo.bar;

__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.

var foo = { _bar : 123; }
foo.__defineGetter__( 'bar', function(){ return this._bar; } );
foo.__defineSetter__( 'bar', function( value ){ this._bar = value; } );

Juga patut dicatat adalah bahwa dalam contoh-contoh terakhir, nama-nama internal harus berbeda dari nama pengakses untuk menghindari rekursi (yaitu, foo.barpanggilan foo.get(bar)memanggil foo.barpanggilan foo.get(bar)...).

Lihat juga

MDN dapatkan , atur , Object.defineProperty () , __defineGetter __ () , __defineSetter __ () Dukungan Getter
MSDN IE8

Anda akan menggunakannya misalnya untuk mengimplementasikan properti yang dihitung.

Sebagai contoh:

function Circle(radius) {
    this.radius = radius;
}

Object.defineProperty(Circle.prototype, 'circumference', {
    get: function() { return 2*Math.PI*this.radius; }
});

Object.defineProperty(Circle.prototype, 'area', {
    get: function() { return Math.PI*this.radius*this.radius; }
});

c = new Circle(10);
console.log(c.area); // Should output 314.159
console.log(c.circumference); // Should output 62.832

^(CodePen)

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:

var settings = {
    firstname: 'John',
    lastname: 'Smith',
    get fullname() { return this.firstname + ' ' + this.lastname; }
};

console.log(settings.fullname);

... 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:

var address = {
    set raw(what) {
        var loc = what.split(/\s*;\s*/),
        area = loc[1].split(/,?\s+(\w{2})\s+(?=\d{5})/);

        this.street = loc[0];
        this.city = area[0];
        this.state = area[1];
        this.zip = area[2];
    }
};

address.raw = '123 Lexington Ave; New York NY  10001';
console.log(address.city);

... akan masuk New Yorkke 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.

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.

var counter = function() {
    var count = 0;

    this.inc = function() {
        count++;
    };

    this.getCount = function() {
        return count;
    };
};

var i = new Counter();
i.inc();
i.inc();
// writes "2" to the document
document.write( i.getCount());

Jika Anda masih bingung, lihat artikel Crockford tentang Anggota Pribadi dalam Javascript .

Saya pikir artikel pertama yang Anda tautkan menyatakannya dengan cukup jelas:

Keuntungan yang jelas untuk menulis JavaScript dengan cara ini adalah Anda dapat menggunakannya dengan nilai yang tidak Anda inginkan untuk diakses pengguna secara langsung.

Tujuannya di sini adalah untuk merangkum dan mengabstraksi bidang dengan hanya mengizinkan akses ke sana melalui suatu get()atau set()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 dalam set()metode, dll.

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:

var employee = {
    first: "Boris",
    last: "Sergeev",
    get fullName() {
        return this.first + " " + this.last;
    },
    set fullName(value) {
        var parts = value.toString().split(" ");
        this.first = parts[0] || "";
        this.last = parts[1] || "";
    },
    email: "boris.sergeev@example.com"
};

Hasil akhir:

console.log(employee.fullName); //Boris Sergeev
employee.fullName = "Alex Makarenko";

console.log(employee.first);//Alex
console.log(employee.last);//Makarenko
console.log(employee.fullName);//Alex Makarenko

Yang sangat membingungkan tentang itu ... getter adalah fungsi yang dipanggil saat Anda mendapatkan properti, setter, saat Anda mengaturnya. Misalnya, jika Anda melakukannya

obj.prop = "abc";

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:

set prop(var) {
   // do stuff with var...
}

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.

Anda dapat mendefinisikan metode instance untuk kelas js, melalui prototipe konstruktor.

Berikut ini adalah kode sampel:

// BaseClass

var BaseClass = function(name) {
    // instance property
    this.name = name;
};

// instance method
BaseClass.prototype.getName = function() {
    return this.name;
};
BaseClass.prototype.setName = function(name) {
    return this.name = name;
};


// test - start
function test() {
    var b1 = new BaseClass("b1");
    var b2 = new BaseClass("b2");
    console.log(b1.getName());
    console.log(b2.getName());

    b1.setName("b1_new");
    console.log(b1.getName());
    console.log(b2.getName());
}

test();
// test - end

Dan, ini harus bekerja untuk browser apa pun, Anda juga bisa menggunakan nodejs untuk menjalankan kode ini.

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 lastproperti ke Array:

Object.defineProperty(Array.prototype, "last", {
    get: function() { return this[this.length - 1] }
});

Jauh lebih bagus daripada menambahkan fungsi IMHO.

Jika Anda mengacu pada konsep pengakses, maka tujuan sederhananya adalah menyembunyikan penyimpanan yang mendasarinya dari manipulasi sewenang-wenang. Mekanisme paling ekstrem untuk ini adalah

function Foo(someValue) {
    this.getValue = function() { return someValue; }
    return this;
}

var myFoo = new Foo(5);
/* We can read someValue through getValue(), but there is no mechanism
 * to modify it -- hurrah, we have achieved encapsulation!
 */
myFoo.getValue();

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 kinerja

var a = { getValue: function(){ return 5; }; }
for (var i = 0; i < 100000; i++)
    a.getValue();

vs.

var a = { get value(){ return 5; }; }
for (var i = 0; i < 100000; i++)
    a.value;

Saya punya satu untuk kalian yang mungkin sedikit jelek, tapi itu bisa dilakukan di semua platform

function myFunc () {

var _myAttribute = "default";

this.myAttribute = function() {
    if (arguments.length > 0) _myAttribute = arguments[0];
    return _myAttribute;
}
}

dengan cara ini, saat Anda menelepon

var test = new myFunc();
test.myAttribute(); //-> "default"
test.myAttribute("ok"); //-> "ok"
test.myAttribute(); //-> "ok"

Jika Anda benar-benar ingin memperbaikinya .. Anda dapat memasukkan jenis cek:

if (arguments.length > 0 && typeof arguments[0] == "boolean") _myAttribute = arguments[0];
if (arguments.length > 0 && typeof arguments[0] == "number") _myAttribute = arguments[0];
if (arguments.length > 0 && typeof arguments[0] == "string") _myAttribute = arguments[0];

atau lebih gila lagi dengan kode typeof check: type.of () yang canggih di codingforums.com