mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-11 09:14:23 +08:00
203 lines
16 KiB
HTML
203 lines
16 KiB
HTML
<article id="wikiArticle">
|
||
<p></p><p></p>
|
||
<p><strong>函数声明</strong>定义一个具有指定参数的函数。</p>
|
||
<div class="noinclude">
|
||
<p>你还可以使用 <a href="Reference/Function" title="此页面仍未被本地化, 期待您的翻译!"><code>Function</code></a> 构造函数和 一个<a href="Reference/Operators/function" title="function 关键字可以用来在一个表达式中定义一个函数。"><code>function expression</code></a> 定义函数。</p>
|
||
</div>
|
||
<h2 id="语法"><span style="font-size: 2.14285714285714rem;">语法</span></h2>
|
||
<pre class="eval">function <em>name</em>([<em>param</em>,[, <em>param</em>,[..., <em>param</em>]]]) {
|
||
[<em>statements</em>]
|
||
}
|
||
|
||
</code></pre>
|
||
<dl>
|
||
<dt><code>name</code></dt>
|
||
<dd>函数名</dd>
|
||
</dl>
|
||
<dl>
|
||
<dt><code>param</code></dt>
|
||
<dd>要传递给函数的参数的名称。不同引擎中的最大参数数量不同。</dd>
|
||
</dl>
|
||
<dl>
|
||
<dt><code>statements</code></dt>
|
||
<dd>包含函数体的语句。</dd>
|
||
</dl>
|
||
<h2 id="Description" name="Description">描述</h2>
|
||
<p>一个被函数声明创建的函数是一个 Function 对象，具有 Function 对象的所有属性、方法和行为。查看 <a href="/en/JavaScript/Reference/Global_Objects/Function">Function</a> 以获取 function 的详细信息。</p>
|
||
<p>函数也可以被表达式创建（ <a href="/en/JavaScript/Reference/Operators/function">function expression</a> ）</p>
|
||
<p>函数可以被有条件来声明，这意味着，在一个 if 语句里，函数声明是可以嵌套的。有的浏览器会将这种有条件的声明看成是无条件的声明，无论这里的条件是true还是false，浏览器都会创建函数。因此，它们不应该被使用。</p>
|
||
<p>默认情况下，函数是返回 undefined 的。想要返回一个其他的值，函数必须通过一个 <a href="/en/JavaScript/Reference/Statements/return">return</a> 语句指定返回值。</p>
|
||
<h3 id="有条件的创建函数" style="line-height: 24px; font-size: 1.71428571428571rem;">有条件的创建函数</h3>
|
||
<p>函数可以被有条件来声明，这意味着，函数声明可能出现在一个 if 语句里，但是，这种声明方式在不同的浏览器里可能有不同的效果。因此，不应该在生成环境代码中使用这种声明方式，应该使用函数表达式来代替。</p>
|
||
<p> </p>
|
||
<pre><code class="language-javascript"><code>var hoisted = "foo" in this;
|
||
console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
|
||
if (false) {
|
||
function foo(){ return 1; }
|
||
}
|
||
|
||
// 在Chrome里:
|
||
// 'foo' 变量名被提升，但是 typeof foo 为 undefined
|
||
//
|
||
// 在Firefox里:
|
||
// 'foo' 变量名被提升. 但是 typeof foo 为 undefined
|
||
//
|
||
// 在Edge里:
|
||
// 'foo' 变量名未被提升. 而且 typeof foo 为 undefined
|
||
//
|
||
// 在Safari里:
|
||
// 'foo' 变量名被提升. 而且 typeof foo 为 function</code></code></pre>
|
||
<p>注意，即使把上面代码中的 if(false) 改为 if(true)，结果也是一样的</p>
|
||
<p> </p>
|
||
<pre><code class="language-javascript"><code>var hoisted = "foo" in this;
|
||
console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
|
||
if (true) {
|
||
function foo(){ return 1; }
|
||
}
|
||
|
||
// 在Chrome里:
|
||
// 'foo' 变量名被提升，但是 typeof foo 为 undefined
|
||
//
|
||
// 在Firefox里:
|
||
// 'foo' 变量名被提升. 但是 typeof foo 为 undefined
|
||
//
|
||
// 在Edge里:
|
||
// 'foo' 变量名未被提升. 而且 typeof foo 为 undefined
|
||
//
|
||
// 在Safari里:
|
||
// 'foo' 变量名被提升. 而且 typeof foo 为 function</code>
|
||
</code></pre>
|
||
<p> </p>
|
||
<p> </p>
|
||
<h3 id="函数声明提升">函数声明提升</h3>
|
||
<p>JavaScript 中的<strong>函数声明</strong>被提升到了<strong>函数定义</strong>。你可以在函数声明之前使用该函数:</p>
|
||
<pre><code class="language-js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">hoisted<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // "foo"
|
||
|
||
</span><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">hoisted<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
|
||
console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"foo"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
|
||
<span class="punctuation token" style="color: #999999;">}
|
||
</span>
|
||
|
||
<span class="comment token" style="color: #708090;">/* equal to*/
|
||
var </span><span class="function token" style="color: #dd4a68;">hoisted</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> </span>
|
||
|
||
<span class="function token" style="color: #dd4a68;">hoisted = </span><span class="keyword token" style="color: #0077aa;">function</span><span class="function token" style="color: #dd4a68;"><span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
|
||
console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"foo"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
|
||
<span class="punctuation token" style="color: #999999;">}
|
||
</span><span class="function token" style="color: #dd4a68;">hoisted<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
|
||
<span class="comment token" style="color: #708090;">// "foo"
|
||
</span>
|
||
</code>
|
||
|
||
|
||
</code></pre>
|
||
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
|
||
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"> </div>
|
||
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"> </div>
|
||
<div class="note">
|
||
<p>注意 :<strong>函数表达式</strong><a href="Reference/Operators/function" title="function 关键字可以用来在一个表达式中定义一个函数。"><code>function expressions</code></a> 不会被提升:</p>
|
||
</div>
|
||
<pre><code class="language-js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">notHoisted<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // TypeError: notHoisted is not a function
|
||
</span>
|
||
<span class="keyword token" style="color: #0077aa;">var</span> notHoisted <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
|
||
console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"bar"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
|
||
<span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span></code></code></pre>
|
||
<h2 id="Examples" name="Examples">示例</h2>
|
||
<h3 id="Example:_Using_function" name="Example:_Using_function">使用函数</h3>
|
||
<p>下面的代码声明了一个函数,该函数返回了销售的总金额, 参数是产品a,b,c分别的销售的数量.</p>
|
||
<pre><code class="language-js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">calc_sales<span class="punctuation token" style="color: #999999;">(</span></span>units_a<span class="punctuation token" style="color: #999999;">,</span> units_b<span class="punctuation token" style="color: #999999;">,</span> units_c<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
|
||
<span class="keyword token" style="color: #0077aa;">return</span> units_a<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span><span class="number token" style="color: #990055;">79</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> units_b <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span> <span class="number token" style="color: #990055;">129</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> units_c <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span> <span class="number token" style="color: #990055;">699</span><span class="punctuation token" style="color: #999999;">;</span>
|
||
<span class="punctuation token" style="color: #999999;">}</span></code></code></pre>
|
||
<h2 id="规范" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">规范</h2>
|
||
<table class="standard-table">
|
||
<tbody>
|
||
<tr>
|
||
<th scope="col">Specification</th>
|
||
<th scope="col">Status</th>
|
||
<th scope="col">Comment</th>
|
||
</tr>
|
||
<tr>
|
||
<td>ECMAScript 1st Edition.</td>
|
||
<td>Standard</td>
|
||
<td>Initial definition. Implemented in JavaScript 1.0</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://www.ecma-international.org/ecma-262/5.1/#sec-13" hreflang="en" lang="en" rel="noopener">ECMAScript 5.1 (ECMA-262)<br/><small lang="zh-CN">Function definition</small></a></td>
|
||
<td><span class="spec-Standard">Standard</span></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-function-definitions" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">Function definitions</small></a></td>
|
||
<td><span class="spec-Standard">Standard</span></td>
|
||
<td> </td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">浏览器兼容性</h2>
|
||
<p></p><div class="blockIndicator warning"><strong><a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
|
||
This compatibility table still uses the old format,
|
||
because we haven't yet converted the data it contains.
|
||
<strong><a class="new" href="/zh-CN/docs/MDN/Contribute/Structures/Compatibility_tables" rel="nofollow">Find out how you can help!</a></strong></div>
|
||
<div class="htab">
|
||
<a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
|
||
<ul>
|
||
<li class="selected"><a>Desktop</a></li>
|
||
<li><a>Mobile</a></li>
|
||
</ul>
|
||
</div><p></p>
|
||
<div id="compat-desktop">
|
||
<table class="compat-table" style="border-color: transparent;">
|
||
<tbody>
|
||
<tr>
|
||
<th style="line-height: 16px;">Feature</th>
|
||
<th style="line-height: 16px;">Chrome</th>
|
||
<th style="line-height: 16px;">Firefox (Gecko)</th>
|
||
<th style="line-height: 16px;">Internet Explorer</th>
|
||
<th style="line-height: 16px;">Opera</th>
|
||
<th style="line-height: 16px;">Safari</th>
|
||
</tr>
|
||
<tr>
|
||
<td>Basic support</td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div id="compat-mobile">
|
||
<table class="compat-table" style="border-color: transparent;">
|
||
<tbody>
|
||
<tr>
|
||
<th style="line-height: 16px;">Feature</th>
|
||
<th style="line-height: 16px;">Android</th>
|
||
<th style="line-height: 16px;">Chrome for Android</th>
|
||
<th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
|
||
<th style="line-height: 16px;">IE Mobile</th>
|
||
<th style="line-height: 16px;">Opera Mobile</th>
|
||
<th style="line-height: 16px;">Safari Mobile</th>
|
||
</tr>
|
||
<tr>
|
||
<td>Basic support</td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
<td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h2 id="See_also" name="See_also" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">相关链接</h2>
|
||
<ul>
|
||
<li><a href="Reference/Functions_and_function_scope" title="此页面仍未被本地化, 期待您的翻译!"><code>Functions and function scope</code></a></li>
|
||
<li><a href="Reference/Function" title="此页面仍未被本地化, 期待您的翻译!"><code>Function</code></a></li>
|
||
<li><a href="Reference/Operators/function" title="function 关键字可以用来在一个表达式中定义一个函数。"><code>function expression</code></a></li>
|
||
<li><a href="Reference/Statements/function*" title="function* 这种声明方式(function关键字后跟一个星号）会定义一个生成器函数 (generator function)，它返回一个 Generator 对象。"><code>function* statement</code></a></li>
|
||
<li><a href="Reference/Operators/function*" title="function*关键字可以在表达式内部定义一个生成器函数。"><code>function* expression</code></a></li>
|
||
<li><a href="Reference/Global_Objects/GeneratorFunction" title="GeneratorFunction构造器生成新的生成器函数 对象。在JavaScript中，生成器函数实际上都是GeneratorFunction的实例对象。"><code>GeneratorFunction</code></a></li>
|
||
</ul>
|
||
</article> |