Detaillierte Erläuterung der flachen Kopie und der tiefen Kopie von JS-Objekten

In diesem Artikel werden die flachen und tiefen Kopiercodes von JavaScript-Objekten als Referenz beschrieben. Der spezifische Inhalt lautet wie folgt: 1. Beim Kopieren werden die Attribute des Objekts kopiert übergeordnetes Objekt. Alle werden in das untergeordnete Objekt kopiert.

Die folgende Funktion kopiert:

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;
　}

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

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

Über die Funktion „extendCopy()“ erbt Doctor Chinesisch.

var Doctor = extensionCopy(Chinese);

Dann fügen wir eine Stadt zum „Geburtsort“ von Doctor hinzu:

Doctor.birthPlaces.push('Xiamen') ;

Sehen Sie sich die Eingabeergebnisse an

alert(Doctor.birthPlaces); //Peking, Shanghai, Hongkong, Xiamen

ExtendCopy() kopiert also nur den Basistyp der Daten. Wir nennen diese Kopie „flache Kopie“.

2. Deep Copy

Da flache und tiefe Kopien solche Nachteile haben, werfen wir einen Blick auf Deep Copy

Die sogenannte „Deep Copy“ bedeutet, dass dies möglich ist Erzielen Sie echte Kopien von Arrays und Objekten. Die Implementierung ist nicht schwierig. Rufen Sie einfach rekursiv „Shallow Copy“ auf.

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;
　　}

Fügen Sie nun ein Attribut zum übergeordneten Objekt mit dem Wert als hinzu Array. Ändern Sie dann dieses Attribut für das untergeordnete Objekt:

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

$.extend() in jquery abgeschlossen .

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

Typ: Boolean
Wenn wahr, in Rekursion zusammenführen ( Auch sogenannte Deep Copy).

Typ: Objekt
Objekterweiterung. Dieser erhält die neuen Eigenschaften.
•object1
Typ: Objekt
Ein Objekt, das zusätzliche Eigenschaften enthält, die mit dem ersten Parameter zusammengeführt wurden.
•objectN
Typ: Objekt
mit zusätzlichen Eigenschaften, die mit dem ersten Parameter zusammengeführt wurden. Ein Parameter


Wenn wir zwei oder mehr Objekte für $.extend() bereitstellen, werden alle Eigenschaften der Objekte zum Zielobjekt (Zielparameter) hinzugefügt.

Wenn für $.extend() nur ein Argument bereitgestellt wird, bedeutet dies, dass das Zielargument weggelassen wird. In diesem Fall wird das jQuery-Objekt selbst standardmäßig auf das Zielobjekt gesetzt. Auf diese Weise können wir neue Funktionen unter dem jQuery-Namespace hinzufügen. Dies ist nützlich für Plugin-Entwickler, die jQuery neue Funktionen hinzufügen möchten.

Denken Sie daran, dass das Zielobjekt (erster Parameter) geändert wird und über $.extend() zurückgegeben wird. Wenn wir jedoch das ursprüngliche Objekt behalten möchten, können wir dies tun, indem wir ein leeres Objekt als Zielobjekt übergeben:

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

Standardmäßig ist der Zusammenführungsvorgang über $.extend() nicht rekursiv. Wenn die Eigenschaft des ersten Objekts selbst ein Objekt oder Array ist, wird eine Eigenschaft mit demselben Schlüssel des zweiten Objekts vollständig überschrieben. Diese Werte werden nicht zusammengeführt. Sie können dies erkennen, indem Sie den Wert der Banane im folgenden Beispiel untersuchen. Wenn jedoch true als erstes Argument an die Funktion übergeben wird, wird eine rekursive Zusammenführung der Objekte durchgeführt.

Warnung: Die Übergabe von false als erstes Argument wird nicht unterstützt.

1. Zwei Objekte zusammenführen und das erste Objekt ändern.

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}

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}

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"}

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

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);

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