Ich habe schon lange keinen Beitrag mehr gepostet. Heute habe ich plötzlich das Implementierungsprinzip der Extend-Methode in JQuery analysiert. Der Zweck besteht darin, mein Verständnis von JQuery zu verbessern und auch zu verstehen, wie JavaScript-Master JS schreiben. Bitte korrigieren Sie mich, wenn es Mängel gibt. Danke!
Das Folgende ist der Quellcode der JQuery.extend-Methode:
jQuery.extend = jQuery.fn.extend = function() {
var-Optionen, Name, Quelle, Kopie, copyIsArray, Klon,
target = arguments[0] ||. {}, // Zielobjekt
i = 1,
Länge = Argumente.Länge,
tief = falsch;
// Deep-Copy-Situation behandeln (der erste Parameter ist vom booleschen Typ und wahr)
If ( typeof target === "boolean" ) {
tief = Ziel;
target = arguments[1] ||. {};
// Den ersten Parameter (ob tief kopiert werden soll oder nicht) und den zweiten Parameter (Zielobjekt) überspringen
i = 2;
}
// Wenn das Ziel kein Objekt oder keine Funktion ist, initialisieren Sie es mit einem leeren Objekt
If ( typeof target !== "object" && !jQuery.isFunction(target) ) {
Ziel = {};
}
// Wenn nur ein Parameter angegeben ist, wird jQuery selbst als Zielobjekt verwendet
If (length === i ) {
target = this;
--ich;
}
für ( ; i < Länge; i ) {
// Nur mit Nicht-Null-/undefinierten Werten umgehen
If ( (options = arguments[ i ]) != null ) {
// Erweitern Sie das Basisobjekt
für (Name in Optionen) {
src = target[name];
copy = Optionen[Name];
// Endlose Schleife verhindern
If (target === copy) {
Weiter;
// Wenn das Objekt ein Array oder andere Objekte enthält, verwenden Sie Rekursion, um
zu kopieren
If ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// Arrays verarbeiten
If (copyIsArray) {
copyIsArray = false
// Wenn das Array im Zielobjekt nicht vorhanden ist, erstellen Sie ein leeres Array
clone = src && jQuery.isArray(src) : [];
clone = src && jQuery.isPlainObject(src) ? src : {};
// Ändere niemals das Originalobjekt, erstelle nur eine Kopie
target[ name ] = jQuery.extend( deep, clone, copy );
// UNDEFINED-Wert
nicht kopieren
Ziel[Name] = kopieren;
}
// Das geänderte Objekt zurückgeben
Ziel zurückgeben;
};
Aus der obigen Analyse können wir ersehen, dass die Erweiterungsfunktion Deep Copy unterstützt. Was ist also Deep Copy in JS?
Mein Verständnis ist wie folgt: Wenn ein Objekt ein Referenzobjekt enthält (z. B. ein Array oder ein Objekt), dann handelt es sich beim Kopieren des Objekts nicht einfach um eine Kopie der Adresse des Referenzobjekts, sondern um eine Kopie des Inhalts des Referenzobjekts kopiert und als separates Objekt gespeichert (wie unten gezeigt).
Auf dem Bild oben können Sie sehen, dass zwei Schülerobjekte ein Freundobjekt teilen. Die Operationen einer Partei am Freundobjekt sind auch für die andere Partei sichtbar. Beispiel: Wenn Sie den Nachnamen Ihres Freundes in „zhangsan“ ändern, kann ihn das andere Objekt auch sehen.
Wie aus dem Bild oben ersichtlich ist, haben beide Schülerobjekte ihre eigenen Freundobjekte, und die Änderung des einen ist für das andere völlig transparent (ohne Auswirkungen). Das Obige ist mein Verständnis von Deep Copy. Wenn etwas nicht stimmt, lachen Sie bitte nicht.
Wie implementiert die JQuery.extend-Methode flache Kopien und tiefe Kopien?
So verwenden Sie JQuery.extend:
1. JQuery.extend (Quellobjekt)
Erweitern Sie das Quellobjekt zum jQuery-Objekt, dh kopieren Sie die Eigenschaften und Methoden des Quellobjekts nach jQuery. Verwenden Sie jQuery als Zielobjekt. Der Quellcode lautet wie folgt:
Code kopieren
Der Code lautet wie folgt:
// Wenn nur ein Parameter angegeben ist, verwenden Sie jQuery selbst als Zielobjekt
if ( length === i ) {
target = this;
--i;
}
【Beispiel 1】: Erweitern Sie die Methode des Personenobjekts auf ein jQuery-Objekt.
Code kopieren
ShowName: Funktion(Name){
alarm("Name: " name);
}
};
jQuery.extend(person); // Erweitern Sie das Personenobjekt zum jQuery($)-Objekt
jQuery.showName("admin"); // Name: admin
$.showName("admin"); // Name: amdin
Alert("Sex: " $.sex); // Geschlecht: männlich
[Beispiel 2] Stellen Sie sicher, dass es sich bei der Verwendung dieser Form der Erweiterungsmethode um eine flache Kopie handelt.
Code kopieren
ShowName: Funktion(Name){
alarm("Name: " name);
}
};
jQuery.extend(person); // Erweitern Sie das Personenobjekt zum jQuery($)-Objekt
Alert($.Sprache); // Java, C, SQL
$.sprache.push('PL/SQL'); // Das erweiterte Objekt
ändern
Alert(Person.Sprache); // Java, C, SQL, PL/SQL
person.sprache.pop();
Alert($.Sprache); // Java, C, SQL
Aus dem obigen Beispiel können wir erkennen, dass jede Änderung des Spracharrays durch entweder das erweiterte Objekt ($) oder das Quellobjekt (Person) Auswirkungen auf die andere Partei hat. Dies ist eine oberflächliche Kopie
2. JQuery.extend (Zielobjekt, Quellobjekt)
Kopieren Sie die Eigenschaften und Methoden des Quellobjekts mithilfe einer flachen Kopie in das Zielobjekt.
[Beispiel] Erstellen Sie Personen- und Studentenobjekte und erweitern Sie dann die Attribute und Methoden der Person über die jQuery.extend-Methode auf das Studentenobjekt.
var person = {
Sprache: ['java', 'c', 'sql'],
ShowName: Funktion(Name){
alarm("Name: " name);
}
};
var student = {
ShowNum: Funktion(num){
alarm("Num: " num);
}
};
jQuery.extend(student, person); // Erweitern Sie das Personenobjekt auf das angegebene Studentenobjekt
student.showName("admin");
alarm(student.sprache);
3. JQuery.extend (boolean, Quellobjekt)
Der boolesche Parameter in dieser Methode gibt an, ob Deep Copy verwendet werden soll. Wenn er wahr ist, wird Deep Copy verwendet.
[Beispiel] Erweitern Sie das Personenobjekt zum jQuery-Objekt
var person = {
Sprache: ['java', 'c', 'sql'],
ShowName: Funktion(Name){
alarm("Name: " name);
}
};
jQuery.extend(true, person); // Erweitern Sie das Personenobjekt zum jQuery-Objekt
Alert($.Sprache); // Java, C, SQL
$.sprache.push('PL/SQL'); // Das erweiterte Objekt
ändern
Alert(Person.Sprache); // Java, C, SQL
person.sprache.pop();
Aus dem obigen Beispiel können wir ersehen, dass Änderungen an $.sprache keine Auswirkungen auf das Sprachattribut persönlich haben. Das ist Deep Copy
4. JQuery.extend (boolean, Zielobjekt, Quellobjekt)
Legt fest, ob Deep Copy verwendet werden soll, um das Quellobjekt auf das Zielobjekt zu erweitern. Wie folgt:
[Beispiel] Erstellen Sie Personen- und Studentenobjekte und erweitern Sie dann die Attribute und Methoden der Person über die jQuery.extend-Methode auf das Studentenobjekt.
var person = {
ShowName: Funktion(Name){
alarm("Name: " name);
}
};
var student = {
Sprache: ["java", "c", "javascript"],
ShowNum: Funktion(num){
alarm("Num: " num);
}
};
var target = jQuery.extend(person, student);
Alert(Zielsprache); // Java, C, Javascript
target.sprache.push("PL/SQL");
Alert(Student.Language); // Java, C, Javascript, PL/SQL
student.sprache.pop();
Alert(Zielsprache); // Java, C, Javascript
var target2 = jQuery.extend(true, person, student);
Alert(target2.Sprache); // Java, C, Javascript
target2.sprache.push("PL/SQL");
Alert(Student.Language); // Java, C, Javascript
student.sprache.pop();
Alert(target2.Sprache); // Java, C, Javascript, PL/SQL
Das Obige ist mein Verständnis der Extend-Methode. Bitte korrigieren Sie mich, wenn etwas falsch ist. Vielen Dank!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
