jQuery extend
https://api.jquery.com/jquery.extend/
jQuery.extend( target [, object1 ] [, objectN ] )
Description: Merge the contents of two or more objects together into the first object.
-
targetType: ObjectAn object that will receive the new properties if additional objects are passed in or that will extend the jQuery namespace if it is the sole argument.
-
object1Type: ObjectAn object containing additional properties to merge in.
-
objectNType: ObjectAdditional objects containing properties to merge in.
jQuery.extend( [deep ], target, object1 [, objectN ] )
-
deepType: BooleanIf true, the merge becomes recursive (aka. deep copy). Passing
false
for this argument is not supported. -
targetType: ObjectThe object to extend. It will receive the new properties.
-
object1Type: ObjectAn object containing additional properties to merge in.
-
objectNType: ObjectAdditional objects containing properties to merge in.
When two or more object arguments are supplied to $.extend()
, properties from all of the objects are added to the target object. Arguments that are null
or undefined
are ignored.
If only one argument is supplied to $.extend()
, this means the target argument was omitted. In this case, the jQuery object itself is assumed to be the target. By doing this, you can add new functions to the jQuery namespace. This can be useful for plugin authors wishing to add new methods to JQuery.
Keep in mind that the target object (first argument) will be modified, and will also be returned from $.extend()
. If, however, you want to preserve both of the original objects, you can do so by passing an empty object as the target:
1
|
var object = $.extend({}, object1, object2); |
The merge performed by $.extend()
is not recursive by default;
if a property of the first object is itself an object or array, it will be completely overwritten by a property with the same key in the second or subsequent object. The values are not merged.
This can be seen in the example below by examining the value of banana. However, by passing true
for the first function argument, objects will be recursively merged.
Warning: Passing false
for the first argument is not supported.
Undefined properties are not copied. However, properties inherited from the object's prototype will be copied over. Properties that are an object constructed via new MyCustomObject(args)
, or built-in JavaScript types such as Date or RegExp, are not re-constructed and will appear as plain Objects in the resulting object or array.
On a deep
extend, Object and Array are extended, but object wrappers on primitive types such as String, Boolean, and Number are not. Deep-extending a cyclical data structure will result in an error.
For needs that fall outside of this behavior, write a custom extend method instead, or use a library like lodash.
https://github.com/jquery-validation/jquery-validation/blob/master/src/core.js#L230
// Constructor for validator $.validator = function( options, form ) { this.settings = $.extend( true, {}, $.validator.defaults, options ); this.currentForm = form; this.init(); };
How to extend jQuery plugin's methods?
Edit: I'm changing my answer. This may be the simpler solution, since it requires less code change. Add methods
as a property of your plugin. Add this line after you define your plugin function:
$.fn.test.methods = methods;
This needs to be inside your closure that defines the plugin. The rest of your code should just work, extending test
via $.extend()
as you are already doing.
Here's my original answer:
If you want to be able to extend your plugin in this way, your plugin must expose a way to do so. You could add methods
as a property in settings
and then deeply extend settings.methods
with options.methods
in your init
method.
If you intend for settings
to be the defaults, and options
to override settings, you've got your arguments reversed in your call to .extend()
. Reverse your arguments, then add true
as the first parameter to make it a deep extend:
options = $.extend(true, {}, settings, options);
Then put your methods in settings
:
var settings = {
bg: "white",
methods: {
init: function(options) {
options = $.extend(true, {}, settings, options);
... // etc.
},
...
}
};
Then, instead of extending your plugin's methods via $.extend()
, do it in your init
call:
$(".foo").test("init", { methods: methods });
https://api.jquery.com/jQuery.fn.extend/