mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-09 23:44:06 +08:00
154 lines
9.9 KiB
HTML
154 lines
9.9 KiB
HTML
<article id="wikiArticle">
|
||
<div></div>
|
||
<p><strong><code>function</code></strong> 关键字可以用来在一个表达式中定义一个函数。</p>
|
||
<p>你也可以使用 <a href="https://developer.mozilla.orgReference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a> 构造函数和一个<a href="Reference/Statements/function">函数声明</a>来定义函数。</p>
|
||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||
<pre><code class="language-javascript">let function_expression = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
|
||
<em>statements</em>
|
||
};</code></pre>
|
||
<p>从 <a class="new" href="https://developer.mozilla.org/zh-CN/docs/" rel="nofollow">ES2015</a>开始，你也可以使用<a href="https://developer.mozilla.orgReference/Functions/Arrow_functions">箭头函数</a> 。</p>
|
||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||
<dl>
|
||
<dt><code>name</code></dt>
|
||
<dd>函数名称。可被省略，此种情况下的函数是匿名函数（<em>anonymous</em>）。 函数名称只是函数体中的一个本地变量。</dd>
|
||
<dt><code>paramN</code></dt>
|
||
<dd>被传递给函数的一个参数名称。一个函数至多拥有 255 个参数。</dd>
|
||
<dt><code>statements</code></dt>
|
||
<dd>构成函数体的语句。</dd>
|
||
</dl>
|
||
<h2 id="Description" name="Description">描述</h2>
|
||
<p>函数表达式（function expression）非常类似于函数声明（function statement）<span style="line-height: 1.5;">（详情查看</span><a href="Reference/Statements/function" style="line-height: 1.5;">函数声明</a><span style="line-height: 1.5;">）</span><span style="line-height: 1.5;">，并且两者拥有几乎相同的语法。</span><span style="line-height: 1.5;">函数表达式与函数声明的最主要区别是函数名称（</span><em>function name</em><span style="line-height: 1.5;">），在函数表达式中可省略它，从而创建匿名函数（</span><em>anonymous</em><span style="line-height: 1.5;"> functions）。</span>一个函数表达式可以被用作一个IIFE（Immediately Invoked Function Expression，即时调用的函数表达式），它一旦定义就运行。<span style="line-height: 1.5;">更多信息请查看</span><a href="Reference/Functions_and_function_scope" style="line-height: 1.5;">函数</a><span style="line-height: 1.5;">。</span></p>
|
||
<h3 id="函数表达式提升_(Function_expression_hoisting)"> 函数表达式提升 (Function expression hoisting)</h3>
|
||
<p>JavaScript中的函数表达式没有提升,不像函数声明,你在定义函数表达式之前不能使用函数表达式:</p>
|
||
<pre><code class="language-javascript"><code><font color="#333333" face="Open Sans, arial, sans-serif" size="3"><span style="background-color: #ffffff; white-space: normal;"> </span></font>notHoisted(); // TypeError: notHoisted is not a function
|
||
|
||
var notHoisted = function() {
|
||
console.log('bar');
|
||
};</code></code></pre>
|
||
<h3 id="命名函数表达式（Named_function_expression）">命名函数表达式（Named function expression）</h3>
|
||
<p>如果你想在函数体内部引用当前函数，则需要创建一个命名函数表达式。<strong>然后函数名称将会（且只会）作为函数体（作用域内）的本地变量</strong>。这样也可以避免使用非标准的 <a href="Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a> 属性。</p>
|
||
<pre><code class="language-javascript">var math = {
|
||
'factorial': function factorial(n) {
|
||
if (n <= 1)
|
||
return 1;
|
||
return n * factorial(n - 1);
|
||
}
|
||
};
|
||
</code></pre>
|
||
<p>被函数表达式赋值的那个变量会有一个name属性，如果你把这个变量赋值给另一个变量的话，这个name属性的值也不会改变。如果函数是一个匿名函数，那name属性的值就是被赋值的变量的名称（隐藏值）。如果函数不是匿名的话，那name属性的是就是这个函数的名称（显性值）。这对于<a href="https://developer.mozilla.orgReference/Functions/Arrow_functions">箭头函数</a>也同样适用（箭头函数没有名字，所以你只能赋予name属性一个隐性名）。</p>
|
||
<pre><code class="language-javascript"><code>var foo = function() {}
|
||
foo.name // "foo"
|
||
|
||
var foo2 = foo
|
||
foo2.name // "foo"
|
||
|
||
var bar = function baz() {}
|
||
bar.name // "baz"
|
||
|
||
console.log(foo === foo2); //true
|
||
console.log(typeof baz);// undefined
|
||
console.log(bar === baz); // false (errors because baz == undefined)</code>
|
||
</code></pre>
|
||
<h2 id="示例">示例</h2>
|
||
<p>下面的例子定义了一个匿名函数并把它赋值给变量x。这个函数返回它参数的平方：</p>
|
||
<pre><code class="language-javascript"><code>var x = function(y) {
|
||
return y * y;
|
||
};</code></code></pre>
|
||
<p>更多情况下被当作<a href="/zh-CN/docs/Mozilla/js-ctypes/Using_js-ctypes/Declaring_and_Using_Callbacks">回调函数</a>使用：</p>
|
||
<pre><code class="language-javascript"><code>button.addEventListener('click', function(event) {
|
||
console.log('button is clicked!')
|
||
})</code></code></pre>
|
||
<h2 id="规范">规范</h2>
|
||
<table class="standard-table">
|
||
<tbody>
|
||
<tr>
|
||
<th scope="col">规范</th>
|
||
<th scope="col">状态</th>
|
||
<th scope="col">说明</th>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf#sec-13" hreflang="en" lang="en" rel="noopener">ECMAScript 3rd Edition (ECMA-262)<br/><small lang="zh-CN">Function definition</small></a></td>
|
||
<td>Standard</td>
|
||
<td>初始定义。JavaScript 1.5 实现。</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 defintions</small></a></td>
|
||
<td><span class="spec-Standard">Standard</span></td>
|
||
<td> </td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="浏览器兼容性">浏览器兼容性</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">
|
||
<tbody>
|
||
<tr>
|
||
<th>Feature</th>
|
||
<th>Chrome</th>
|
||
<th>Firefox (Gecko)</th>
|
||
<th>Internet Explorer</th>
|
||
<th>Opera</th>
|
||
<th>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">
|
||
<tbody>
|
||
<tr>
|
||
<th>Feature</th>
|
||
<th>Android</th>
|
||
<th>Chrome for Android</th>
|
||
<th>Firefox Mobile (Gecko)</th>
|
||
<th>IE Mobile</th>
|
||
<th>Opera Mobile</th>
|
||
<th>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">相关链接</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/Statements/function" title="函数声明定义一个具有指定参数的函数。"><code>function statement</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>
|
||
<p> </p>
|
||
</article> |