JavaScript - Méthodes d'objet ES5

Bonjour à tous, futurs magiciens JavaScript ! Aujourd'hui, nous allons plonger dans le monde magique des méthodes d'objet ES5. Ne vous inquiétez pas si vous êtes nouveaux en programmation - je serai votre guide amical à travers cette aventure, et nous avancerons pas à pas. À la fin de ce tutoriel, vous manipulerez les objets comme un pro !

Méthodes d'objet JavaScript ES5

Avant de commencer, récapitulons rapidement ce que sont les objets en JavaScript. Pensez à un objet comme un conteneur qui garde des informations liées. Par exemple, un objet "voiture" pourrait contenir des propriétés comme la couleur, la marque et l'année.

let voiture = {
couleur: "rouge",
marque: "Toyota",
annee: 2020
};

Maintenant, ES5 a introduit plusieurs méthodes puissantes pour travailler avec ces objets. Explorons-les une par une !

Méthode JavaScript Object.create()

La méthode Object.create() nous permet de créer un nouvel objet en utilisant un objet existant comme prototype. C'est comme dire : "Hey JavaScript, crée-moi un nouvel objet qui hérite de cet autre objet !"

let animal = {
faireSon: function() {
console.log("Un son générique d'animal");
}
};

let chien = Object.create(animal);
chien.faireSon(); // Sortie : Un son générique d'animal

chien.aboyer = function() {
console.log("Wouf wouf !");
};

chien.aboyer(); // Sortie : Wouf wouf !

Dans cet exemple, nous avons créé un objet chien qui hérite de l'objet animal. Le chien peut utiliser la méthode faireSon de animal, mais il a aussi sa propre méthode aboyer.

Méthode JavaScript Object.defineProperty()

Object.defineProperty() nous permet d'ajouter ou de modifier une propriété d'un objet. C'est comme pouvoir ajouter une nouvelle fonctionnalité à votre voiture après l'avoir achetée !

let personne = {};

Object.defineProperty(personne, "nom", {
value: "John",
writable: false,
enumerable: true,
configurable: true
});

console.log(personne.nom); // Sortie : John
personne.nom = "Jane"; // Cela ne changera pas le nom
console.log(personne.nom); // Sortie : John

Ici, nous avons ajouté une propriété nom à l'objet personne. Nous l'avons définie comme non modifiable, ce qui signifie que nous ne pouvons pas changer sa valeur après l'avoir définie.

Méthode JavaScript Object.defineProperties()

Object.defineProperties() est comme defineProperty(), mais avec un supplément ! Il nous permet de définir plusieurs propriétés à la fois.

let livre = {};

Object.defineProperties(livre, {
titre: {
value: "Gatsby le Magnifique",
writable: true
},
auteur: {
value: "F. Scott Fitzgerald",
writable: false
}
});

console.log(livre.titre); // Sortie : Gatsby le Magnifique
console.log(livre.auteur); // Sortie : F. Scott Fitzgerald

livre.titre = "Gatsby"; // Cela fonctionne
livre.auteur = "Scott"; // Cela ne fonctionne pas

console.log(livre.titre); // Sortie : Gatsby
console.log(livre.auteur); // Sortie : F. Scott Fitzgerald

Dans cet exemple, nous avons défini deux propriétés pour notre objet livre en une seule fois. La titre est modifiable, mais l'auteur ne l'est pas.

Méthode JavaScript Object.getOwnPropertyDescriptor()

Cette méthode nous permet d'obtenir la description d'une propriété. C'est comme demander les spécifications d'une fonctionnalité particulière de votre voiture.

let voiture = {
marque: "Toyota"
};

let descripteur = Object.getOwnPropertyDescriptor(voiture, "marque");

console.log(descripteur);
// Sortie :
// {
//   value: "Toyota",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

Ici, nous obtenons le descripteur de la propriété marque de notre objet voiture. Il nous indique la valeur et si la propriété est modifiable, enumerable et configurable.

Méthode JavaScript Object.getOwnPropertyNames()

Cette méthode renvoie un tableau de toutes les propriétés (enumérables ou non) trouvées directement dans un objet donné. C'est comme obtenir une liste de toutes les fonctionnalités de votre voiture, même les cachées !

let personne = {
nom: "John",
age: 30
};

Object.defineProperty(personne, "ssn", {
value: "123-45-6789",
enumerable: false
});

console.log(Object.getOwnPropertyNames(personne));
// Sortie : ["nom", "age", "ssn"]

Même si nous avons fait de ssn non enumérable, getOwnPropertyNames() l'inclut toujours dans la liste.

Méthode JavaScript Object.getPrototypeOf()

Cette méthode renvoie le prototype de l'objet spécifié. C'est comme demander : "Qui est ton parent ?"

let animal = {
mange: true
};

let lapin = Object.create(animal);

console.log(Object.getPrototypeOf(lapin) === animal); // Sortie : true

Ici, nous confirmons que le prototype du lapin est bien l'objet animal.

Méthode JavaScript Object.keys()

Object.keys() renvoie un tableau des noms des propriétés enumérables propres à un objet donné. C'est comme obtenir une liste de toutes les fonctionnalités visibles de votre voiture.

let voiture = {
marque: "Toyota",
modele: "Corolla",
annee: 2020
};

console.log(Object.keys(voiture));
// Sortie : ["marque", "modele", "annee"]

Cette méthode ne renvoie que les propriétés enumérables, contrairement à getOwnPropertyNames() qui renvoie toutes les propriétés.

Méthode JavaScript Object.freeze()

Object.freeze()冻结一个对象：其他代码不能删除或更改其属性。这就好比把你的车放在一块冰里——你不能添加、删除或修改它的属性！

let voiture = {
marque: "Toyota",
modele: "Corolla"
};

Object.freeze(voiture);

voiture.annee = 2020; // 这不会工作
voiture.marque = "Honda"; // 这也不会工作

console.log(voiture); // 输出: { marque: "Toyota", modele: "Corolla" }

在冻结car对象后，我们无法添加annee属性或更改marque。

Méthode JavaScript Object.seal()

Object.seal()密封一个对象，防止新属性被添加并标记所有现有属性为不可配置。这就好比密封你的车——你不能添加新功能，但你可以修改现有的。

let personne = {
nom: "John",
age: 30
};

Object.seal(personne);

personne.sexe = "Male"; // 这不会工作
personne.age = 31; // 这可以工作

delete personne.nom; // 这不会工作

console.log(personne); // 输出: { nom: "John", age: 31 }

我们可以更改age，但不能添加sexe或删除nom。

Méthode JavaScript Object.isFrozen()

此方法确定一个对象是否被冻结。这就好比检查你的车是否真的被困在冰块里！

let voiture = {
marque: "Toyota"
};

console.log(Object.isFrozen(voiture)); // 输出: false

Object.freeze(voiture);

console.log(Object.isFrozen(voiture)); // 输出: true

Méthode JavaScript Object.isSealed()

类似于isFrozen()，此方法检查一个对象是否被密封。

let personne = {
nom: "John"
};

console.log(Object.isSealed(personne)); // 输出: false

Object.seal(personne);

console.log(Object.isSealed(personne)); // 输出: true

Méthode JavaScript Object.preventExtensions()

此方法防止新属性被添加到对象。这就好比在你的车上贴上“不再添加功能”的标志。

let voiture = {
marque: "Toyota"
};

Object.preventExtensions(voiture);

voiture.modele = "Corolla"; // 这不会工作

console.log(voiture); // 输出: { marque: "Toyota" }

在阻止扩展后，我们无法添加modele属性。

Méthode JavaScript Object.isExtensible()

此方法确定一个对象是否可扩展（即是否可以添加新属性）。

let voiture = {
marque: "Toyota"
};

console.log(Object.isExtensible(voiture)); // 输出: true

Object.preventExtensions(voiture);

console.log(Object.isExtensible(voiture)); // 输出: false

以下是我们在本教程 couvertes :

方法	描述
Object.create()	Crée un nouvel objet avec l'objet prototype spécifié et les propriétés
Object.defineProperty()	Ajoute la propriété nommée décrite par un descripteur donné à un objet
Object.defineProperties()	Définit nouvelles ou modifie les propriétés existantes directement sur un objet, renvoyant l'objet
Object.getOwnPropertyDescriptor()	Retourne un descripteur de propriété pour une propriété propre d'un objet
Object.getOwnPropertyNames()	Retourne un tableau de toutes les propriétés trouvées directement dans un objet donné
Object.getPrototypeOf()	Retourne le prototype de l'objet spécifié
Object.keys()	Retourne un tableau des noms des propriétés enumérables propres à un objet donné
Object.freeze()	Freeze un objet : d'autres codes ne peuvent pas supprimer ou modifier ses propriétés
Object.seal()	Scelle un objet, empêchant l'ajout de nouvelles propriétés et marquant toutes les propriétés existantes comme non configurables
Object.isFrozen()	Détermine si un objet est gelé
Object.isSealed()	Détermine si un objet est scellé
Object.preventExtensions()	Empêche l'ajout de nouvelles propriétés à un objet
Object.isExtensible()	Détermine si un objet est extensible

Et voilà ! Vous avez fait un grand tour des méthodes d'objet ES5. Souvenez-vous, la pratique rend parfait, donc n'hésitez pas à expérimenter avec ces méthodes dans votre propre code. Bonne programmation, futurs maîtres JavaScript !

Credits: Image by storyset