Maison > Article > interface Web > Vous faire comprendre la méthode Object.defineProperty() en trois minutes

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

醉折花枝作酒筹avant: 2021-04-23 09:11:311926parcourir

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.

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>

Affichage du rendu :

[Recommandé apprentissage : tutoriel avancé javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript Object 回调函数对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment utiliser la fonction somme en javascript pour additionnerArticle suivant：Comment utiliser la fonction somme en javascript pour additionner

Articles Liés

Voir plus