uTools-Manuals/docs/jQuery/jQuery.extend.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.extend()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/utilities/">工具类</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.extend/" target="_blank">jQuery.extend()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-extend1"><h2 class="section-title">
<span class="name">jQuery.extend( target [, object1 ] [, objectN ] )</span><span class="returns">返回: <a href="/Types/#Object">Object</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>将两个或更多对象的内容合并到第一个对象。</p>
<ul class="signatures">
<li class="signature" id="jQuery-extend-target-object1-objectN">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery.extend( target [, object1 ] [, objectN ] )</h4>
<ul>
<li>
<div><strong>target</strong></div>
<div>类型: <a href="/Types/#Object">Object</a>
</div>
<div> 一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。</div>
</li>
<li>
<div><strong>object1</strong></div>
<div>类型: <a href="/Types/#Object">Object</a>
</div>
<div>一个对象，它包含额外的属性合并到第一个参数</div>
</li>
<li>
<div><strong>objectN</strong></div>
<div>类型: <a href="/Types/#Object">Object</a>
</div>
<div>包含额外的属性合并到第一个参数</div>
</li>
</ul>
</li>
<li class="signature" id="jQuery-extend-deep-target-object1-objectN">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.1.4/">1.1.4</a></span>jQuery.extend(  [deep ], target, object1 [, objectN ] )</h4>
<ul>
<li>
<div><strong>deep</strong></div>
<div>类型: <a href="/Types/#Boolean">Boolean</a>
</div>
<div>如果是true，合并成为递归（又叫做深拷贝）。</div>
</li>
<li>
<div><strong>target</strong></div>
<div>类型: <a href="/Types/#Object">Object</a>
</div>
<div>对象扩展。这将接收新的属性。</div>
</li>
<li>
<div><strong>object1</strong></div>
<div>类型: <a href="/Types/#Object">Object</a>
</div>
<div>一个对象，它包含额外的属性合并到第一个参数.</div>
</li>
<li>
<div><strong>objectN</strong></div>
<div>类型: <a href="/Types/#Object">Object</a>
</div>
<div>包含额外的属性合并到第一个参数</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>当我们提供两个或多个对象给<code>$.extend()</code>，对象的所有属性都添加到目标对象（target参数）。</p>
<p>如果只有一个参数提供给<code>$.extend()</code>，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。</p>
<p>请记住，目标对象（第一个参数）将被修改，并且将通过<code>$.extend()</code>返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> object = $.extend({}, object1, object2);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>在默认情况下，通过<code>$.extend()</code>合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。可以通过检查下面例子中 banana 的值，就可以了解这一点。然而，如果将 <code>true</code> 作为该函数的第一个参数，那么会在对象上进行递归的合并。</p>
<p><strong>警告</strong>:不支持第一个参数传递 <code>false</code> 。</p>
<p>未定义的属性不会被复制。然而，从对象原型的继承属性<em>将</em>被复制。如果属性（Properties）是一个通过构造函数<code>new MyCustomObject(args)</code>定义的，或JavaScript中内置类型，如Date 或 RegExp，是不会重新创建的，并且将被当作普通的对象出在返回的对象或数组中。</p>
<p>若设置了 <code>deep</code> 参数，对象和数组也会被合并进来，但是对象包裹的原始类型，比如String, Boolean, 和 Number是不会被合并进来的。</p>
<p>若要满足其它不同于该行为的需求，编写自定义的扩展方法代替。 </p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">合并两个对象，并修改第一个对象。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"log"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> object1 = {</code></div></div><div class="container"><div class="line"><code>  apple: <span class="number">0</span>,</code></div></div><div class="container"><div class="line"><code>  banana: {weight: <span class="number">52</span>, price: <span class="number">100</span>},</code></div></div><div class="container"><div class="line"><code>  cherry: <span class="number">97</span></code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> object2 = {</code></div></div><div class="container"><div class="line"><code>  banana: {price: <span class="number">200</span>},</code></div></div><div class="container"><div class="line"><code>  durian: <span class="number">100</span></code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">/* merge object2 into object1 */</span></code></div></div><div class="container"><div class="line"><code>$.extend(object1, object2);</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> printObj = <span class="keyword">typeof</span> JSON != <span class="string">"undefined"</span> ? JSON.stringify : <span class="keyword">function</span>(obj) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> arr = [];</code></div></div><div class="container"><div class="line"><code>  $.each(obj, <span class="keyword">function</span>(key, val) {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> next = key + <span class="string">": "</span>;</code></div></div><div class="container"><div class="line"><code>    next += $.isPlainObject(val) ? printObj(val) : val;</code></div></div><div class="container"><div class="line"><code>    arr.push( next );</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> <span class="string">"{ "</span> +  arr.join(<span class="string">", "</span>) + <span class="string">" }"</span>;</code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#log"</span>).append( printObj(object1) );</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">采用递归方式合并两个对象，并修改第一个对象。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"log"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> object1 = {</code></div></div><div class="container"><div class="line"><code>  apple: <span class="number">0</span>,</code></div></div><div class="container"><div class="line"><code>  banana: {weight: <span class="number">52</span>, price: <span class="number">100</span>},</code></div></div><div class="container"><div class="line"><code>  cherry: <span class="number">97</span></code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> object2 = {</code></div></div><div class="container"><div class="line"><code>  banana: {price: <span class="number">200</span>},</code></div></div><div class="container"><div class="line"><code>  durian: <span class="number">100</span></code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">/* merge object2 into object1, recursively */</span></code></div></div><div class="container"><div class="line"><code>$.extend(<span class="literal">true</span>, object1, object2);</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> printObj = <span class="keyword">typeof</span> JSON != <span class="string">"undefined"</span> ? JSON.stringify : <span class="keyword">function</span>(obj) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> arr = [];</code></div></div><div class="container"><div class="line"><code>  $.each(obj, <span class="keyword">function</span>(key, val) {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> next = key + <span class="string">": "</span>;</code></div></div><div class="container"><div class="line"><code>    next += $.isPlainObject(val) ? printObj(val) : val;</code></div></div><div class="container"><div class="line"><code>    arr.push( next );</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> <span class="string">"{ "</span> +  arr.join(<span class="string">", "</span>) + <span class="string">" }"</span>;</code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#log"</span>).append( printObj(object1) );</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">合并 defaults 和 options 对象，并且不修改 defaults 对象。这是常用的插件开发模式。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"log"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> defaults = { validate: <span class="literal">false</span>, limit: <span class="number">5</span>, name: <span class="string">"foo"</span> };</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> options = { validate: <span class="literal">true</span>, name: <span class="string">"bar"</span> };</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">/* merge defaults and options, without modifying defaults */</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> settings = $.extend({}, defaults, options);</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> printObj = <span class="keyword">typeof</span> JSON != <span class="string">"undefined"</span> ? JSON.stringify : <span class="keyword">function</span>(obj) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> arr = [];</code></div></div><div class="container"><div class="line"><code>  $.each(obj, <span class="keyword">function</span>(key, val) {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> next = key + <span class="string">": "</span>;</code></div></div><div class="container"><div class="line"><code>    next += $.isPlainObject(val) ? printObj(val) : val;</code></div></div><div class="container"><div class="line"><code>    arr.push( next );</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> <span class="string">"{ "</span> +  arr.join(<span class="string">", "</span>) + <span class="string">" }"</span>;</code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#log"</span>).append( <span class="string">"&lt;div&gt;&lt;b&gt;defaults -- &lt;/b&gt;"</span> + printObj(defaults) + <span class="string">"&lt;/div&gt;"</span> );</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#log"</span>).append( <span class="string">"&lt;div&gt;&lt;b&gt;options -- &lt;/b&gt;"</span> + printObj(options) + <span class="string">"&lt;/div&gt;"</span> );</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#log"</span>).append( <span class="string">"&lt;div&gt;&lt;b&gt;settings -- &lt;/b&gt;"</span> + printObj(settings) + <span class="string">"&lt;/div&gt;"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>