Vous faire comprendre la méthode Object.defineProperty() en trois minutes-js tutoriel-php.cn

Vous faire comprendre la méthode Object.defineProperty() en trois minutes

醉折花枝作酒筹

Libérer： 2021-04-23 09:11:31

avant

1946 Les gens l'ont consulté

Cet article vous donnera une introduction détaillée à la méthode Object.defineProperty(). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Vous faire comprendre la méthode Object.defineProperty() en trois minutes

Syntaxe

Object.defineProperty(obj, prop, descriptor)

Définition

Définissez un nouvel attribut sur l'objet et modifiez l'attribut d'origine !

Paramètres

objet cible obj.

prop Le nom de la propriété à définir ou à modifier.

descripteur Le descripteur d'attribut défini ou modifié. (Impossible de définir la valeur, inscriptible et obtenu, définir les valeurs en même temps)

Descripteur d'attribut

configurable : booléen --> ; Est-ce possible ? Configuration

énumérable : booléen--> Peut-il être énuméré

valeur : valeur par défaut

inscriptible : booléen--> être remplacé

/Descripteur d'accès (accès)

get //La fonction de rappel calcule dynamiquement la valeur de l'attribut actuel en fonction d'autres attributs

set //La fonction de rappel surveille l'attribut actuel Si la valeur a changé, puis met à jour d'autres attributs associés

Valeur de retour

Renvoie l'objet sur lequel l'opération est effectuée, c'est-à-dire , return paramètres obj

Le code suivant est une implémentation simple Liaison de données bidirectionnelle :

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

Copier après la connexion

Affichage du rendu :