当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery jQuery.extend()用法及代码示例


用法 
jQuery.extend( target, object1 [, objectN ] ) => Object

说明：将两个或多个对象的内容合并到第一个对象中。

  • 添加的版本：1.0jQuery.extend( target, object1 [, objectN ] )

    • target
      类型：Object
      将接收新属性的对象。
    • object1
      类型：Object
      包含要合并的其他属性的对象。
    • objectN
      类型：Object
      包含要合并的属性的其他对象。

  • 添加的版本：1.1.4jQuery.extend( [deep ], target, object1 [, objectN ] )

    • deep
      类型：Boolean
      如果为真，则合并变为递归(又名深拷贝)。不支持为此参数传递 false。
    • target
      类型：Object
      要扩展的对象。它将接收新属性。
    • object1
      类型：Object
      包含要合并的其他属性的对象。
    • objectN
      类型：Object
      包含要合并的属性的其他对象。

  • 添加的版本：1.0jQuery.extend( object )

    • object
      类型：Object
      要合并到 jQuery 命名空间的对象。

当向 $.extend() 提供两个或更多对象参数时，所有对象的属性都将添加到目标对象。 null 或 undefined 的参数将被忽略。

如果仅向 $.extend() 提供了一个参数，则意味着省略了目标参数。在这种情况下，jQuery 对象本身被假定为目标。通过这样做，您可以将新函数添加到 jQuery 命名空间。这对于希望向 JQuery 添加新方法的插件作者很有用。

请记住，目标对象(第一个参数)将被修改，并且也将从 $.extend() 返回。但是，如果您想保留两个原始对象，可以通过传递一个空对象作为目标来实现：

var object = $.extend({}, object1, object2);

$.extend() 执行的合并默认不是递归的；如果第一个对象的属性本身是一个对象或数组，它将被第二个或后续对象中具有相同键的属性完全覆盖。值不会合并。这可以通过检查香蕉的值在下面的示例中看到。但是，通过为第一个函数参数传递true，对象将被递归合并。

警告: 3.4 之前的版本在调用时存在安全问题jQuery.extend(true, {}, object)在包含__proto__属性将延长Object.prototype.

警告: 通过false不支持第一个参数。

未定义的属性不会被复制。但是，从对象的原型 will 继承的属性会被复制过来。通过 new MyCustomObject(args) 或内置 JavaScript 类型(如 Date 或 RegExp)构造的属性不会重新构造，并将在结果对象或数组中显示为普通对象。

在deep 扩展中，对象和数组是扩展的，但基本类型(如字符串、布尔值和数字)上的对象包装器不是。 Deep-extending 循环数据结构会导致错误。

对于不属于此行为的需求，请改为编写自定义扩展方法，或使用 lodash 之类的库。

例子：

合并两个对象，修改第一个。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.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 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
 
</body>
</html>

演示：

递归合并两个对象，修改第一个。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.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 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
 
</body>
</html>

演示：

合并默认值和选项，而不修改默认值。这是一种常见的插件开发模式。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.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 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
</script>
 
</body>
</html>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 jQuery.extend()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。