1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: function
slug: Web/JavaScript/Reference/Statements/function
tags:
- 函数
- 函数声明提升
- 函数表达式
- 提升
- 语句
translation_of: Web/JavaScript/Reference/Statements/function
---
<div>{{jsSidebar("Statements")}}</div>
<p><strong>函数声明</strong>定义一个具有指定参数的函数。</p>
<div class="noinclude">
<p>你还可以使用 {{jsxref("Function")}} 构造函数和 一个{{jsxref("Operators/function", "function expression")}} 定义函数。</p>
</div>
<div 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 href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
<h2 id="语法"><span style="font-size: 2.14285714285714rem;">语法</span></h2>
<pre class="eval notranslate">function <em>name</em>([<em>param</em>,[, <em>param</em>,[..., <em>param</em>]]]) {
[<em>statements</em>]
}
</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>
<pre class="brush: js notranslate"><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></pre>
<p>注意，即使把上面代码中的 if(false) 改为 if(true)，结果也是一样的</p>
<pre class="brush: js notranslate"><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>
</pre>
<h3 id="函数声明提升">函数声明提升</h3>
<p>JavaScript 中的<strong>函数声明</strong>被提升到了<strong>函数定义</strong>。你可以在函数声明之前使用该函数:</p>
<pre class="brush: js language-js notranslate"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token">hoisted<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // "foo"
</span><span class="keyword token">function</span> <span class="function token">hoisted<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}
</span>
<span class="comment token">/* equal to*/
var </span><span class="function token">hoisted</span><span class="punctuation token">;</span><span class="comment token"> </span>
<span class="function token">hoisted = </span><span class="keyword token">function</span><span class="function token"><span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}
</span><span class="function token">hoisted<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// "foo" </span></code>
</pre>
<div class="note">
<p>注意 :<strong>函数表达式</strong>{{jsxref("Operators/function", "function expressions")}} 不会被提升:</p>
</div>
<pre class="brush: js language-js notranslate"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token">notHoisted<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // TypeError: notHoisted is not a function
</span>
<span class="keyword token">var</span> notHoisted <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="Example_Using_function" name="Example:_Using_function">使用函数</h3>
<p>下面的代码声明了一个函数,该函数返回了销售的总金额, 参数是产品a,b,c分别的销售的数量.</p>
<pre class="brush: js language-js notranslate"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token">function</span> <span class="function token">calc_sales<span class="punctuation token">(</span></span>units_a<span class="punctuation token">,</span> units_b<span class="punctuation token">,</span> units_c<span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="keyword token">return</span> units_a<span class="operator token">*</span><span class="number token">79</span> <span class="operator token">+</span> units_b <span class="operator token">*</span> <span class="number token">129</span> <span class="operator token">+</span> units_c <span class="operator token">*</span> <span class="number token">699</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></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>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">浏览器兼容性</h2>
<p>{{Compat("javascript.statements.function")}}</p>
<h2 id="See_also" name="See_also" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">相关链接</h2>
<ul>
<li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
<li>{{jsxref("Function")}}</li>
<li>{{jsxref("Operators/function", "function expression")}}</li>
<li>{{jsxref("Statements/function*", "function* statement")}}</li>
<li>{{jsxref("Operators/function*", "function* expression")}}</li>
<li>{{jsxref("GeneratorFunction")}}</li>
</ul>
|
