Explication détaillée de jQuery extend()

Cet article vous présente principalement l'explication détaillée et des exemples simples de jQuery extend(). Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Explication détaillée et exemples simples de jQuery extend()

Lorsque vous utilisez jQuery, vous constaterez que certaines fonctions de jQuery sont utilisées comme ceci :

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

Certaines fonctions sont utilisées comme ceci :

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

Certaines fonctions sont utilisées comme ceci :

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

Deux concepts sont impliqués ici : les méthodes outils et les méthodes d'instance. Habituellement, les méthodes outils dont nous parlons font référence à des fonctions qui peuvent être appelées sans instanciation, comme le premier morceau de code. Les méthodes d'instance sont des fonctions qui ne peuvent être appelées qu'après l'instanciation de l'objet, comme le deuxième morceau de code. De nombreuses méthodes dans jQuery sont à la fois des méthodes d'instance et des méthodes d'outil, mais les méthodes d'appel sont légèrement différentes, comme le troisième morceau de code. Afin d'expliquer plus clairement les méthodes outils et les méthodes d'instance en JavaScript, le test suivant est effectué.

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

Grâce au test ci-dessus, on peut conclure que la méthode d'instance est définie dans le prototype et que la méthode outil est ajoutée directement dans le constructeur ; Les méthodes d'instance ne peuvent pas être appelées à partir de constructeurs, et de même, les méthodes utilitaires ne peuvent pas être appelées à partir d'instances.

Bien sûr, les méthodes d'instance ne peuvent pas être définies uniquement dans des prototypes, il existe les trois méthodes de définition suivantes :

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

Ces trois priorités de la méthode sont les suivantes : les variables définies directement sur l'instance ont une priorité plus élevée que celles définies sur "this", et les variables définies sur "this" sont supérieures aux variables définies par le prototype. Autrement dit, les variables définies directement sur l'instance écraseront les variables définies sur « ceci » et le prototype, et les variables définies sur « ceci » écraseront les variables définies sur le prototype.

Regardons le code source de la méthode extend() dans jQuery :

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) Tout d'abord, jQuery et son prototype L'implémentation de la méthode extend() utilise la même fonction.

(2) Lorsqu'il n'y a qu'un seul paramètre dans extend(), un plug-in est ajouté à l'objet jQuery. Ce qui est étendu sur jQuery est appelé une méthode outil. Ce qui est étendu dans jQuery.fn (prototype jQuery) est une méthode d'instance Même si vous étendez une fonction du même nom sur jQuery et le prototype, l'utilisation d'un objet jQuery appellera le. Méthode d'outil. Utilisez jQuery() Les méthodes d'instance seront appelées.

(3) Lorsqu'il y a plusieurs paramètres dans extend(), les paramètres suivants sont étendus au premier paramètre.

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

(4) Copie superficielle (par défaut) :

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

b n'est pas affecté par a, mais si un attribut dans b est un objet :

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}

car la copie superficielle ne peut pas être complétée, b.name sera affecté par un A ce moment, nous souhaitons souvent faire une copie complète.

Copie complète :

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 n'est pas affecté par un .

 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。

Recommandations associées :

Résumé sur l'utilisation de extend() dans jQuery

Comparaison et utilisation de clone() et extend() dans jQuery

jQuery $ Utilisation de .extend() example_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!