Introduction au clonage profond des compétences JavaScript objects_javascript

Je ne sais pas quand un nouveau mot a commencé à apparaître dans le cercle du front-end : le clonage profond d'objets. Cela peut sembler très noble, mais en fait ce n'est pas nouveau. Dans le développement de notre projet actuel, vous l'avez peut-être déjà utilisé. Cependant, en raison des caractères chinois larges et profonds, certaines choses initialement simples sont légèrement obscurcies par un vocabulaire apparemment professionnel. . Ajoutez des embellissements et cela devient mystérieux.

Pourquoi cloner en profondeur un objet en premier lieu ? S'il vous plaît, permettez-moi de deviner : vous devez parfois penser que le document objet intégré de js est trop long, alors vous pouvez faire ceci :

Copier le code Le code est le suivant :

var d = document;
d.by = fonction(id){
Renvoie d.getElementById(id);
};
d.by('id').innerHTML = 'bonjour sentsin';

Le code ci-dessus simplifie document.getElementById et ajoute également une méthode membre by à l'objet document d'origine. Vous pouvez vérifier votre jugement grâce à la valeur d'état renvoyée par document.hasOwnProperty('by'). Regardez l'exemple suivant.

Copier le code Le code est le suivant :

var person = {nom : 'Xianxin', profession : 'Développement front-end', lieu : 'Hangzhou'};
var newPerson = personne;
newPerson.age = '24';
console.log(personne);
//Résultat : {nom : 'Xianxin', profession : 'Développement front-end', lieu : 'Hangzhou', âge : 24}

On peut voir que lorsqu'un objet est simplement passé à une nouvelle variable, il ajoute uniquement un alias à l'objet. Cela signifie qu'en opérant sur l'alias, la valeur de la clé de l'objet d'origine changera. Mais le problème est que parfois nous voulons que newPerson soit complètement indépendant de person et qu'il n'y ait pas de relation de synchronisation entre elles, nous devons donc générer une copie, veuillez voir l'exemple :

Copier le code Le code est le suivant :

var cloneObj = fonction(obj){
var str, newobj = obj.constructor === Array [] : {};
Si(typed'obj !== 'objet'){
         revenir ;
} sinon si(window.JSON){
         str = JSON.stringify(obj), //Objet sérialisé
​​​​ newobj = JSON.parse(str); //Restaurer
} autre {
pour(var i dans obj){
newobj[i] = typeof obj[i] === 'objet'
cloneObj(obj[i]) : obj[i];
>
>
Retourner newobj ;
};

//Test
var obj = {a : 0, b : 1, c : 2};
var arr = [0, 1, 2];
//Effectuer un clonage profond
var newobj = cloneObj(obj);
var newarr = cloneObj(arr);
//Supprimer les membres du nouvel objet après le clonage
supprimer newobj.a;
newarr.splice(0,1);
console.log(obj, arr, newobj, newarr);
//Résultat : {a : 0, b : 1, c : 2}, [0, 1, 2], {b : 1, c : 2}, [1, 2] ;

C'est ce qu'on appelle le clonage d'objets. Cependant, certaines choses nécessitent des explications. L'objet JSON dans le code et ses méthodes membres stringify et parse appartiennent à la spécification ECMAScript5. Ils sont respectivement chargés de convertir un objet (y compris les objets tableau) en chaîne et de le restaurer, réalisant ainsi une copie complète de l'objet. Ainsi, pour les navigateurs de bas niveau (tels que IE), si vous copiez un tableau, vous pouvez utiliser newobj.concat(obj), et pour les objets ordinaires, vous pouvez simplement énumérer et attribuer des valeurs.