How does extend() work in jQuery?

问题:

I saw this in a plugin:

var options = $.extend(defaults, options);  

How does it work?

What does extend() do?

回答1:

Multiple Parameters

The documentation isn't precise in explaining how extend works, so I ran a little test:

var a = {foo: 1, bar: 1}; var b = {foo: 2, baz: 2}; var c = {foo: 3}; var r = jQuery.extend(a,b,c); console.log("A: Foo=" + a.foo + " Bar=" + a.bar + " Baz=" + a.baz); console.log("B: Foo=" + b.foo + " Bar=" + b.bar + " Baz=" + b.baz); console.log("C: Foo=" + c.foo + " Bar=" + c.bar + " Baz=" + c.baz); console.log("R: Foo=" + r.foo + " Bar=" + r.bar + " Baz=" + r.baz); console.log("A === R?: " + (a === r)); 

(The console.log function is intended to work in Firebug; replace it with alert() or some other output function if you like).

The results are:

A: Foo=3 Bar=1 Baz=2 B: Foo=2 Bar=undefined Baz=2 C: Foo=3 Bar=undefined Baz=undefined R: Foo=3 Bar=1 Baz=2 A === R?: true 

By this we can see that jQuery.extend():

• Starts with the object provided by the first parameter.
• Adds to it any property in the second parameter. If the property already exists in the first parameter, it is overwritten. The object for the second parameter is unchanged.
• Repeats the above with any subsequent parameter.
• Returns the first parameter.

This is useful for combining user and default option-objects together to get a complete set of options:

function foo(userOptions) {   var defaultOptions = {     foo: 2,     bar: 2   };   var someOtherDefaultOptions = {     baz: 3   };    var allOptions = jQuery.extend(     defaultOptions,     someOtherDefaultOptions,     userOptions   );   doSomething(allOptions); }  foo({foo:1, baz:1}); 

Note that "null" is a valid value for overwriting, but "undefined" isn't. You might be able to make use of this.

var a = {foo: "a", bar: "a"}; var b = {foo: null, bar: undefined}; jQuery.extend(a,b); console.log("A: Foo=" + a.foo + " Bar=" + a.bar); 

Results in:

A: Foo=null Bar=a 

Single Parameter

If you pass just one object to jQuery.extend(), then jQuery assumes that the jQuery object itself is the "first" parameter (ie: the one to be modified), and your object is the "second" (ie: the one to add to the first). So:

console.log( "Before: " + jQuery.foo ); jQuery.extend({foo:1}); console.log( "After: " + jQuery.foo ); 

Results in:

Before: undefined After: 1 

回答2:

From jQuery Documentation

Merge the contents of two or more objects together into the first object.

In a plugin context: If the user does not set the optional parameters for the function, then a default value will be used instead.

回答3:

It merges the content of one object to another. If we pass two objects, second object properties are added to the first object / first parameter

Ex: $.extend(object1, object2); 

Now object1 contains properties of object2

If we want to merge two objects, then we need to pass empty object in the first parameter

Ex: var newObject = $.extend({}, object1, object2); 

Now newObject contains both properties of object1 and object2.

回答4:

There's a perfect example on the jQuery Documentation : .extend() method

回答5:

How does extend() work in jQuery? [Resolved]

jQuery have deep copy and light copy. The first boolean decide it, true for deep and false for light.

For example:

• jQuery.extend(false, {'a' : {'a1': 1}}, {'a': {'a2': 2}})

  the result will be: {'a': {'a2': 2}} because this is light copy just compare level 1.

  

• jQuery.extend(true, {'a' : {'a1': 1}}, {'a': {'a2': 2}})

  the result will be: {'a': {'a1': 1, 'a2': 2}} This is deep copy with many level of object (just like level of array)

  

• jQuery.extend(a,b,c) with a, b, c is object or array. The flow overrite will be b->a, c ->a (b overrite a, c override a ...) this function will return a and a also change value too.

Advanced Examples:

• jQuery.extend({'number_param': 1})

  In case you just pass one param. jQuery will extend itself. console.log(jQuery['number_param']) will output 1.

  

• jQuery.extend(1, {'number_param': '2'}); This example is not append jQuery itself. The first parameter must be boolean. In this case it will return {'number_param': '2'} and jQuery not get updated.

  

• jQuery.extend(a, b, c, d ,e , f); The order merge will be . b ->a , c -> a, d -> a, e -> a, f ->a (b override a, c override a ...) . And result return will be a.

  with a= {'p': 1}. jQuery.extend(a, {'p': 2},{'p': 3},{'p': 4},{'p': 5}) will return a, and a = {'p': 6}. The number parameters pass to this function is unlimited.

  

回答6:

The purpose is to extend an existing object. For e.g. if we have a template object and we want to extend that by adding more properties or override existing properties, jquery extend can be useful.

var carObjectTemplate = { "make": "honda", "model":"city", "mileage":"20", "variant":"petrol" 

};

now if we want to extend it, $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); it will give us ouput, extending carObjectTemplate and adding

{"color":"red"} property and overriding "model" property from "city" to "amaze" 

first boolean parameter true/false is to indicate if we need a deep or shallow copy

回答7:

It does exactly this

Description: Merge the contents of two or more objects together into the first object.

More at jQuery.extend()

回答8:

To answer "How does it work?" - which no one here has tried to do.

Here is a very simplified version.

function extend ( target, src ) {     // convert all arguments ( even those unseen in the function arity )     // to an array     var args = Array.prototype.slice.call ( arguments ),         deep = false;      if ( typeof target === 'boolean' && target === true ) {         // recursive copy          // remove deep copy flag from the arguments list         deep = args.shift ();          // copy to the original target         target = args.shift ();     }      for ( var i = 0, l = args.length; i 

Here is up to date source for the actual method

文章来源: How does extend() work in jQuery?