代码改变世界

大虾翻译（一）：jQuery.extend()

2015-10-26 20:33  刘大虾6  阅读(443)  评论(0)  编辑  收藏  举报

　　

　　本文是在JavaScript之三里面链接内容的中文翻译。我会尽可能做到信达雅且保持作者原意不变，OK，let's Go!

　　

　　jQuery.extend(target,[object1],[objectN])

　　jQuery.extend(目标对象，对象1，对象N)

　　　　概述：合并2个或以上的对象属性到第一个对象上。(此处的意思就是将对象1对象N的属性合并到目标对象上，这里是直译的)

　　　　　　　jQuery.extend(目标对象，对象1，对象N)

　　　　　　　　　目标对象：

　　　　　　　　　类型：object

　　　　　　　　　接收传进来的其他对象的属性或者当它是唯一参数时，扩展jQuery命名空间  

　　　　　　　　　对象1

　　　　　　　　　类型：object

　　　　　　　　　包含要合并的额外属性

　　　　　　　　　对象N

　　　　　　　　　类型：object

　　　　　　　　　包含要合并的额外属性

　　　　　　　jQuery.extend([deep]，目标对象，对象1，[对象N])　　

　　　　　　　　　对象1

　　　　　　　　　类型：Boolean

　　　　　　　　　如果为true,则变为递归合并(又叫深度复制 [deep copy])

　　　　　　　　　目标对象：

　　　　　　　　　类型：object

　　　　　　　　　被扩展对象，接收新属性

　　　　　　　　　对象1

　　　　　　　　　类型：object

　　　　　　　　　包含要合并的额外属性

　　　　　　　　　对象N

　　　　　　　　　类型：object

　　　　　　　　　包含要合并的额外属性

　　当2个或更多对象参数被添加到$.extend()里面时，所有这些对象的属性都会被合并到目标对象，如果参数为null或undefined时，则会被忽略。

　　如果$.extend()里只有1个参数，则意味着目标对象被省略了，在此种情况下，jQUery对象本身会被当做目标对象。这样的话，你可以添加新方法到jQUery命名空间内，这对想要给jQUery添加新方法的插件开发者来说非常有用。

　　注意：目标对象将会被修改然后被返回，但如果你想保留所有的初始对象，可以传递一个{}作为目标对象。//见最后一个例子

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

　　通过$.extend()执行的合并默认情况下是非递归的，但如果前一个对象的属性本身是array或object类型，那么这个属性就会被第二个以及随后的具有同属性名的对象重写，他们的值不会合并，这在下面的例子中通过检查banana的值可以看到。但如果第一个方法参数传递的是true，则将会被递归合并。

　　注意：不支持传递false给第一个参数。

　　未定义属性不会被复制，但从原型中继承过来的属性则可以被复制，通过构造函数或者JavaScript类型比如 Date or RegExp创建的对象的属性不会被重建，而且将作为结果对象或数组的简单对象。

　　在深度扩展中，Object 和 Array将会被扩展，但原始类型封装的对象比如 String, Boolean, 和 Number则不会，深度扩展周期数据结构将会导致错误。

　　如果有超出这些方法的需求，只能用自定义方法来替代，或者是使用一个像lodash那样的库。

　　

　　案例：

　　合并2个对象，修改第一个对象

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>jQuery.extend demo</title>
 6   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 7 </head>
 8 <body>
 9  
10 <div id="log"></div>
11  
12 <script>
13 var object1 = {
14   apple: 0,
15   banana: { weight: 52, price: 100 },
16   cherry: 97
17 };
18 var object2 = {
19   banana: { price: 200 },
20   durian: 100
21 };
22  
23 // Merge object2 into object1
24 $.extend( object1, object2 );
25  
26 // Assuming JSON.stringify - not available in IE<8
27 $( "#log" ).append( JSON.stringify( object1 ) );
28 </script>
29  
30 </body>
31 </html>

Demo：

{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

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

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>jQuery.extend demo</title>
 6   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 7 </head>
 8 <body>
 9  
10 <div id="log"></div>
11  
12 <script>
13 var object1 = {
14   apple: 0,
15   banana: { weight: 52, price: 100 },
16   cherry: 97
17 };
18 var object2 = {
19   banana: { price: 200 },
20   durian: 100
21 };
22  
23 // Merge object2 into object1, recursively
24 $.extend( true, object1, object2 );
25  
26 // Assuming JSON.stringify - not available in IE<8
27 $( "#log" ).append( JSON.stringify( object1 ) );
28 </script>
29  
30 </body>
31 </html>

Demo：

{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

　　合并默认值和设置值，且不修改默认值，这也是常见的插件开发类型。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>jQuery.extend demo</title>
 6   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 7 </head>
 8 <body>
 9  
10 <div id="log"></div>
11  
12 <script>
13 var defaults = { validate: false, limit: 5, name: "foo" };
14 var options = { validate: true, name: "bar" };
15  
16 // Merge defaults and options, without modifying defaults
17 var settings = $.extend( {}, defaults, options );
18  
19 // Assuming JSON.stringify - not available in IE<8
20 $( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
21 $( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
22 $( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
23 </script>
24  
25 </body>
26 </html>

Demo：

defaults -- {"validate":false,"limit":5,"name":"foo"}
options -- {"validate":true,"name":"bar"}
settings -- {"validate":true,"limit":5,"name":"bar"}