javascript - Affectation d'un objet de référence, copie profonde et superficielle jquery.extend

Question

Lorsqu'un type de référence est attribué à un autre type de référence, ils pointent simplement vers la même adresse et les opérations s'influencent mutuellement.
La copie approfondie consiste à réallouer de l'espace afin que celui-ci et l'objet ou le tableau précédent ne soient pas affectés.
Une copie superficielle équivaut à l'attribution d'un type de référence.

var a={banner:{size:1,weight:'0.5kg'}};
var b={apple:{size:1},banner:{size:3}};
$.extend(true,a,b)=>{banner:{size:3,weight:'0.5kg'},apple:{size:1}};
$.extend(a,b)=>{banner:{size:3},apple:{size:1}};

J'ai vu le code source de jquery. La copie profonde nécessite une récursion.
Mais je ne comprends pas, qu'est-ce que cela a à voir avec l'influence mutuelle, ou ma compréhension du concept ci-dessus est-elle fausse

Answer 1

Copie superficielle

Parcourez et réaffectez uniquement les clés de niveau supérieur de l'objet (aux références correspondantes), par exemple :

var a = {
  x: {
    name: 'x',
    value: 10,
  },
  y: 10,
  o: {},
}
var b = {
  x: {
    name: 'x2',
    value: 20,
  },
  y: {
    name: 'y2',
    value: 20,
  },
  z: {}
}

$.extend(a, b)

Dans ce processus, tous les éléments de niveau supérieur sont extraits de b, à savoir b.x, by, b.z, puis attribués aux clés correspondantes de a un par un, donc à la fin a a de nouveaux a.x, a.y, a.z et en même temps, a.o aussi Rester dans a, puis a.x === b.x, a.y === b.y, a.z === b.z, car ce sont toutes des références pointant vers le même objet. Puisqu'il s'agit d'une référence, lorsque vous utilisez a.x, tel que a.x.name = 'x3', alors b.x.name devient également 'x3'.

Copie approfondie

La copie approfondie ira en profondeur dans la dernière couche de l'élément objet pour la réaffectation au lieu de la référence. Prenons a et b ci-dessus comme exemple, exécutez :

$.extend(true, a, b)

Il traversera profondément b et comparera la valeur de chaque nœud avec le nœud correspondant à a (exactement le même). S'ils sont différents, ouvrira un espace de stockage pour a et lui attribuera la valeur si a n'existe pas. , ce nœud lui sera utilisé. Attribuez une valeur après la création. Il n'y a pas d'égalité entre le nœud enfant de premier niveau de a et le premier niveau de b, et même == n'est pas établi.

Après une copie approfondie, certains des nœuds d'origine de a seront conservés et les nœuds passés de b seront écrasés ou ajoutés, mais il n'y a pas de relation de référence avec b, donc la modification d'un nœud de a n'affectera pas b. Ceci est très utile lors du traitement de certaines données. Afin de ne pas affecter les données originales, il est nécessaire de faire une copie complète avant de traiter les données.

Lors de la copie complète, le numéro d'index du tableau est traité comme un nom de clé, de sorte que les éléments du tableau seront modifiés au lieu d'être ajoutés aux données d'origine. Par exemple :

var a = [
  {
    x: 1,
  }, 
  {
    x: 2,
  },
]
var b = [
  {
    y: 2
  },
]
$.extend(true, a, b) 

Vous obtiendrez :

var a = [
  {
    x: 1,
    y: 2
  }, 
  {
    x: 2,
  },
]

La première primitive de b est fusionnée dans le premier élément de a. Cette fusion est due au fait que le tableau fonctionne sur la base du numéro d'index de l'élément comme clé. Par conséquent, vous ne pouvez pas utiliser extend pour fusionner des tableaux, mais vous devriez envisager d’utiliser merge ou concat.

Answer 2

C'est juste une copie du nom, cela n'a rien à voir avec une copie profonde/copie superficielle. Il serait plus approprié de l’appeler copie récursive.