Exemples d'utilisation de get et d'un ensemble de classes en javascript ES6

Cet article présente principalement l'utilisation de get et set de classes dans ES6 javascript, et analyse l'utilisation des mots-clés get et set de classes dans ES6 sur la base d'exemples spécifiques. Les amis qui en ont besoin pourront s'y référer. aider tout le monde.

Comme ES5, vous pouvez utiliser les mots-clés get et set dans Class pour définir la fonction de stockage et la fonction de valeur d'un certain attribut afin d'intercepter le comportement d'accès de l'attribut.

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: ' + value);
  }
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'

Dans le code ci-dessus, l'attribut prop a une fonction de stockage et une fonction de valeur correspondantes, de sorte que les comportements d'affectation et de lecture ont été personnalisés.

La fonction de stockage et la fonction de valeur sont définies sur l'objet descripteur de l'attribut.

class CustomHTMLElement {
  constructor(element) {
    this.element = element;
  }
  get html() {
    return this.element.innerHTML;
  }
  set html(value) {
    this.element.innerHTML = value;
  }
}
var descriptor = Object.getOwnPropertyDescriptor(
  CustomHTMLElement.prototype, "html");
"get" in descriptor // true
  "set" in descriptor // true

Dans le code ci-dessus, la fonction de stockage et la fonction de valeur sont définies sur l'objet description de l'attribut html, ce qui est totalement cohérent avec ES5.

Recommandations associées :

Exemples d'utilisation des fonctions get et set

Comment utiliser la structure de données Set pour faire fonctionner des tableaux dans ES6

Partage d'exemples d'optimisation SQL où le décalage est trop grand lors de la pagination MySQL

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!