Machen Sie sich in drei Minuten mit der Methode Object.defineProperty() vertraut-js-Tutorial-php.cn

Machen Sie sich in drei Minuten mit der Methode Object.defineProperty() vertraut

醉折花枝作酒筹

Freigeben： 2021-04-23 09:11:31

nach vorne

1915 Leute haben es durchsucht

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Methode Object.defineProperty(). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Machen Sie sich in drei Minuten mit der Methode Object.defineProperty() vertraut

Syntax

Object.defineProperty(obj, prop, descriptor)

Definition

Definieren Sie eine neue Eigenschaft für das Objekt. Sie können die ursprüngliche Eigenschaft ändern!

Parameter

obj Zielobjekt.

prop Der Name der definierten oder geänderten Eigenschaft.

descriptor Eigenschaftsdeskriptor definiert oder geändert. (Die Werte von value, beschreibbar, get und set können nicht gleichzeitig festgelegt werden

Eigenschaftsdeskriptor

konfigurierbar: Boolean –> Ob es konfigurierbar ist

aufzählbar: Boolean – > Ob es aufzählbar ist

Wert: Standardwert

beschreibbar: Boolean --> Ob es umgeschrieben werden kann

/Zugriffs-(Zugriffs-)Deskriptor

get //Die Rückruffunktion berechnet dynamisch den Wert des aktuelles Attribut basierend auf anderen Attributen

set / /Die Rückruffunktion überwacht, ob sich der aktuelle Attributwert geändert hat, und aktualisiert dann andere verwandte Attribute

Rückgabewert

Gibt das bearbeitete Objekt zurück, dh den obj-Parameter

Der folgende Code ist eine einfache Implementierung der bidirektionalen Datenbindung:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="ipt" />
    <p id="lc"></p>
  </body>
</html>
<script>
  //获取页面元素
  var ipt = document.getElementById("ipt");
  var ps = document.getElementById("lc");

  var obj = { name: "" };

  Object.defineProperty(obj, "name", {
    get() {
      return ipt.value;
    },
    set(newval) {
      ipt.value = newval;
      ps.innerHTML = newval;
    },
  });

  ipt.addEventListener("keyup", function() {
    ps.innerHTML = ipt.value; //数据赋值
  });
</script>

Nach dem Login kopieren

Rendering-Diagrammanzeige:

[Empfohlenes Lernen:

Javascript-Tutorial für Fortgeschrittene]

Das obige ist der detaillierte Inhalt vonMachen Sie sich in drei Minuten mit der Methode Object.defineProperty() vertraut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!