當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。