Explication détaillée de la copie superficielle et de la copie profonde des objets js

Cet article partage les codes de copie superficielle et de copie profonde des objets JavaScript pour votre référence. Le contenu spécifique est le suivant

1 Copie superficielle

La copie consiste à copier les attributs du. objet parent. Tous sont copiés dans l’objet enfant.

La fonction suivante copie :

var Chinese = {
　　nation:'中国'
}
var Doctor = {
　　career:'医生'
}　　
function extendCopy(p) {
　　　　var c = {};
　　　　for (var i in p) { 
　　　　　　c[i] = p[i];
　　　　}
　　　　c.uber = p;
　　　　return c;
　}

Lors de son utilisation, écrivez comme ceci :

var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国

Cependant, il y a un problème avec une telle copie. Autrement dit, si les propriétés de l'objet parent sont égales à celles d'un tableau ou d'un autre objet, alors en fait, ce que l'objet enfant obtient n'est qu'une adresse mémoire, pas une copie réelle, il est donc possible que l'objet parent ait été trafiqué.

Veuillez voir, ajoutez maintenant un attribut "lieu de naissance" au chinois, sa valeur est un tableau.

Chinese.birthPlaces = ['Beijing','Shanghai','Hong Kong'];

Grâce à la fonction extendCopy(), Doctor hérite du chinois.

var Doctor = extendCopy(Chinese);

Ensuite, nous ajoutons une ville au "lieu de naissance" du Docteur :

Doctor.birthPlaces.push('Xiamen') ;

Regardez les résultats d'entrée

alert(Doctor.birthPlaces); //Beijing, Shanghai, Hong Kong, Xiamen
alert(Chinese.birthPlaces); //Beijing, Shanghai, Hong Kong , Xiamen

Le résultat est que leurs deux lieux de naissance ont été modifiés.

Ainsi, extendCopy() copie uniquement le type de base des données. Nous appelons cette copie « copie superficielle ».

2. Copie profonde

Parce que les copies superficielles et profondes présentent de tels inconvénients, jetons un coup d'œil à la copie profonde

La soi-disant « copie profonde » signifie qu'elle peut réaliser de vraies copies de tableaux et d'objets. Sa mise en œuvre n'est pas difficile, il suffit d'appeler "copie superficielle" de manière récursive.

function deepCopy(p, c) {
　　　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === 'object') {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
　　}

Regardez comment l'utiliser :

var Doctor = deepCopy(Chinese);

Maintenant, ajoutez un attribut à l'objet parent avec la valeur comme tableau. Ensuite, modifiez cet attribut sur l'objet enfant :

Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');
 
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港

Ceci termine la copie

$.extend()

$.extend() en jquery c'est comme .

$.extend( [deep ], target, object1 [, objectN ] )

•deep
Type : Booléen
Si vrai, fusionner en récursivité (Aussi appelée copie profonde).
•target
Type : Objet
Extension d'objet. Celui-ci recevra les nouvelles propriétés.
•object1
Type : Objet
Un objet contenant des propriétés supplémentaires fusionnées dans le premier paramètre.
•objectN
Type : Objet
contenant des propriétés supplémentaires fusionnées dans le premier paramètre Un paramètre

Lorsque nous fournissons deux objets ou plus à $.extend(), toutes les propriétés des objets sont ajoutées à l'objet cible (paramètre cible).

Si un seul argument est fourni à $.extend(), cela signifie que l'argument cible est omis. Dans ce cas, l'objet jQuery lui-même est par défaut l'objet cible. De cette façon, nous pouvons ajouter de nouvelles fonctionnalités sous l'espace de noms jQuery. Ceci est utile pour les développeurs de plugins qui souhaitent ajouter de nouvelles fonctions à jQuery.

Rappelez-vous que l'objet cible (premier paramètre) sera modifié et sera renvoyé via $.extend(). Cependant, si nous souhaitons conserver l'objet d'origine, nous pouvons le faire en passant un objet vide comme objet cible :

var object = $.extend({}, object1, object2);

par défaut Ensuite, l'opération de fusion via $.extend() n'est pas récursive ; si la propriété du premier objet est elle-même un objet ou un tableau, alors elle écrasera complètement une propriété avec la même clé du deuxième objet. Ces valeurs ne seront pas fusionnées. Vous pouvez le constater en examinant la valeur de la banane dans l’exemple ci-dessous. Cependant, si true est passé comme premier argument à la fonction, une fusion récursive sera effectuée sur les objets.

Attention : Passer false comme premier argument n'est pas pris en charge.

1. Fusionnez deux objets et modifiez le premier objet.

var object1 = {
 apple: 0,
 banana: { weight: 52, price: 100 },
 cherry: 97
};
var object2 = {
 banana: { price: 200 },
 durian: 100
};
 
// Merge object2 into object1
$.extend( object1, object2 );
 
// Assuming JSON.stringify - not available in IE<8
console.log( JSON.stringify( object1 ) );
//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

2. Fusionnez deux objets de manière récursive et modifiez le premier objet.

var object1 = {
 apple: 0,
 banana: { weight: 52, price: 100 },
 cherry: 97
};
var object2 = {
 banana: { price: 200 },
 durian: 100
};
 
// Merge object2 into object1, recursively
$.extend( true, object1, object2 );
 
// Assuming JSON.stringify - not available in IE<8
console.log( JSON.stringify( object1 ) );
//{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

3. Fusionnez les objets par défaut et les options sans modifier l'objet par défaut. Il s'agit d'un modèle de développement de plug-ins couramment utilisé.

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
 
// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );
 
 
console.log(JSON.stringify( defaults ));
console.log(JSON.stringify( options ));
console.log(JSON.stringify( settings ));
//defaults -- {"validate":false,"limit":5,"name":"foo"}
//options -- {"validate":true,"name":"bar"}
//settings -- {"validate":true,"limit":5,"name":"bar"}

Javascript détermine si les objets sont égaux

Les opérations d'égalité en Javascript incluent "==" et "===" sont congruentes. La différence entre les deux n'a pas besoin d'être la même. majorité. Cet article Dans cet article, nous parlerons de la façon de déterminer si deux objets sont égaux ? Vous pourriez penser que deux objets sont égaux s’ils ont les mêmes propriétés et que leurs propriétés ont les mêmes valeurs. Montrons-le ensuite à travers un exemple :

var obj1 = {
  name: "Benjamin",
  sex : "male"
}
 
var obj2 = {
  name: "Benjamin",
  sex : "male"
}
 
//Outputs: false
console.log(obj1 == obj2);
 
//Outputs: false
console.log(obj1 === obj2);

Comme vous pouvez le voir dans l'exemple ci-dessus, que "==" ou "===" soit utilisé, false est renvoyé. La raison principale est que les types de base chaîne et nombre sont comparés par valeur, tandis que les objets (Date, Array) et les objets ordinaires sont comparés par l'adresse dans la mémoire pointée par le pointeur. Regardez l'exemple suivant :

var obj1 = {
  name: "Benjamin",
  sex : "male"
};
 
var obj2 = {
  name: "Benjamin",
  sex : "male"
};
 
var obj3 = obj1;
 
//Outputs: true
console.log(obj1 == obj3);
 
//Outputs: true
console.log(obj1 === obj3);
 
//Outputs: false
console.log(obj2 == obj3);
 
//Outputs: false
console.log(obj2 === obj3);

L'exemple ci-dessus renvoie vrai car les pointeurs de obj1 et ob3 pointent vers la même adresse en mémoire. Il est similaire au concept de transmission de valeurs et de transmission de références dans les langages orientés objet (Java/C). Parce que si vous voulez juger si deux objets sont égaux, vous devez être clair. Voulez-vous juger si les attributs des deux objets sont les mêmes, ou si les valeurs correspondant aux attributs sont les mêmes, ou quoi. ?

function person(name) { 
  this.name=name; 
} 
 
var p1 = new person("p1"); 
var p2 = new person("p2"); 
 
console.log(p1 == p2); //false 
 
person.prototype.sayHi = function() { 
  // do sayHi here 
} 
 
console.log(p1.sayHi() == p2.sayHi()); //true 
console.log(p1.sayHi() === p2.sayHi()); //true

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde s'abonnera au site Web PHP chinois.

Pour des explications plus détaillées sur la copie superficielle et la copie profonde des objets js, veuillez faire attention au site Web PHP chinois !