mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2026-02-27 17:44:35 +08:00
语法高亮，滚动条美化，设置页面调整
This commit is contained in:
fofolee
@@ -5,7 +5,7 @@
|
||||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/function-apply.html" width="100%"></iframe></div>
|
||||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code><em>func</em>.apply(<em>thisArg</em><em>, [</em><em>argsArray</em>])</code></pre>
|
||||
<pre><code class="language-javascript"><code><em>func</em>.apply(<em>thisArg</em><em>, [</em><em>argsArray</em>])</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>thisArg</code></dt>
|
||||
@@ -27,14 +27,14 @@
|
||||
<h3 id="用_apply_将数组添加到另一个数组">用 <code>apply</code> 将数组添加到另一个数组</h3>
|
||||
<p>我们可以使用<code>push</code>将元素追加到数组中。并且，因为push接受可变数量的参数，我们也可以一次推送多个元素。但是，如果我们传递一个数组来推送，它实际上会将该数组作为单个元素添加，而不是单独添加元素，因此我们最终得到一个数组内的数组。如果那不是我们想要的怎么办？在这种情况下，<code>concat</code>确实具有我们想要的行为，但它实际上并不附加到现有数组，而是创建并返回一个新数组。 但是我们想要附加到我们现有的阵列......那么现在呢？ 写一个循环？当然不是吗？</p>
|
||||
<p><code>apply</code>来帮你！</p>
|
||||
<pre class="brush: js">var array = ['a', 'b'];
|
||||
<pre><code class="language-javascript">var array = ['a', 'b'];
|
||||
var elements = [0, 1, 2];
|
||||
array.push.apply(array, elements);
|
||||
console.info(array); // ["a", "b", 0, 1, 2]
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="apply_and_built-in_functions" name="apply_and_built-in_functions">使用<code>apply</code>和内置函数</h3>
|
||||
<p>聪明的apply用法允许你在某些本来需要写成遍历数组变量的任务中使用内建的函数。在接下里的例子中我们会使用Math.max/Math.min来找出一个数组中的最大/最小值。</p>
|
||||
<pre class="brush: js">/* 找出数组中最大/小的数字 */
|
||||
<pre><code class="language-javascript">/* 找出数组中最大/小的数字 */
|
||||
var numbers = [5, 6, 2, 3, 7];
|
||||
|
||||
/* 应用(apply) Math.min/Math.max 内置函数完成 */
|
||||
@@ -49,10 +49,10 @@ for (var i = 0; i < numbers.length; i++) {
|
||||
max = numbers[i];
|
||||
if (numbers[i] < min)
|
||||
min = numbers[i];
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<p>但是当心：如果用上面的方式调用<code>apply</code>，会有超出JavaScript引擎的参数长度限制的风险。当你对一个方法传入非常多的参数（比如一万个）时，就非常有可能会导致越界问题, 这个临界值是根据不同的 JavaScript 引擎而定的（JavaScript 核心中已经做了硬编码 <a class="external link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797" rel="noopener"> 参数个数限制在65536</a>），因为这个限制（实际上也是任何用到超大栈空间的行为的自然表现）是未指定的. 有些引擎会抛出异常。更糟糕的是其他引擎会直接限制传入到方法的参数个数，导致参数丢失。举个例子：如果某个引擎限制了方法参数最多为4个（实际真正的参数个数限制当然要高得多了, 这里只是打个比方）, 上面的代码中, 真正通过 <code>apply</code>传到目标方法中的参数为 <code>5, 6, 2, 3</code> 而不是完整的数组。</p>
|
||||
<p>如果你的参数数组可能非常大，那么推荐使用下面这种策略来处理：将参数数组切块后循环传入目标方法：</p>
|
||||
<pre class="brush: js">function minOfArray(arr) {
|
||||
<pre><code class="language-javascript">function minOfArray(arr) {
|
||||
var min = Infinity;
|
||||
var QUANTUM = 32768;
|
||||
|
||||
@@ -65,43 +65,43 @@ for (var i = 0; i < numbers.length; i++) {
|
||||
}
|
||||
|
||||
var min = minOfArray([5, 6, 2, 3, 7]);
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Using_apply_to_chain_constructors" name="Using_apply_to_chain_constructors">使用apply来链接构造器</h3>
|
||||
<p>你可以使用apply来链接一个对象<a class="new" href="/zh-CN/docs/JavaScript/Reference/Operators/new" rel="nofollow" title="JavaScript/Reference/Operators/new">构造器</a>，类似于Java。在接下来的例子中我们会创建一个全局<a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> <span style="color: #000000; display: inline !important; float: none; font-family: 'microsoft yahei'; font-size: 18px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 28.8px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;">对象的</span><span style="color: #000000; font-family: 'microsoft yahei'; font-size: 18px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 28.8px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;">construct</span><span style="color: #000000; font-family: 'microsoft yahei'; font-size: 18px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.6; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;">方法</span> ，来使你能够在构造器中使用一个类数组对象而非参数列表。</p>
|
||||
<pre class="brush: js">Function.prototype.construct = function (aArgs) {
|
||||
<pre><code class="language-javascript">Function.prototype.construct = function (aArgs) {
|
||||
var oNew = Object.create(this.prototype);
|
||||
this.apply(oNew, aArgs);
|
||||
return oNew;
|
||||
};
|
||||
</pre>
|
||||
</code></pre>
|
||||
<div class="note">
|
||||
<p><strong>注意:</strong> 上面使用的<code>Object.create()</code>方法相对来说比较新。另一种可选的方法，请考虑如下替代方法：</p>
|
||||
<p>Using <a class="new" href="Reference/Object/__proto__" rel="nofollow" title="此页面仍未被本地化, 期待您的翻译!"><code>Object.__proto__</code></a>:</p>
|
||||
<pre class="brush: js">Function.prototype.construct = function (aArgs) {
|
||||
<pre><code class="language-javascript">Function.prototype.construct = function (aArgs) {
|
||||
var oNew = {};
|
||||
oNew.__proto__ = this.prototype;
|
||||
this.apply(oNew, aArgs);
|
||||
return oNew;
|
||||
};</pre>
|
||||
};</code></pre>
|
||||
<p>使用闭包：</p>
|
||||
<pre class="brush: js" style="font-style: normal;">Function.prototype.construct = function(aArgs) {
|
||||
<pre><code class="language-js" style="font-style: normal;">Function.prototype.construct = function(aArgs) {
|
||||
var fConstructor = this, fNewConstr = function() {
|
||||
fConstructor.apply(this, aArgs);
|
||||
};
|
||||
fNewConstr.prototype = fConstructor.prototype;
|
||||
return new fNewConstr();
|
||||
};</pre>
|
||||
};</code></pre>
|
||||
<p class="brush: js" style="font-style: normal;">使用 Function 构造器：</p>
|
||||
<pre class="brush: js">Function.prototype.construct = function (aArgs) {
|
||||
<pre><code class="language-javascript">Function.prototype.construct = function (aArgs) {
|
||||
var fNewConstr = new Function("");
|
||||
fNewConstr.prototype = this.prototype;
|
||||
var oNew = new fNewConstr();
|
||||
this.apply(oNew, aArgs);
|
||||
return oNew;
|
||||
};</pre>
|
||||
};</code></pre>
|
||||
</div>
|
||||
<p>使用示例：</p>
|
||||
<pre class="brush: js">function MyConstructor () {
|
||||
<pre><code class="language-javascript">function MyConstructor () {
|
||||
for (var nProp = 0; nProp < arguments.length; nProp++) {
|
||||
this["property" + nProp] = arguments[nProp];
|
||||
}
|
||||
@@ -112,7 +112,7 @@ var myInstance = MyConstructor.construct(myArray);
|
||||
|
||||
console.log(myInstance.property1); // logs "Hello world!"
|
||||
console.log(myInstance instanceof MyConstructor); // logs "true"
|
||||
console.log(myInstance.constructor); // logs "MyConstructor"</pre>
|
||||
console.log(myInstance.constructor); // logs "MyConstructor"</code></pre>
|
||||
<div class="note"><strong>注意：</strong> 这个非native的<code>Function.construct</code>方法无法和一些native构造器（例如<a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global_Objects/Date"><code>Date</code></a>）一起使用。 在这种情况下你必须使用<a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Function/bind#Bound_functions_used_as_constructors" title="JavaScript/Reference/Global_Objects/Function/bind#Bound_functions_used_as_constructors"><code>Function.bind</code></a>方法（例如，想象有如下一个数组要用在Date构造器中： <code>[2012, 11, 4]</code>；这时你需要这样写： <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> – -无论如何这不是最好的实现方式并且也许不该用在任何生产环境中).</div>
|
||||
<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2>
|
||||
<table class="standard-table">
|
||||
|
||||
Reference in New Issue
Block a user