Detaillierte Erklärung von jQuery extend()

Dieser Artikel stellt Ihnen hauptsächlich die detaillierte Erklärung und einfache Beispiele von jQuery extend() vor. Freunde, die es benötigen, können darauf verweisen.

Ausführliche Erklärung und einfache Beispiele von jQuery extension()

Wenn Sie jQuery verwenden, werden Sie feststellen, dass einige Funktionen in jQuery wie folgt verwendet werden:

$.get(); 
$.post(); 
$.getJSON();

Einige Funktionen werden wie folgt verwendet:

$('p').css(); 
$('ul').find('li');

Einige Funktionen werden wie folgt verwendet dies:

$('li').each(callback); 
$.each(lis,callback);

Hier geht es um zwei Konzepte: Werkzeugmethoden und Instanzmethoden. Normalerweise beziehen sich die Tool-Methoden, über die wir sprechen, auf Funktionen, die ohne Instanziierung aufgerufen werden können, z. B. der erste Codeabschnitt. Instanzmethoden sind Funktionen, die erst aufgerufen werden können, nachdem das Objekt instanziiert wurde, z. B. der zweite Codeabschnitt. Viele Methoden in jQuery sind sowohl Instanzmethoden als auch Toolmethoden, die aufrufenden Methoden unterscheiden sich jedoch geringfügig, wie beispielsweise der dritte Codeabschnitt. Um die Tool-Methoden und Instanzmethoden in JavaScript besser zu erklären, wird der folgende Test durchgeführt.

functionA(){ 
     
  } 
  A.prototype.fun_p=function(){console.log("prototpye");}; 
  A.fun_c=function(){console.log("constructor");}; 
  var a=new A(); 
  A.fun_p();//A.fun_p is not a function 
  A.fun_c();//constructor 
  a.fun_p();//prototpye 
  a.fun_c();//a.fun_c is not a function

Durch den obigen Test kann geschlossen werden, dass die Instanzmethode im Prototyp definiert ist und die Toolmethode direkt im Konstruktor hinzugefügt wird ; Instanzmethoden können nicht von Konstruktoren aufgerufen werden, und ebenso können Dienstprogrammmethoden nicht von Instanzen aufgerufen werden.

Instanzmethoden können natürlich nicht nur im Prototyp definiert werden, es gibt die folgenden drei Definitionsmethoden:

functionA(){ 
    this.fun_f=function(){ 
        console.log("Iam in the constructor"); 
    }; 
} 
A.prototype.fun_p=function(){ 
    console.log("Iam in the prototype"); 
}; 
var a=newA(); 
a.fun_f();//Iam in the constructor 
a.fun_i=function(){ 
    console.log("Iam in the instance"); 
}; 
a.fun_i();//Iam in the instance 
a.fun_p();//Iam in the prototype

Diese drei Die Priorität der Methode ist: Direkt in der Instanz definierte Variablen haben eine höhere Priorität als die in „this“ definierten, und in „this“ definierte Variablen haben eine höhere Priorität als die vom Prototyp definierten Variablen. Das heißt, Variablen, die direkt auf der Instanz definiert sind, überschreiben Variablen, die auf „this“ und im Prototyp definiert sind, und Variablen, die auf „this“ definiert sind, überschreiben die auf dem Prototyp definierten Variablen.

Schauen wir uns den Quellcode der Methode „extend()“ in jQuery an:

jQuery.extend = jQuery.fn.extend = function() { 
    var options,name, src, copy, copyIsArray, clone, 
        target= arguments[0] || {}, 
        i =1, 
        length= arguments.length, 
        deep= false; 
    // Handle adeep copy situation 
    if ( typeoftarget === "boolean" ) { 
        deep= target; 
        //Skip the boolean and the target 
        target= arguments[ i ] || {}; 
        i++; 
    } 
    // Handlecase when target is a string or something (possible in deep copy) 
    if ( typeoftarget !== "object" && !jQuery.isFunction(target) ) { 
        target= {}; 
    } 
    // ExtendjQuery itself if only one argument is passed 
    if ( i ===length ) { 
        target= this; 
        i--; 
    } 
    for ( ; i< length; i++ ) { 
        //Only deal with non-null/undefined values 
        if ((options = arguments[ i ]) != null ) { 
            //Extend the base object 
            for( name in options ) { 
                src= target[ name ]; 
                copy= options[ name ]; 
                //Prevent never-ending loop 
                if( target === copy ) { 
                   continue; 
                } 
                //Recurse if we&#39;re merging plain objects or arrays 
                if( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray= jQuery.isArray(copy)) ) ) { 
                   if( copyIsArray ) { 
                       copyIsArray= false; 
                       clone= src && jQuery.isArray(src) ? src : []; 
                   }else { 
                       clone= src && jQuery.isPlainObject(src) ? src : {}; 
                   } 
                   //Never move original objects, clone them 
                   target[name ] = jQuery.extend( deep, clone, copy ); 
                //Don&#39;t bring in undefined values 
                }else if ( copy !== undefined ) { 
                   target[name ] = copy; 
                } 
            } 
        } 
    } 
    // Returnthe modified object 
    return target; 
};

(1) Zuerst jQuery und sein Prototyp Die Implementierung der Methode „extend()“ verwendet dieselbe Funktion.

(2) Wenn in extension() nur ein Parameter vorhanden ist, wird dem jQuery-Objekt ein Plug-In hinzugefügt. Was in jQuery erweitert wird, wird als Tool-Methode bezeichnet. Was in jQuery.fn (jQuery-Prototyp) erweitert wird, ist eine Instanzmethode Tool-Methode. Verwenden Sie jQuery(). Instanzmethoden werden aufgerufen.

(3) Wenn in extension() mehrere Parameter vorhanden sind, werden die nachfolgenden Parameter auf den ersten Parameter erweitert.

var a={}; 
$.extend(a,{name:"hello"},{age:10}); 
console.log(a);//Object{name: "hello", age: 10}

(4) Flache Kopie (Standard):

var a={}; 
varb={name:"hello"}; 
$.extend(a,b); 
console.log(a);//Object{name: "hello"} 
a.name="hi"; 
console.log(b);//Object{name: "hello"}

b wird von a nicht beeinflusst, aber wenn ein Attribut in b ein Objekt ist:

var a={}; 
varb={name:{age:10}}; 
$.extend(a,b); 
console.log(a.name);//Object{age: 10} 
a.name.age=20; 
console.log(b.name);//Object{age: 20}

, da die flache Kopie nicht vervollständigt werden kann, b.name wird von a betroffen sein. Zu diesem Zeitpunkt möchten wir oft eine tiefe Kopie erstellen.

Deep copy:

var a={}; 
varb={name:{age:10}}; 
$.extend(true,a,b); 
console.log(a.name);//Object{age: 10} 
a.name.age=20; 
console.log(b.name);//Object{age: 10}

b.name ist nicht von a betroffen .

 var a={name:{job:"Web Develop"}}; 
var b={name:{age:10}}; 
$.extend(true,a,b); 
console.log(a.name);//age: 10 job: "Web Develop"

  //b.name没有覆盖a.name.job。

Verwandte Empfehlungen:

Zusammenfassung zur Verwendung von extension() in jQuery

Vergleich und Verwendung von clone() und extension() in jQuery

jQuery $ .extend() Verwendung example_jquery

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von jQuery extend(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!