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:

Wenn Sie sie verwenden, schreiben Sie so:

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

Bei einem solchen Kopieren gibt es jedoch ein Problem. Das heißt, wenn die Eigenschaften des übergeordneten Objekts denen eines Arrays oder eines anderen Objekts entsprechen, erhält das untergeordnete Objekt tatsächlich nur eine Speicheradresse und keine echte Kopie, sodass die Möglichkeit besteht, dass das übergeordnete Objekt dies getan hat manipuliert.

Bitte sehen Sie, fügen Sie jetzt dem Chinesischen ein „Geburtsort“-Attribut hinzu, dessen Wert ein Array ist.

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

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

Das Ergebnis ist, dass ihre beiden Geburtsorte geändert wurden.

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.

Schauen Sie sich an, wie man es verwendet:

var Doctor = deepCopy(Chinese);

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:

Damit ist die Kopie von

$.extend()

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

$.extend() in jquery abgeschlossen .

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

•deep

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

•target

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.

2. Zwei Objekte rekursiv 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}

3. Führen Sie die Standard- und Optionsobjekte zusammen, ohne das Standardobjekt zu ändern. Dies ist ein häufig verwendetes Plug-in-Entwicklungsmodell.

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}

Javascript bestimmt, ob Objekte gleich sind

Gleichheitsoperationen in Javascript umfassen „==“ und „===“ und der Unterschied zwischen den beiden muss nicht gleich sein In diesem Artikel werden wir darüber sprechen, wie man feststellt, ob zwei Objekte gleich sind. Sie könnten denken, dass zwei Objekte gleich sind, wenn sie dieselben Eigenschaften haben und ihre Eigenschaften dieselben Werte haben. Dann demonstrieren wir es anhand eines Beispiels:

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

Wie Sie dem obigen Beispiel entnehmen können, wird unabhängig davon, ob „==" oder „===" verwendet wird, false zurückgegeben. Der Hauptgrund dafür ist, dass die Grundtypen Zeichenfolge und Zahl anhand ihres Werts verglichen werden, während Objekte (Datum, Array) und gewöhnliche Objekte anhand der Adresse im Speicher verglichen werden, auf die der Zeiger zeigt. Schauen Sie sich das folgende Beispiel an:

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

Das obige Beispiel gibt true zurück, da die Zeiger von obj1 und ob3 auf dieselbe Adresse im Speicher zeigen. Ähnlich den Konzepten der Wertübergabe und Referenzübergabe in objektorientierten Sprachen (Java/C++). Denn wenn Sie beurteilen möchten, ob zwei Objekte gleich sind, müssen Sie sich darüber im Klaren sein, ob die Attribute der beiden Objekte gleich sind oder ob die den Attributen entsprechenden Werte gleich sind ?

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website abonniert.

Ausführlichere Erklärungen zum flachen Kopieren und tiefen Kopieren von JS-Objekten finden Sie auf der chinesischen PHP-Website!

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