comment utiliser javascript Object.defineProperty

Question

J'ai cherché comment utiliser le Object.defineProperty mais je n'ai rien trouvé de décent.

Quelqu'un m'a donné ce bout de code :

Object.defineProperty(player, "health", {
    get: function () {
        return 10 + ( player.level * 15 );
    }
})

Mais je ne le comprends pas. Principalement, le get c'est ce que je n'arrive pas à comprendre (jeu de mots). Comment cela fonctionne-t-il ?

Answer 1

Résumé :

Object.defineProperty(player, "health", {
    get: function () {
        return 10 + ( player.level * 15 );
    }
});

Object.defineProperty est utilisé afin de créer une nouvelle propriété sur l'objet joueur. Object.defineProperty est une fonction qui est présente nativement dans l'environnement d'exécution JS et prend les arguments suivants :

Object.defineProperty(obj, prop, descriptor)

1. El objet sur laquelle nous voulons définir une nouvelle propriété
2. El nom de la nouvelle propriété nous voulons définir
3. objet descripteur

L'objet descripteur est la partie intéressante. Dans cet objet, nous pouvons définir les éléments suivants :

1. configurable <boolean> : Si true le descripteur de la propriété peut être modifié et la propriété peut être supprimée de l'objet. Si configurable est false les propriétés du descripteur qui sont transmises dans Object.defineProperty ne peut être modifié.
2. Inscriptible <boolean> : Si true la propriété peut être écrasée à l'aide de l'opérateur d'affectation.
3. Énumérable <boolean> : Si true la propriété peut être itérée dans un fichier for...in boucle. De même, lorsque vous utilisez le Object.keys la clé sera présente. Si la propriété est false ils ne seront pas itérés à l'aide de la fonction for..in et ne s'affiche pas lorsque l'on utilise Object.keys .
4. obtenir <function> : Une fonction qui est appelée chaque fois que la propriété est requise. Au lieu de donner la valeur directe, cette fonction est appelée et la valeur retournée est donnée comme la valeur de la propriété.
5. set <function> : Une fonction qui est appelée chaque fois que la propriété est attribuée. Au lieu de définir la valeur directe, cette fonction est appelée et la valeur renvoyée est utilisée pour définir la valeur de la propriété.

Ejemplo:

const player = {
  level: 10
};

Object.defineProperty(player, "health", {
  configurable: true,
  enumerable: false,
  get: function() {
    console.log('Inside the get function');
    return 10 + (player.level * 15);
  }
});

console.log(player.health);
// the get function is called and the return value is returned as a value

for (let prop in player) {
  console.log(prop);
  // only prop is logged here, health is not logged because is not an iterable property.
  // This is because we set the enumerable to false when defining the property
}

Answer 2

import { CSSProperties } from 'react'
import { BLACK, BLUE, GREY_DARK, WHITE } from '../colours'

export const COLOR_ACCENT = BLUE
export const COLOR_DEFAULT = BLACK
export const FAMILY = "'Segoe UI', sans-serif"
export const SIZE_LARGE = '26px'
export const SIZE_MEDIUM = '20px'
export const WEIGHT = 400

type Font = {
  color: string,
  size: string,
  accent: Font,
  default: Font,
  light: Font,
  neutral: Font,
  xsmall: Font,
  small: Font,
  medium: Font,
  large: Font,
  xlarge: Font,
  xxlarge: Font
} & (() => CSSProperties)

function font (this: Font): CSSProperties {
  const css = {
    color: this.color,
    fontFamily: FAMILY,
    fontSize: this.size,
    fontWeight: WEIGHT
  }
  delete this.color
  delete this.size
  return css
}

const dp = (type: 'color' | 'size', name: string, value: string) => {
  Object.defineProperty(font, name, { get () {
    this[type] = value
    return this
  }})
}

dp('color', 'accent', COLOR_ACCENT)
dp('color', 'default', COLOR_DEFAULT)
dp('color', 'light', COLOR_LIGHT)
dp('color', 'neutral', COLOR_NEUTRAL)
dp('size', 'xsmall', SIZE_XSMALL)
dp('size', 'small', SIZE_SMALL)
dp('size', 'medium', SIZE_MEDIUM)

export default font as Font

Answer 3

Définit une nouvelle propriété directement sur un objet, ou modifie une propriété existante sur un objet, et retourne l'objet.

Note : Vous appelez cette méthode directement sur le constructeur d'objet plutôt que plutôt que sur une instance du type Object.

   const object1 = {};
   Object.defineProperty(object1, 'property1', {
      value: 42,
      writable: false, //If its false can't modify value using equal symbol
      enumerable: false, // If its false can't able to get value in Object.keys and for in loop
      configurable: false //if its false, can't able to modify value using defineproperty while writable in false
   });

Explication simple sur la définition de la propriété.

Exemple de code : https://jsfiddle.net/manoj_antony32/pu5n61fs/

Answer 4

Object.defineProperty(Array.prototype, "last", {
  get: function() {
    if (this[this.length -1] == undefined) { return [] }
    else { return this[this.length -1] }
  }
});

console.log([1,2,3,4].last) //returns 4

Answer 5

Oui non plus de fonction s'étendant pour le setter et le getter d'installation Voici mon exemple Object.defineProperty(obj,name,func)

var obj = {};
['data', 'name'].forEach(function(name) {
    Object.defineProperty(obj, name, {
        get : function() {
            return 'setter & getter';
        }
    });
});

console.log(obj.data);
console.log(obj.name);