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

265 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>