Ich habe versucht , meinen Kopf um Getter und Setter und sein nicht versinken in bekommen. Ich habe gelesen , JavaScript Getter und Setter und Definieren von Getter und Setter und einfach nicht zu bekommen.

Kann jemand klar sagen:

1. Was für ein Getter und Setter sollen und
2. Geben Sie einige sehr einfache Beispiele?

Zusätzlich zur Antwort von @ millimoose können Setter auch zum Aktualisieren anderer Werte verwendet werden.

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];
    }
};

Jetzt können Sie festlegen fullName, firstund lastwird aktualisiert und umgekehrt.

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"

Getter und Setter in JavaScript

Überblick

Getter und Setter in JavaScript werden zum Definieren berechneter Eigenschaften oder Accessoren verwendet . Eine berechnete Eigenschaft verwendet eine Funktion, um einen Objektwert abzurufen oder festzulegen. Die Grundtheorie macht ungefähr so:

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'

Dies ist nützlich, um beim Zugriff auf eine Eigenschaft automatisch Dinge hinter den Kulissen zu erledigen, z. B. Zahlen im Bereich zu halten, Zeichenfolgen neu zu formatieren, Ereignisse mit Wertänderungen auszulösen, relationale Daten zu aktualisieren, Zugriff auf private Eigenschaften zu gewähren und vieles mehr.

Die folgenden Beispiele zeigen die grundlegende Syntax, obwohl sie einfach den internen Objektwert abrufen und festlegen, ohne etwas Besonderes zu tun. In realen Fällen würden Sie den Eingabe- und / oder Ausgabewert wie oben angegeben an Ihre Anforderungen anpassen.

Schlüsselwörter abrufen / festlegen

ECMAScript 5 unterstützt getund setSchlüsselwörter zum Definieren berechneter Eigenschaften. Sie funktionieren mit allen modernen Browsern außer IE 8 und niedriger.

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

Benutzerdefinierte Getter und Setter

getund setsind keine reservierten Wörter, daher können sie überladen werden, um Ihre eigenen benutzerdefinierten, browserübergreifend berechneten Eigenschaftsfunktionen zu erstellen. Dies funktioniert in jedem Browser.

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' );

Oder für einen kompakteren Ansatz kann eine einzelne Funktion verwendet werden.

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' );

Vermeiden Sie so etwas, da dies zu einem Aufblähen des Codes führen kann.

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

In den obigen Beispielen werden die internen Eigenschaftsnamen mit einem Unterstrich abstrahiert, um Benutzer davon abzuhalten, einfach foo.barvs. zu tun foo.get( 'bar' )und einen "ungekochten" Wert zu erhalten. Sie können bedingten Code verwenden, um abhängig vom Namen der Eigenschaft, auf die zugegriffen wird (über den nameParameter), verschiedene Aufgaben auszuführen .

Object.defineProperty ()

Die Verwendung Object.defineProperty()ist eine weitere Möglichkeit, Getter und Setter hinzuzufügen, und kann für Objekte verwendet werden, nachdem sie definiert wurden. Es kann auch verwendet werden, um konfigurierbare und aufzählbare Verhaltensweisen festzulegen. Diese Syntax funktioniert auch mit IE 8, aber leider nur für DOM-Objekte.

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 __ ()

Schließlich __defineGetter__()ist eine andere Option. Es ist veraltet, wird aber im Internet immer noch häufig verwendet und wird daher wahrscheinlich nicht so schnell verschwinden. Es funktioniert in allen Browsern außer IE 10 und darunter. Obwohl die anderen Optionen auch auf Nicht-IE gut funktionieren, ist diese nicht so nützlich.

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

Erwähnenswert ist auch, dass in den letzteren Beispielen die internen Namen von den Zugriffsnamen abweichen müssen, um eine Rekursion zu vermeiden (dh foo.barAufrufen , Aufrufen foo.get(bar), foo.barAufrufen)foo.get(bar) ...).

Siehe auch

MDN get , set , Object.defineProperty () , __defineGetter __ () , __defineSetter __ ()
MSDN IE8 Getter Support

Sie würden sie beispielsweise verwenden, um berechnete Eigenschaften zu implementieren.

Beispielsweise:

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)

Es tut mir leid, eine alte Frage wiederzubeleben, aber ich dachte, ich könnte ein paar sehr grundlegende Beispiele und Erklärungen für Dummies beisteuern. Keine der anderen bisher veröffentlichten Antworten veranschaulicht die Syntax wie der MDN-Leitfaden erste Beispiel , ist.

Getter:

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

console.log(settings.fullname);

... wird sich John Smithnatürlich anmelden . Ein Getter verhält sich wie eine variable Objekteigenschaft, bietet jedoch die Flexibilität einer Funktion, um ihren zurückgegebenen Wert im laufenden Betrieb zu berechnen. Es ist im Grunde eine ausgefallene Möglichkeit, eine Funktion zu erstellen, die beim Aufrufen nicht () erfordert.

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);

... wird sich New Yorkan der Konsole anmelden . Wie Getter, Setter werden mit derselben Syntax aufgerufen wie der Wert einer Objekteigenschaft, sind jedoch eine weitere ausgefallene Möglichkeit, eine Funktion ohne () aufzurufen.

Siehe diese jsfiddle ein gründlicheres, vielleicht praktischeres Beispiel. Das Übergeben von Werten an den Objekt- Setter löst die Erstellung oder Auffüllung anderer Objektelemente aus. Insbesondere im jsfiddle-Beispiel fordert das Übergeben eines Arrays von Zahlen den Setter auf, Mittelwert, Median, Modus und Bereich zu berechnen. Legt dann die Objekteigenschaften für jedes Ergebnis fest.

Getter und Setter sind wirklich nur dann sinnvoll, wenn Sie private Eigenschaften von Klassen haben. Da Javascript nicht wirklich private Klasseneigenschaften hat, wie Sie es normalerweise von objektorientierten Sprachen erwarten, kann es schwer zu verstehen sein. Hier ist ein Beispiel für ein privates Zählerobjekt. Das Schöne an diesem Objekt ist, dass von außerhalb des Objekts nicht auf die interne Variable "count" zugegriffen werden kann.

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());

Wenn Sie immer noch verwirrt sind, lesen Sie den Artikel von Crockford über private Mitglieder in Javascript .

Ich denke, der erste Artikel, auf den Sie verlinken, sagt es ziemlich deutlich aus:

Der offensichtliche Vorteil beim Schreiben von JavaScript auf diese Weise besteht darin, dass Sie obskure Werte verwenden können, auf die der Benutzer nicht direkt zugreifen soll.

Das Ziel hierbei ist es, die Felder zu kapseln und zu abstrahieren, indem nur über eine get()oder eine set()Methode auf sie zugegriffen wird. Auf diese Weise können Sie das Feld / die Daten intern beliebig speichern, externe Komponenten befinden sich jedoch nur außerhalb Ihrer veröffentlichten Schnittstelle. Auf diese Weise können Sie interne Änderungen vornehmen, ohne die externen Schnittstellen zu ändern, eine Validierung oder Fehlerprüfung innerhalb der set()Methode durchführen usw.

Obwohl wir es oft gewohnt sind, Objekte mit öffentlichen Eigenschaften ohne Zugriffskontrolle anzuzeigen, können wir mit JavaScript Eigenschaften genau beschreiben. Tatsächlich können wir Deskriptoren verwenden, um zu steuern, wie auf eine Eigenschaft zugegriffen werden kann und welche Logik wir auf sie anwenden können. Betrachten Sie das folgende Beispiel:

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: "[email protected]"
};

Das Endergebnis:

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

Was daran so verwirrend ist ... Getter sind Funktionen, die aufgerufen werden, wenn Sie eine Eigenschaft erhalten, Setter, wenn Sie sie festlegen. Beispiel, wenn Sie dies tun

obj.prop = "abc";

Sie setzen die Eigenschaft prop, wenn Sie Getter / Setter verwenden, wird die Setter-Funktion mit "abc" als Argument aufgerufen. Die Definition der Setterfunktion innerhalb des Objekts würde im Idealfall ungefähr so ​​aussehen:

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

Ich bin mir nicht sicher, wie gut das in allen Browsern implementiert ist. Es scheint, dass Firefox auch eine alternative Syntax hat, mit doppelt unterstrichenen speziellen ("magischen") Methoden. Wie üblich unterstützt Internet Explorer dies nicht.

Sie können die Instanzmethode für die Klasse js über den Prototyp des Konstruktors definieren.

Es folgt der Beispielcode:

// 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

Und dies sollte für jeden Browser funktionieren. Sie können diesen Code auch einfach mit nodejs ausführen.

Ich war auch etwas verwirrt über die Erklärung, die ich gelesen habe , weil ich versucht habe, einem vorhandenen Prototyp, den ich nicht geschrieben habe, eine Eigenschaft hinzuzufügen, sodass das Ersetzen des Prototyps als falscher Ansatz erschien. Also, für die Nachwelt, hier ist , wie ich hinzugefügt lastEigenschaft auf Array:

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

Etwas schöner als das Hinzufügen einer Funktion IMHO.

Wenn Sie sich auf das Konzept der Accessoren beziehen, besteht das einfache Ziel darin, den zugrunde liegenden Speicher vor willkürlichen Manipulationen zu verbergen. Der extremste Mechanismus dafür ist

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();

Wenn Sie sich auf die eigentliche JS-Getter / Setter-Funktion beziehen, z. defineGetter/ defineSetter, oder { get Foo() { /* code */ } }, dann ist es erwähnenswert, dass in den meisten modernen Motoren die spätere Nutzung dieser Eigenschaften viel langsamer ist als sonst. z.B. Vergleichen Sie die Leistung von

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;

Ich habe eine für euch, die vielleicht etwas hässlich ist, aber plattformübergreifend erledigt wird

function myFunc () {

var _myAttribute = "default";

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

auf diese Weise, wenn Sie anrufen

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

Wenn Sie die Dinge wirklich aufpeppen möchten, können Sie eine Art Scheck einfügen:

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];

Oder gehen Sie noch verrückter mit dem erweiterten Typ-of- Check: type.of () -Code auf codingforums.com