Cloner un objet avec la fonction clone

Comment cloner un objet en javascript

clone javascript, javascript clone, copy object javascript, javascript copy object, javascript object copy, object javascript, js clone, clone js, clone object js, fonction clone, copy javascript object, js clone object, cloner un objet javascript, javascript dupliquer objet

La fonction clone (plus bas dans l'article) permet de copier récursivement les propriétés d'un objet. En effet en javascript le comportement d'un = est de copier le pointeur de l'objet et c'est pour cela qu'il est parfois utile de cloner des objets.

Comportement par défaut de javascript :


var pomme = new Object();
pomme.name = 'pomme';

var banane = pomme;
banane.name = 'banane';

alert(pomme.name); //'banane'
alert(banane.name); //'banane'

Comportement avec le clonage d'objet :


var pomme = new Object();
pomme.name = 'pomme';

var banane = clone(pomme);
banane.name = 'banane';

alert(pomme.name); //'pomme'
alert(banane.name); //'banane'

La fonction de clonage :
Source de ce code


/*
 * Fonction de clonage
 * @author Keith Devens
 * @see http://keithdevens.com/weblog/archive/2007/Jun/07/javascript.clone
 */
function clone(srcInstance)
{
	/*Si l'instance source n'est pas un objet ou qu'elle ne vaut rien c'est une feuille donc on la retourne*/
	if(typeof(srcInstance) != 'object' || srcInstance == null)
	{
		return srcInstance;
	}
	/*On appel le constructeur de l'instance source pour crée une nouvelle instance de la même classe*/
	var newInstance = srcInstance.constructor();
	/*On parcourt les propriétés de l'objet et on les recopies dans la nouvelle instance*/
	for(var i in srcInstance)
	{
		newInstance[i] = clone(srcInstance[i]);
	}
	/*On retourne la nouvelle instance*/
	return newInstance;
}