返回值:ObjectjQuery.extend(target, [object1], [objectN])
将两个或多个对象的内容合并到第一个对象中。
-
1.0 新增jQuery.extend(target, [object1], [objectN])
target (Object) 如果传入了其它额外的参数对象,那么本参数是用于接收新属性的对象。如果该参数是唯一的参数,那么将用于扩展 jQuery 命名空间。object1 (Object) 可选参数,将要被合并的包含额外属性的对象。objectN (Object) 可选参数,可选的对象,包含将要被合并的属性。 -
1.1.4 新增jQuery.extend([deep], target, object1, [objectN])
deep (Boolean) 可选参数,如果该参数为 true,那么将进行递归合并(也就是深拷贝)。target (Object) 用于扩展的对象。用于接收新的属性。object1 (Object) 将要被合并的包含额外属性的对象。objectN (Object) 可选参数,可选的对象,包含将要被合并的属性。
当我们向 $.extend()
中传入两个或更多对象时,那么这些对象中的所有属性都会被合并到 target 参数中。
如果只向 $.extend()
中提供了一个参数,那意味着将忽略 target 参数。在这种情况下,jQuery 对象本身会被当成是 target 参数。如果这样做的话,我们可以向 jQuery 名字空间中添加新的函数。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
值得注意的是,target 对象(即第一个参数)是会被修改的,并且该对象将作为 $.extend()
的返回值。如果我们想保留原始的对象,不希望它被修改的话,我们可以将空对象作为 target 对象:
var object = $.extend({}, object1, object2);
默认情况下,$.extend()
的合并操作并不是递归进行的。如果第一个对象的属性本身就是一个对象或数组,那么它将被第二个对象中含有相同键的属性所覆盖,但是值是不会被合并的。可以通过检查下面例子中 banana 的值,就可以了解这一点。然而,如果将 true
作为该函数的第一个参数,那么会在对象上进行递归的合并。(不支持将 false
作为函数的第一个参数。)
未定义的属性是不会被拷贝的。但是,如果属性是继承自对象的 prototype 的话,是会被拷贝的。若属性是通过构造函数 new MyCustomObject(args)
进行赋值的,或通过内建的 JavaScript 类型,例如,Date 或 RegExp 进行赋值的话,是不会被重新创建的,并且会被当作简单对象出现在结果对象或数组中。
(原文如下: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.)
若设置了 deep
参数,对象和数组也会被合并进来,但如果对象是通过基本类型(例如,String, Boolean, 和 Number)包裹的话是不会被合并进来的。
(原文如下:On a deep
extend, Object and Array are extended, but object wrappers on primitive types such as String, Boolean, and Number are not.)
若要满足其它不同于该行为的需求,可以编写一个自定义的扩展方法。
示例:
合并两个对象,并修改第一个对象。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
/* merge object2 into object1 */
$.extend(object1, object2);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
};
$("#log").append( printObj(object1) );
</script>
</body>
</html>
演示:
示例:
采用递归方式合并两个对象,并修改第一个对象。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
/* merge object2 into object1, recursively */
$.extend(true, object1, object2);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
};
$("#log").append( printObj(object1) );
</script>
</body>
</html>
演示:
示例:
合并 defaults 和 options 对象,并且不修改 defaults 对象。这是常用的插件开发模式。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
/* merge defaults and options, without modifying defaults */
var settings = $.extend({}, defaults, options);
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push( next );
});
return "{ " + arr.join(", ") + " }";
};
$("#log").append( "<div><b>defaults -- </b>" + printObj(defaults) + "</div>" );
$("#log").append( "<div><b>options -- </b>" + printObj(options) + "</div>" );
$("#log").append( "<div><b>settings -- </b>" + printObj(settings) + "</div>" );
</script>
</body>
</html>