aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/javascript/reference/operators/function
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/javascript/reference/operators/function
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/javascript/reference/operators/function')
-rw-r--r--files/zh-cn/web/javascript/reference/operators/function/index.html182
1 files changed, 182 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/operators/function/index.html b/files/zh-cn/web/javascript/reference/operators/function/index.html
new file mode 100644
index 0000000000..73939d3da0
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/operators/function/index.html
@@ -0,0 +1,182 @@
+---
+title: 函数表达式
+slug: Web/JavaScript/Reference/Operators/function
+tags:
+ - Function
+ - JavaScript
+ - 函数
+ - 基本表达式
+ - 操作符
+translation_of: Web/JavaScript/Reference/Operators/function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>function</code></strong> 关键字可以用来在一个表达式中定义一个函数。</p>
+
+<p>你也可以使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/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="/zh-CN/docs/Web/JavaScript/Reference/Statements/function">函数声明</a>来定义函数。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">let function_expression = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+ <em>statements</em>
+};</pre>
+
+<p>从 <a href="https://developer.mozilla.org/zh-CN/docs/">ES2015</a>开始,你也可以使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/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="/zh-CN/docs/Web/JavaScript/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="/zh-CN/docs/Web/JavaScript/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 class="brush: js"><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></pre>
+
+<h3 id="命名函数表达式(Named_function_expression)">命名函数表达式(Named function expression)</h3>
+
+<p>如果你想在函数体内部引用当前函数,则需要创建一个命名函数表达式。<strong>然后函数名称将会(且只会)作为函数体(作用域内)的本地变量</strong>。这样也可以避免使用非标准的 <a href="/zh-CN/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a> 属性。</p>
+
+<pre class="brush: js">var math = {
+ 'factorial': function factorial(n) {
+ if (n &lt;= 1)
+ return 1;
+ return n * factorial(n - 1);
+ }
+};
+</pre>
+
+<p>被函数表达式赋值的那个变量会有一个name属性,如果你把这个变量赋值给另一个变量的话,这个name属性的值也不会改变。如果函数是一个匿名函数,那name属性的值就是被赋值的变量的名称(隐藏值)。如果函数不是匿名的话,那name属性的值就是这个函数的名称(显性值)。这对于<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a>也同样适用(箭头函数没有名字,所以你只能赋予name属性一个隐性名)。</p>
+
+<pre class="brush: js"><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>
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>下面的例子定义了一个匿名函数并把它赋值给变量x。这个函数返回它参数的平方:</p>
+
+<pre class="brush: js"><code>var x = function(y) {
+ return y * y;
+};</code></pre>
+
+<p>更多情况下被当作<a href="/zh-CN/docs/Mozilla/js-ctypes/Using_js-ctypes/Declaring_and_Using_Callbacks">回调函数</a>使用:</p>
+
+<pre class="brush: js"><code>button.addEventListener('click', function(event) {
+ console.log('button is clicked!')
+})</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>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+ <td>Standard</td>
+ <td>初始定义。JavaScript 1.5 实现。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-function-definitions', 'Function defintions')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable() }}</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>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</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>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>