wie man Javascript Object.defineProperty benutzt

Da fragte man ein ähnliche Fragenehmen Sie es Schritt für Schritt. Es ist ein bisschen länger, aber es spart Ihnen unter Umständen viel mehr Zeit als ich verbracht habe, auf das schreiben dieses:

Eigenschaft ist ein OOP-feature konzipiert für die saubere Trennung von client-code. Zum Beispiel, in einigen e-shop, die Sie haben könnten Objekte wie diese:

function Product(name,price) {
  this.name = name;
  this.price = price;
  this.discount = 0;
}

var sneakers = new Product("Sneakers",20); //{name:"Sneakers",price:20,discount:0}
var tshirt = new Product("T-shirt",10);  //{name:"T-shirt",price:10,discount:0}

Dann in Ihrem client-code (e-shop), die Sie hinzufügen können Rabatte auf Ihre Produkte:

function badProduct(obj) { obj.discount+= 20; ... }
function generalDiscount(obj) { obj.discount+= 10; ... }
function distributorDiscount(obj) { obj.discount+= 15; ... }

Später, die e-shop-Betreiber erkennen können, dass der Rabatt kann nicht größer sein als, sagen wir 80%. Nun müssen Sie JEDES auftreten der Rabatt änderungen in den client-code und fügen Sie eine Zeile

if(obj.discount>80) obj.discount = 80;

Dann die e-shop-Betreiber kann weitere änderung seiner Strategie, wie ", wenn der Kunde Wiederverkäufer, der maximale Rabatt kann 90%". Und Sie müssen die änderung an mehreren stellen wieder plus, die Sie sich merken müssen, ändern Sie diese Zeilen, wenn die Strategie geändert wird. Dies ist ein schlechtes design. Das ist, warum Kapselung ist das Grundprinzip der OOP. Wenn der Konstruktor war so:

function Product(name,price) {
  var _name=name, _price=price, _discount=0;
  this.getName = function() { return _name; }
  this.setName = function(value) { _name = value; }
  this.getPrice = function() { return _price; }
  this.setPrice = function(value) { _price = value; }
  this.getDiscount = function() { return _discount; }
  this.setDiscount = function(value) { _discount = value; } 
}

Dann können Sie einfach ändern Sie die getDiscount (accessor) und setDiscount (mutator) Methoden. Das problem ist, dass die meisten Mitglieder Verhalten sich wie gewöhnliche Variablen, nur den Rabatt braucht Besondere Pflege hier. Aber gutes design erfordert der Verguss von jedem Mitglied zu halten, den code erweiterbar. So müssen Sie viel code, der nichts tut. Dies ist auch ein schlechtes design, eine boilerplate antipattern. Manchmal kann man nicht nur die Umgestaltung der Felder, um die Methoden später (die eshop-code kann sehr groß werden oder einige third-party-code, hängt möglicherweise von der alten version), so dass die boilerplate ist das kleinere übel hier. Aber noch ist es böse. Das ist, warum Eigenschaften wurden in viele Sprachen. Sie könnten behalten Sie den ursprünglichen code, nur verwandeln die Rabatt-Mitglied in einem Eigentum mit get und set Blöcke:

function Product(name,price) {
  this.name = name;
  this.price = price;
//this.discount = 0; //<- remove this line and refactor with the code below
  var _discount; //private member
  Object.defineProperty(this,"discount",{
    get: function() { return _discount; },
    set: function(value) { _discount = value; if(_discount>80) _discount = 80; }
  });
}

//the client code
var sneakers = new Product("Sneakers",20);
sneakers.discount = 50; //50, setter is called
sneakers.discount+= 20; //70, setter is called
sneakers.discount+= 20; //80, not 90!
alert(sneakers.discount); //getter is called

Hinweis der vorletzten Zeile: die Verantwortung für die richtige Rabatt-Wert verschoben wurde aus dem client-code (e-shop-definition) für die definition des Produkts. Das Produkt ist dafür verantwortlich, dass seine Mitglieder-Daten konsistent. Gutes design ist (grob gesagt), wenn der code funktioniert auf die gleiche Weise wie unsere Gedanken.

So viel über Eigenschaften. Aber javascript unterscheidet sich von der reinen Objekt-orientierten Sprachen wie C# und codes die Funktionen anders:

In C#transformieren die Felder in Eigenschaften ist ein brechen ändernalso öffentlichen Feldern soll codiert werden, wie Automatisch Implementierte Eigenschaften wenn der code könnte verwendet werden, in zahlen zusammengestellt client.

In Javascriptdie standard-Eigenschaften (Daten Mitglied mit getter-und setter-oben beschrieben) sind definiert durch accessor-Deskriptor (in dem link, den Sie in Ihrer Frage). Ausschließlich verwenden, können Sie Datenbeschreibung (so dass Sie nicht verwenden können, d.h. Wert und set auf dem gleichen Grundstück):

• accessor-Deskriptor = get + set (siehe Beispiel oben)
  • bekommen muss eine Funktion, deren Rückgabewert verwendet wird, in das Lesen der Eigenschaft; wenn nicht angegeben, wird standardmäßig undefineddie verhält sich wie eine Funktion, die den Wert undefiniert zurückgibt,
  • set muss eine Funktion; der parameter ist gefüllt mit RHS in der Zuweisung eines Wertes an die Eigenschaft; wenn nicht angegeben, wird standardmäßig undefineddie verhält sich wie eine leere Funktion
• Datenbeschreibung = Wert + beschreibbar (siehe Beispiel unten)
  • Wert Standard undefined; wenn beschreibbarkonfigurierbare und enumerable (siehe unten) erfüllt sind, wird die Eigenschaft verhält sich wie ein gewöhnliches Daten-Feld
  • beschreibbar - Standard false; wenn nicht wahrdie Eigenschaft ist schreibgeschützt; Versuch zu schreiben wird ignoriert, ohne Fehlermeldung*!

Beide Deskriptoren können die folgenden Mitglieder:

• konfigurierbare - Standard false; wenn nicht true, die Eigenschaft kann nicht gelöscht werden; versuchen Sie zu löschen, ignoriert, ohne Fehlermeldung*!
• enumerable - Standard false; wenn true, wird es iteriert in for(var i in theObject); wenn false, wird es nicht Durchlaufen werden, aber es ist immer noch zugänglich als public

^{* es sei denn, in strict-Modus - in diesem Fall JS-hält die Ausführung mit TypeError, es sei denn, es ist gefangen in try-catch-block}

Lesen Sie diese Einstellungen verwenden Object.getOwnPropertyDescriptor().

Lernen durch Beispiel:

var o = {};
Object.defineProperty(o,"test",{
  value: "a",
  configurable: true
});
console.log(Object.getOwnPropertyDescriptor(o,"test")); //check the settings    

for(var i in o) console.log(o[i]); //nothing, o.test is not enumerable
console.log(o.test); //"a"
o.test = "b"; //o.test is still "a", (is not writable, no error)
delete(o.test); //bye bye, o.test (was configurable)
o.test = "b"; //o.test is "b"
for(var i in o) console.log(o[i]); //"b", default fields are enumerable

Wenn Sie nicht möchten, dass der client-code solche cheats, Schränken Sie das Objekt, indem Sie drei Ebenen der Entbindung:

• Objekt.preventExtensions(yourObject) verhindert, dass neue Eigenschaften Hinzugefügt werden yourObject. Verwenden Object.isExtensible(<yourObject>) um zu überprüfen, ob die Methode, die verwendet wurde, auf das Objekt. Die Prävention ist flachen (Lesen Sie unten).
• Objekt.Dichtung(yourObject) gleiche wie oben und Eigenschaften kann nicht entfernt werden (effektiv setzt configurable: false auf alle Eigenschaften). Verwenden Object.isSealed(<yourObject>) zu erkennen, diese Funktion auf das Objekt. Die Dichtung ist flachen (Lesen Sie unten).
• Objekt.freeze(yourObject) gleiche wie oben und Eigenschaften nicht geändert werden können (effektiv-sets writable: false alle Eigenschaften mit Daten-Deskriptor). Setter beschreibbare Eigenschaft ist nicht betroffen (da es keine hat). Der freeze ist flachen: es bedeutet, dass, wenn die Eigenschaft ist ein Objekt, dessen Eigenschaften SIND NICHT gefroren (wenn Sie möchten, sollten Sie etwas wie "deep freeze", ähnlich deep-copy - cloning). Verwenden Object.isFrozen(<yourObject>) es zu erkennen.

Brauchen Sie nicht diese Mühe machen, wenn Sie schreiben, nur ein paar Zeilen Spaß. Aber wenn Sie wollen, um code zu einem Spiel (wie du schon erwähnt hast in der verlinkten Frage), sollten Sie kümmern sich auch wirklich um gutes design. Versuche über google etwas über antipatterns und code smell. Es wird Ihnen helfen, Situationen zu vermeiden, wie "Oh, muss ich komplett neu schreiben, meinen code wieder!"es kann sparen Sie Monate der Verzweiflung, wenn Sie wollen, um code zu viel. Viel Glück.

InformationsquelleAutor der Antwort Jan Turoň

Grundsätzlich defineProperty ist eine Methode, die in der 3-Parameter - Objekt, eine Eigenschaft und einen Deskriptor. Was ist passiert in diesem Aufruf ist die "health" Eigenschaft des player Objekt wird immer zugewiesen, um 10 und 15 mal das Spieler-Objekt-Ebene.

InformationsquelleAutor der Antwort Cole Pilegard

Objekt.defineProperty() ist eine Globale Funktion..es ist nicht verfügbar in der Funktion, die erklärt, das Objekt anderweitig.Du wirst es statisch...

InformationsquelleAutor der Antwort ISONecroMAn