Comment cloner un objet en JavaScript ?

Le langage de script ne fournit pas de méthode pour cloner un objet. Mais, il existe néanmoins des solutions au problème.

La seule méthode clone() qui existe ne fonctionne que pour les éléments du DOM. Il faut donc soit utiliser d'autres fonctions JavaScript, soit utiliser des librairies externes qui apportent ces méthodes, jQuery par exemple.

La méthode la plus rapide pour cloner un objet simple consiste à utiliser le langage JSON. La méthode JSON.stringify() transforme un objet en une chaîne de caractères au format JSON tandis que la méthode JSON.Parse() effectue l'opération inverse. En combinant ces deux méthodes, on obtient ainsi une méthode de clonage pour un objet :

var monNouvelObjet = JSON.parse(JSON.stringify(monObjet));

Bien que cette méthode fonctionne pour des objets simples, elle possède des limitations. Les attributs au format date ne seront pas convertis correctement, la méthode JSON.stringify() va transformer un objet date en chaîne de caractères avec la date au format ISO. De plus, le langage JSON ne peut pas gérer les fonctions. Cette méthode ne fonctionnera donc pas pour un objet possédant des méthodes.

La librairie JavaScript JQuery fournit la méthode extend() qui peut fusionner le contenu de deux objets. En lui transmettant un objet vide dans l'un des deux paramètres, on obtient une méthode pour cloner un objet.

var monNouvelObjet = jQuery.extend({}, monObjet);

Cette méthode effectue par défaut une copie en surface de l'objet, c'est-à-dire qu'elle copie les attributs et méthodes sans recopier d'autres objets qui pourraient être contenus dans l'objet de départ. Il est cependant possible d'effectuer une copie en profondeur pour obtenir un clone exact de l'objet de départ. Il faut pour cela indiquer true en premier paramètre.

var monNouvelObjet = jQuery.extend(true, {}, monObjet);

Si vous souhaitez une méthode plus rapide et que vous connaissez la structure de votre objet, le moyen le plus efficace consiste à construire votre clone vous-même avec une méthode spécifique à votre classe. En effet, les méthodes de clonage utilisent beaucoup de boucles pour parcourir l'objet et la méthode hasOwnProperty() pour vérifier que l'objet possède bien une propriété. Le moteur d'exécution de JavaScript mettra plus de temps pour exécuter une méthode de clonage générique qu'une méthode de clonage spécifique.

JavaScript

Annonces Google