Cet article vous apporte des connaissances pertinentes sur JavaScript, qui présentent principalement des problèmes liés à l'orientation objet, notamment les descripteurs d'attributs, les descripteurs de données, les descripteurs d'accès, etc. Jetons-y un coup d'œil ensemble, j'espère, utile à tout le monde.
[Recommandations associées : didacticiel vidéo javascript, front-end Web]
JavaScript prend en charge une variété de paradigmes de programmation, notamment la programmation fonctionnelle et la programmation orientée objet :
Les objets en JavaScript sont conçus comme une collection non ordonnée d'attributs , comme une table hip-hop, composée de clés et de valeurs ;
La clé est un nom d'identifiant et la valeur peut être de n'importe quel type, ou de tout autre type d'objet ou de fonction ;
Si la valeur est une fonction, alors nous pouvons l'appeler une méthode de l'objet ;
Au début, la manière la plus courante de créer des objets consiste à utiliser la classe Object et à utiliser le mot-clé new pour créer un objet, puis à stocker les propriétés ou les méthodes dans l'objet :
var obj = nouvel objet()
obj.name = 'pourquoi'
console.log(obj.name, obj) // pourquoi { nom : 'pourquoi' }Plus tard, par souci de commodité, de nombreux développeurs ont créé des objets directement sous forme de littéraux :
//Méthode littérale var obj2 = { nom : 'jam', âge : '8' }
console.log(obj) // { nom : 'jam', âge : '8' } Auparavant, nos propriétés étaient directement définies à l'intérieur de l'objet, ou ajoutées directement à l'objet ;
Mais de cette façon, nous ne pouvons pas imposer certaines restrictions sur cet attribut : par exemple, cet attribut peut-il être supprimé via delect , et peut-il être parcouru lors du parcours for-in ?
Si nous voulons avoir un contrôle opérationnel plus précis sur un attribut, je peux alors utiliser des descripteurs d'attribut . Les propriétés d'un objet peuvent être ajoutées ou modifiées avec précision via des descripteurs de propriétés ;
Les descripteurs de propriétés doivent utiliser Object.defineProperty pour ajouter ou modifier des propriétés.
属性描述符分为两种：数据描述符和存取描述符
Un descripteur de données est une propriété avec une valeur qui peut ou non être accessible en écriture. Le descripteur de données a les valeurs de clé facultatives suivantes :
value : La valeur correspondant à cet attribut. Il peut s'agir de n'importe quelle valeur JavaScript valide (valeur numérique, objet, fonction, etc.). La valeur par défaut n'est pas définie.
writable : Si et seulement si l'écriture de cet attribut est vraie, la valeur peut être modifiée par l'opérateur de copie. La valeur par défaut est faux.
configurable : si et seulement si l'attribut configurable est vrai, le descripteur d'attribut peut être modifié et l'attribut peut également être supprimé de l'objet correspondant. La valeur par défaut est faux.
enumerable : si et seulement si l'énumérable de la propriété est vrai, la propriété peut apparaître dans la propriété d'énumération de l'objet. La valeur par défaut est faux.
La méthode Object.getOwnPropertyDescriptor() renvoie le descripteur de propriété correspondant à une propre propriété sur l'objet spécifié.
Objet.getOwnPropertyDescriptor(obj, prop)
obj : l'objet cible à trouver
prop : nom de l'attribut dans l'objet cible (type String).
Valeur de retour : si la propriété spécifiée existe sur l'objet, son objet descripteur de propriété est renvoyé, sinon undéfini est renvoyé.
Remarque : Si le premier paramètre de cette méthode n'est pas un objet, une erreur (TypeError) sera signalée.
La méthode Object.defineProperty() définit directement une nouvelle propriété sur un objet, ou modifie une propriété existante d'un objet, et renvoie l'objet.
Object.defineProperty (obj, prop, descripteur)
obj : L'objet sur lequel les propriétés doivent être définies.
prop : Le nom de la propriété à définir ou à modifier.
descripteur : le descripteur d'attribut à définir ou à modifier
Valeur de retour : l'objet passé à la fonction
L'exemple de code suivant montre la définition et l'obtention de descripteurs d'attribut var obj = {
nom : 'confiture',
âge: 8
}
Object.defineProperty(obj, 'travail', {
valeur : 'avocat'
})
console.log(Object.getOwnPropertyDescriptor(obj, 'age')) // { valeur : 8, inscriptible : vrai, énumérable : vrai, configurable : vrai }
console.log(obj.job) // Lawyer // Nouvelle propriété via DefineProperty, cette nouvelle propriété est non modifiable, non supprimable et non énumérable console.log(Object.getOwnPropertyDescriptor(obj, 'job')) / / {valeur : 'Avocat', inscriptible : faux, énumérable : faux, configurable : faux}
注意：通过defineProperty新增的属性，该新属性是不可修改、不可删除以及不可枚举的
var obj = {
nom : 'confiture',
âge: 8
}
Object.defineProperty(obj, 'adresse', {
valeur : 'Hebei',
// configurable Cette propriété ne peut pas être supprimée, et vous ne pouvez pas non plus utiliser DefineProperty pour modifier à nouveau le descripteur de propriété configurable : false,
})
delete obj.address // Je souhaite utiliser delete pour supprimer cet attribut obj.address = 'Guangzhou' // Je souhaite modifier la valeur de l'adresse de l'attribut dans obj en Guangzhou console.log(obj.address) // Résultat de sortie : HebeiÉtant donné que la valeur configurable du descripteur d'attribut est fausse et ne peut pas être supprimée ou modifiée, la suppression et la modification ne prendront pas effet.
var obj = {
nom : 'confiture',
âge : 8}Object.defineProperty(obj, 'sexe', {
valeur : 'Mâle',
// enumerable configure si cette propriété peut être énumérée enumerable: true})for (i in obj) {
console.log(i)}Lorsqu'il est énumérable : faux, le résultat de sortie est l'âge du nom
Lorsqu'il est énumérable : vrai, le résultat de sortie est nom âge sexe
var obj = {
nom : 'confiture',
âge : 8}Object.defineProperty(obj, 'score', {
valeur : 80,
// accessible en écriture : vrai
accessible en écriture : false})obj.score = 100 console.log(obj.score) // 80Étant donné que la valeur de writeable est fausse, lorsque le score est modifié à 100, la modification échoue et le résultat final est de 80.
Pensez-vous qu'il est fastidieux de définir le descripteur de propriété d'une seule propriété à la fois ? Object.defineProperties peut vous aider à résoudre le problème.
La méthode Object.defineProperties() définit une ou plusieurs nouvelles propriétés ou modifie les propriétés existantes d'un objet, et renvoie l'objet.
Objet.defineProperties (obj, accessoires)
obj : L'objet sur lequel les propriétés doivent être définies.
props : objet dont les propriétés énumérables ou les descripteurs de propriétés modifiés doivent être définis.
Valeur de retour : l'objet transmis à la fonction.
L'exemple de code est le suivant :
var obj = {
nom : 'jam',}Object.defineProperties(obj, {
'âge': {
valeur : 28,
inscriptible : vrai,
configurable : faux,
énumérable : vrai
},
'emploi': {
valeur : 'avocat',
inscriptible : vrai,
configurable : faux,
énumérable : vrai
},
'sexe' : {
valeur : 'Mâle',
inscriptible : faux,
configurable : faux,
énumérable : vrai
},
'hauteur': {
valeur : '1,8 m',
inscriptible : faux,
configurable : faux,
énumérable : vrai
}})console.log(obj) // nom : 'jam', âge : 28, métier : 'avocat', sexe : 'mâle', taille : '1,8m' }Les descripteurs d'accès sont des propriétés décrites par des paires de fonctions getter-setter. Le descripteur d'accès a les valeurs de clé facultatives suivantes :
get : fournit une méthode getter pour la propriété. S'il n'y a pas de getter, elle n'est pas définie. Lors de l'accès à cette propriété, la méthode sera exécutée. Aucun paramètre n'est transmis lors de l'exécution de la méthode, mais l'objet this sera transmis.
set : fournit une méthode setter pour la propriété. S'il n'y a pas de setter, elle ne sera pas définie. Cette méthode est déclenchée lorsque la valeur de la propriété est modifiée. Cette méthode acceptera le seul paramètre, qui est la nouvelle valeur du paramètre de la propriété.
configurable : si et seulement si l'attribut configurable est vrai, le descripteur d'attribut peut être modifié et l'attribut peut également être supprimé de l'objet correspondant. La valeur par défaut est faux.
Énumérable : Si et seulement si l'énumérable de l'attribut est vrai, l'attribut peut apparaître dans l'attribut d'énumération de l'objet. La valeur par défaut est faux.
L'utilisation de configurable et enurnerable est cohérente avec celle des descripteurs de données, je ne les expliquerai donc pas en détail ici.
Parlez principalement de l'utilisation des méthodes get et set
var obj = {
nom : 'confiture',
âge: 8,
_adresse : 'Hebei'
}
// Scénarios d'utilisation des descripteurs d'accès // 1. Masquer un certain attribut privé qui devrait être directement utilisé et attribué par le monde extérieur // 2. Si nous voulons comprendre le processus d'accès et de définition de la valeur d'un certain attribut , nous l'utiliserons également descripteur de propriété de stockage Object.defineProperty(obj, 'address', {
énumérable : vrai,
configurable : vrai,
obtenir : fonction () {
foo()
renvoyer cette._adresse
},
ensemble : fonction (valeur) {
bar()
this._address = valeur
}
})
fonction foo () {
console.log("Intercepté la valeur de l'adresse une fois")
}
barre de fonctions () {
console.log("La valeur de l'adresse est définie une fois")
} L'exemple de console de code ci-dessus imprime les résultats suivants : 