Home>

Jquery extend () detailed explanation and simple examples

When you use jquery, you will find thatSome functions in jquery are used like this:

$.get ();
$.post ();
$.getjson ();

Some functions are used like this:

$("div"). css ();
$("ul"). find ("li");

Some functions are used like this:

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

There are two concepts involved here:tool methods and instance methods.In general, a tool method is a function that can be called without instantiation.Such as the first piece of code;Instance methods are functions that must be instantiated after the object is instantiated.Such as the second piece of code.Many methods in jquery are both instance methods and tool methods.It's just a slightly different way of calling,Such as the third piece of code.In order to more clearly explain the tool methods and instance methods in javascript,Test as follows.

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

It can be concluded through the above tests,Defined in the prototype are instance methods,The utility method is directly added in the constructor;Instance methods cannot be called by constructors,Similarly, a tool method cannot be called by an instance.

Of course, instance methods can not only be defined in prototypes,There are three methods of definition:

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

The priority of these three methods is:the variables defined directly on the instance have higher priority than those defined on "this", and the variables defined on "this" are higher than those defined by prototype.That is, variables defined directly on the instance will override variables defined on "this" and prototype,Variables defined on "this" override the prototype definition.

Look at the source of the extend () method in 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 "re merging plain objects or arrays
                if (deep &© &&(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 "t bring in undefined values
                } else if (copy! == undefined) {
                   target [name]=copy;
                }
            }
        }
    }
    //return the modified object
    return target;
};

(1) First, the same function used by the implementation of the extend () method in jquery and its prototype.

(2) When there is only one parameter in extend (),Add plugins for jquery objects.Extensions to jquery are called utility methods,Instance methods are extended in jquery.fn (jquery prototype),Even extending functions with the same name on jquery and prototype will work,Using jquery objects will call utility methods,Using jquery () will call the instance method.

(3) When there are multiple parameters in extend (),Subsequent parameters are extended to the first parameter.

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

(4) Shallow copy (default):

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

b is not affected by a, but if an attribute in b is an object:

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}

Since shallow copy could not be completed,Then b.name will be affected by a. At this time, we often want a deep copy.

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 is not affected by a.

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 does not override a.name.job.
  • Previous windowclose ();A summary of the JavaScript code for closing the browser window
  • Next C # method to embed dos form in Form