diff options
Diffstat (limited to 'files/zh-cn/learn/javascript/building_blocks/functions/index.html')
| -rw-r--r-- | files/zh-cn/learn/javascript/building_blocks/functions/index.html | 428 |
1 files changed, 428 insertions, 0 deletions
diff --git a/files/zh-cn/learn/javascript/building_blocks/functions/index.html b/files/zh-cn/learn/javascript/building_blocks/functions/index.html new file mode 100644 index 0000000000..a4cdc2c0c2 --- /dev/null +++ b/files/zh-cn/learn/javascript/building_blocks/functions/index.html @@ -0,0 +1,428 @@ +--- +title: 函数-可复用代码块 +slug: learn/JavaScript/Building_blocks/Functions +tags: + - API + - JavaScript + - 函数 + - 初学者 + - 匿名 + - 参数 + - 学习 + - 方法 + - 浏览器 + - 自定义 +translation_of: Learn/JavaScript/Building_blocks/Functions +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">在JavaScript中另一个基本概念是<strong>函数</strong>, 它允许你在一个代码块中存储一段用于处理单任务的代码，然后在任何你需要的时候用一个简短的命令来调用，而不是把相同的代码写很多次。在本文中，我们将探索函数的基本概念，如基本语法、如何定义和调用、范围和参数。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的电脑知识，对HTML与CSS有基本的了解,及已阅读： <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>（JS的入门）。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>了解 Javascript 函数背后的基本概念。</td> + </tr> + </tbody> +</table> + +<h2 id="我能在哪找到函数">我能在哪找到函数?</h2> + +<p>在 JavaScript中, 你将发现函数无处不在 。事实上, 到目前为止，我们一直在使用函数，只是我们还没很好的讨论它们。然而现在是时候了，让我们开始聊聊函数，并探索它们的语法。</p> + +<p>几乎任何时候，只要你使用一个带有一对圆括号（）的JavaScript结构，并且你不是在使用一个常见的比如for for循环，while或do…while循环，或者if语句这样的内置语言结构时，那么您就正在使用函数。</p> + +<div class="hidden"></div> + +<h2 id="浏览器内置函数">浏览器内置函数</h2> + +<p>在这套课程中我们已经使用了很多浏览器内置函数，当我们操作一个字符串的时候，例如：</p> + +<pre class="brush: js notranslate">var myText = 'I am a string'; +var newString = myText.replace('string', 'sausage'); +console.log(newString); +// the replace() string function takes a string, +// replaces one substring with another, and returns +// a new string with the replacement made</pre> + +<p>或者当我们操作一个数组的时候：</p> + +<pre class="brush: js notranslate">var myArray = ['I', 'love', 'chocolate', 'frogs']; +var madeAString = myArray.join(' '); +console.log(madeAString); +// the join() function takes an array, joins +// all the array items together into a single +// string, and returns this new string</pre> + +<p>或者当我们生成一个随机数时：</p> + +<pre class="brush: js notranslate">var myNumber = Math.random() +// the random() function generates a random +// number between 0 and 1, and returns that +// number</pre> + +<p>...我们已经使用过函数了！</p> + +<div class="note"> +<p>提示：如果需要，你可以随意将这些代码输入浏览器控制台以便于你熟悉其功能。</p> +</div> + +<p>JavaScript有许多内置的函数<span style="">，可以让您做很多有用的事情，而无需自己编写所有的代码。事实上</span>, 许多你调用（运行或者执行的专业词语）浏览器内置函数时调用的代码并不是使用JavaScript来编写——大多数调用浏览器后台的函数的代码，是使用像C++这样更低级的系统语言编写的，而不是像JavaScript这样的web编程语言。</p> + +<p>请记住，这些内置浏览器函数不是核心JavaScript语言的一部分——被定义为浏览器API的一部分，它建立在默认语言之上，以提供更多的功能（请参阅本课程的早期部分以获得更多的描述）。我们将在以后的模块中更详细地使用浏览器API。</p> + +<h2 id="函数与方法">函数与方法</h2> + +<p>程序员把函数称为对象<strong>方法（method）</strong>的一部分。你还不必了解JavaScript中已建构的对象在更深层次上是如何运作的<font><font>——你可以等到下一小节，我们会教给你有关对象运作方式的一切。</font></font><font><font>在我们继续前进之前，我们需要澄清一些有关方法和函数概念之间可能存在的误会——当你在网络上浏览相关信息的时候，你很可能会碰上这两个术语。</font></font></p> + +<p>到目前为止我们所使用的内置代码同属于这两种形式：函数和方法。你可以在<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects">这里</a>查看内置函数，内置对象以及其相关方法的完整列表。</p> + +<p><font><font>严格说来，内置浏览器函数并不是函数——它们是</font></font><strong style=""><font><font>方法</font></font></strong><font><font>。</font><font>这听起来有点可怕和令人困惑，但不要担心 ——函数和方法在很大程度上是可互换的，</font></font>至少在我们的学习阶段是这样的<font><font>。</font></font></p> + +<p>二者区别在于方法是在对象内定义的函数。浏览器内置函数（方法）和变量（称为属性）存储在结构化对象内，以使代码更加高效，易于处理。</p> + +<div class="hidden"></div> + +<h2 id="自定义函数">自定义函数</h2> + +<p>您在过去的课程中还看到很多定制功能 - 在代码中定义的功能，而不是在浏览器中。每当您看到一个自定义名称后面都带有括号，那么您使用的是自定义函数. <font><font>在我们</font><font>的</font><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code"><font>循环文章中</font></a><font>的</font></font><a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html"><font><font>random-canvas-circles.html</font></font></a><font><font>示例（另见完整的</font></font><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html"><font><font>源代码</font></font></a><font><font>）中</font><font>，我们包括一个如下所示的自定义</font><font>函数：</font></font><code>draw()</code></p> + +<pre class="brush: js notranslate">function draw() { + ctx.clearRect(0,0,WIDTH,HEIGHT); + for (var i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); + } +}</pre> + +<p><font><font>该函数在</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" title="使用HTML <canvas>元素与canvas脚本API来绘制图形和动画。"><code><canvas></code></a><font><font>元素中</font><font>绘制100个随机圆</font><font>。</font><font>每次我们想要这样做，我们可以使用这个函数来调用这个功能</font></font></p> + +<pre class="brush: js notranslate">draw();</pre> + +<p><font><font>而不是每次我们想重复一遍，都要写出所有的代码。</font><font>函数可以包含任何您喜欢的代码 - 甚至可以从内部函数调用其他函数。</font><font>以上函数例如调用</font></font><code>random()</code><font><font>函数三次，由以下代码定义：</font></font></p> + +<pre class="brush: js notranslate">function random(number) { + return Math.floor(Math.random()*number); +}</pre> + +<p><font><font>我们需要这个函数，因为浏览器的内置</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random"><font><font>Math.random（）</font></font></a><font><font>函数只生成一个0到1之间的随机十进制数。我们想要一个0到一个指定数字之间的随机整数。</font></font></p> + +<div class="hidden"></div> + +<h2 id="调用函数">调用函数</h2> + +<p>现在你可能很清楚这一点,<font>但仅仅为了防止……，要在函数定义之后，实际使用它，你必须运行或调用它。</font><font>这是通过将函数名包含在代码的某个地方，后跟圆括号来完成的。</font></p> + +<pre class="brush: js notranslate">function myFunction() { + alert('hello'); +} + +myFunction() +// calls the function once</pre> + +<h2 id="匿名函数">匿名函数</h2> + +<p><font>您可能会以稍微不同的方式看到定义和调用的函数。</font><font>到目前为止，我们刚刚创建了如下函数：</font></p> + +<pre class="brush: js notranslate">function myFunction() { + alert('hello'); +}</pre> + +<p>但是您也可以创建一个没有名称的函数：</p> + +<pre class="brush: js notranslate">function() { + alert('hello'); +}</pre> + +<p>这个函数叫做<strong>匿名函数</strong> — 它没有函数名! 它也不会自己做任何事情。 你通常将匿名函数与事件处理程序一起使用, 例如，如果单击相关按钮，以下操作将在函数内运行代码：</p> + +<pre class="brush: js notranslate">var myButton = document.querySelector('button'); + +myButton.onclick = function() { + alert('hello'); +}</pre> + +<p>上述示例将要求{{htmlelement("button")}} <font>在页面上提供可用于选择并单击</font><font>的</font><font>元素。</font><font>您在整个课程中已经看到过这种结构了几次，您将在下一篇文章中了解更多信息并在其中使用。</font></p> + +<p>你还可以将匿名函数分配为变量的值，例如：</p> + +<pre class="brush: js notranslate">var myGreeting = function() { + alert('hello'); +}</pre> + +<p>现在可以使用以下方式调用此函数：</p> + +<pre class="brush: js notranslate">myGreeting();</pre> + +<p>有效地给变量一个名字;还可以将该函数分配为多个变量的值，例如：</p> + +<pre class="brush: js notranslate">var anotherGreeting = function() { + alert('hello'); +}</pre> + +<p>现在可以使用以下任一方法调用此函数</p> + +<pre class="brush: js notranslate">myGreeting(); +anotherGreeting();</pre> + +<p>但这只会令人费解，所以不要这样做！创建方法时，最好坚持下列形式：</p> + +<pre class="brush: js notranslate">function myGreeting() { + alert('hello'); +}</pre> + +<p>您将主要使用匿名函数来运行负载的代码以响应事件触发（如点击按钮） - 使用事件处理程序。再次，这看起来像这样：</p> + +<pre class="brush: js notranslate">myButton.onclick = function() { + alert('hello'); + // I can put as much code + // inside here as I want +}</pre> + +<div class="note"> +<p>匿名函数也称为函数表达式。函数表达式与函数声明有一些区别。函数声明会进行声明提升（declaration hoisting），而函数表达式不会。</p> +</div> + +<h2 id="函数参数">函数参数</h2> + +<p>一些函数需要在调用它们时指定参数 ——这些参数值需要放在函数括号内，才能正确地完成其工作。</p> + +<div class="note"> +<p><strong>Note</strong>: 参数有时称为参数（arguments），属性（properties）或甚至属性（attributes）</p> +</div> + +<p><font><font>例如，浏览器的内置</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random"><font><font>Math.random（）</font></font></a><font><font>函数不需要任何参数。</font><font>当被调用时，它总是返回0到1之间的随机数：</font></font></p> + +<pre class="brush: js notranslate">var myNumber = Math.random();</pre> + +<p><font><font>浏览器的内置字符串</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace"><font><font>replace（）</font></font></a><font><font>函数需要两个参数：在主字符串中查找的子字符串，以及用以下替换该字符串的子字符串：</font></font></p> + +<pre class="brush: js notranslate">var myText = 'I am a string'; +var newString = myText.replace('string', 'sausage');</pre> + +<div class="note"> +<p><strong>Note</strong>:当您需要指定多个参数时，它们以逗号分隔。</p> +</div> + +<p><font><font>还应该注意，有时参数不是必须的 </font></font>—— <font><font>您不必指定它们。</font><font>如果没有，该功能一般会采用某种默认行为。</font><font>作为示例，数组 </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join"><font><font>join（）</font></font></a><font><font>函数的参数是可选的：</font></font></p> + +<pre class="brush: js notranslate">var myArray = ['I', 'love', 'chocolate', 'frogs']; +var madeAString = myArray.join(' '); +// returns 'I love chocolate frogs' +var madeAString = myArray.join(); +// returns 'I,love,chocolate,frogs'</pre> + +<p>如果没有包含参数来指定加入/分隔符，默认情况下会使用逗号</p> + +<div class="hidden"></div> + +<h2 id="函数作用域和冲突">函数作用域和冲突</h2> + +<p>我们来谈一谈 {{glossary("scope")}}即作用域 — 处理函数时一个非常重要的概念。当你创建一个函数时，函数内定义的变量和其他东西都在它们自己的单独的范围内, 意味着它们被锁在自己独立的隔间中, 不能被函数外的代码访问。</p> + +<p>所有函数的最外层被称为全局作用域。 在全局作用域内定义的值可以在任意地方访问。</p> + +<p><font>JavaScript由于各种原因而建立，但主要是由于安全性和组织性。</font><font>有时您不希望变量可以在代码中的任何地方访问 - 您从其他地方调用的外部脚本可能会开始搞乱您的代码并导致问题，因为它们恰好与代码的其他部分使用了相同的变量名称，造成冲突。</font><font>这可能是恶意的，或者是偶然的。</font></p> + +<div class="hidden"></div> + +<p>例如，假设您有一个HTML文件，它调用两个外部JavaScript文件，并且它们都有一个使用相同名称定义的变量和函数：</p> + +<pre class="brush: html notranslate"><!-- Excerpt from my HTML --> +<script src="first.js"></script> +<script src="second.js"></script> +<script> + greeting(); +</script></pre> + +<pre class="brush: js notranslate">// first.js +var name = 'Chris'; +function greeting() { + alert('Hello ' + name + ': welcome to our company.'); +}</pre> + +<pre class="brush: js notranslate">// second.js +var name = 'Zaptec'; +function greeting() { + alert('Our company is called ' + name + '.'); +}</pre> + +<p><font><font>这两个函数都使用 </font></font><code>greeting()</code><font><font> 形式调用，但是你只能访问到 <font face="consolas, Liberation Mono, courier, monospace"><span style="">first.js</span></font> 文件的</font></font><code>greeting()</code><font><font>函数（第二个文件被忽视了）。另外，第二次尝试使用 <code>let</code> 关键字定义 <code>name</code> 变量导致了一个错误。</font></font></p> + +<div class="note"> +<p><strong>Note</strong>: 您可以参考这个例子 <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">running live on GitHub</a> (查看完整 <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">源代码</a>).</p> +</div> + +<p>将代码锁定在函数中的部分避免了这样的问题，并被认为是最佳实践。</p> + +<p><font>这有点像一个动物园。</font><font>狮子，斑马，老虎和企鹅都保留在自己的园子中，只能拿到到它们园子中的东西 —— 与其函数作用域相同。</font><font>如果他们能进入其他园子，就会出现问题。不同的动物会在不熟悉的栖息地内感到真的不舒服 - 一只狮子或老虎会在企鹅的水多的，冰冷的的领域中感到可怕。最糟糕的是，狮子和老虎可能会尝试吃企鹅！</font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> + +<p>动物园管理员就像全局作用域 - 他或她有钥匙访问每个园子，重新投喂食物，照顾生病的动物等。</p> + +<h3 id="主动学习_和_scope_玩耍">主动学习: 和 scope 玩耍</h3> + +<p>我们来看一个真正的例子来展示范围</p> + +<ol> + <li><font><font>首先，制作我们的</font></font><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html"><font><font>function-scope.html</font></font></a><font><font>示例</font><font>的本地副本</font><font>。它</font><font>包含两个函数</font></font><code>a()</code><font><font>和</font></font><code>b()</code><font><font>，和三个变量—— </font></font><code>x</code><font><font>，</font></font><code>y</code><font><font>和</font></font><code>z</code><font><font>——其中两个在函数中被定义，另一个被定义在全局作用域内。</font><font>它还包含一个名为</font></font><code>output()</code>的函数<font><font>，它接收一个参数，并将其输出到页面的一个段落中。</font></font></li> + <li><font><font>在浏览器和文本编辑器中打开示例。</font></font></li> + <li><font><font>在浏览器开发工具中打开JavaScript控制台。</font><font>在JavaScript控制台中，输入以下命令：</font></font></li> +</ol> + +<pre class="brush: js notranslate">output(x);</pre> + +<p><font><font>您应该看到变量</font></font><code>x</code><font><font>输出到屏幕</font><font>的值</font><font>。</font></font></p> + +<p> 4.现在尝试在您的控制台中输入以下内容</p> + +<pre class="brush: js notranslate">output(y); +output(z);</pre> + +<p><font><font>这两个都应该返回错误沿“ </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined"><font><font>ReferenceError：y未定义</font></font></a><font><font> ”。</font><font>这是为什么？</font><font>由于函数作用域 - </font></font><code>y<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="">和</span></font></code><code>z</code>被<font><font>锁定在</font><font>函数</font></font><code>a()</code><font><font>和</font></font><code>b()</code><font><font>函数中，所以</font></font><code>output()</code><font><font>从全局作用域调用时无法访问它们。</font></font></p> + +<p><font><font> 5.但是，从另一个函数里面调用什么呢？</font><font>尝试编辑</font></font><code>a()</code><font><font>，</font></font><code>b()</code><font><font>所以他们看起来像这样：</font></font></p> + +<pre class="brush: js notranslate">function a() { + var y = 2; + output(y); +} + +function b() { + var z = 3; + output(z); +}</pre> + +<p><font><font>保存代码并重新加载到浏览器中，然后尝试</font><font>从JavaScript控制台</font><font>调用</font></font><code>a()</code><font><font>和</font></font><code>b()</code><font><font>函数：</font></font></p> + +<pre class="brush: js notranslate">a(); +b();</pre> + +<p><font><font>您应该看到</font><font>页面中输出的</font></font><code>y</code><font><font>和</font></font><code>z</code>的<font><font>值。</font><font>这样就没问题，因为</font></font><code>output()</code><font><font>函数在其他函数的内部被调用 - 在这种情况下，输出变量的定义和函数的调用都在同一个作用域中（译者注：即函数作用域）。</font></font><code>output()</code><font><font>它可以从任何地方被调用，因为它在全局作用域中被定义。</font></font></p> + +<p> 6.现在尝试更新您的代码，如下所示：</p> + +<pre class="brush: js notranslate">function a() { + var y = 2; + output(x); +} + +function b() { + var z = 3; + output(x); +}</pre> + +<p>再次保存并重新加载，并在JavaScript控制台中再次尝试：</p> + +<pre class="brush: js notranslate">a(); +b();</pre> + +<p><font><font>函数 </font></font><code>a()</code><font><font>和</font></font><code>b()</code><font><font>都应该输出x---1的值。这些没有问题，因为即使</font></font><code>output()</code>的<font><font>调用与</font></font><code>x</code>的<font><font>定义</font><font>不在同一个作用域内</font><font>，但</font></font><code>x</code><font><font>是一个全局变量，所以在所有代码中都可用。</font></font></p> + +<p>7.最后，尝试更新您的代码，如下所示：</p> + +<pre class="brush: js notranslate">function a() { + var y = 2; + output(z); +} + +function b() { + var z = 3; + output(y); +}</pre> + +<p>再次保存并重新加载，并在JavaScript控制台中再次尝试：</p> + +<pre class="brush: js notranslate">a(); +b();</pre> + +<p><font><font>这次</font></font><code>a()</code><font><font>和</font></font><code>b()</code><font><font>调用都会返回那个令人讨厌的</font></font> "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" error — 这是因为<code>output()</code>函数的调用和输出变量的定义不在同一个函数作用域内 - 变量对这些函数调用是不可见的。</p> + +<div class="note"> +<p><strong>注意</strong>:相同的范围规则不适用于循环（for（）{...}）和条件块（if（）{...}） - 它们看起来非常相似，但它们不一样！小心不要让这些困惑。</p> +</div> + +<div class="note"> +<p>注意：ReferenceError：“x”未定义错误是您遇到的最常见的错误。如果您收到此错误，并且确定您已经定义了该问题的变量，请检查它的范围。</p> +</div> + +<ul> +</ul> + +<h3 id="函数内部的函数">函数内部的函数</h3> + +<p><font>请记住，您可以从任何地方调用函数，甚至可以在另一个函数中调用函数。</font><font>这通常被用作保持代码整洁的方式 - 如果您有一个复杂的函数，如果将其分解成几个子函数，它更容易理解：</font></p> + +<pre class="brush: js notranslate">function myBigFunction() { + var myValue; + + subFunction1(); + subFunction2(); + subFunction3(); +} + +function subFunction1() { + console.log(myValue); +} + +function subFunction2() { + console.log(myValue); +} + +function subFunction3() { + console.log(myValue); +} +</pre> + +<p>要确保函数调取的数值处在有效的作用域内。上面的例子中会产生一个错误提示，<code>ReferenceError：myValue is not define</code>，因为尽管<code>myValue</code>变量与函数调用指令处在同一个作用域中, 但它却没有在函数内被定义 <font><font>——</font></font> 实际代码在调用函数时就开始运行了。为了使代码正确运作，你必须将值作为参数传递给函数，如下所示：</p> + +<pre class="brush: js notranslate">function myBigFunction() { + var myValue = 1; + + subFunction1(myValue); + subFunction2(myValue); + subFunction3(myValue); +} + +function subFunction1(value) { + console.log(value); +} + +function subFunction2(value) { + console.log(value); +} + +function subFunction3(value) { + console.log(value); +}</pre> + +<h2 id="测试你的技能！"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>测试你的技能！</strong></span></font></h2> + +<p>你已经来到了本文章的结尾，但是你还能记得最重要的知识吗？你可以在离开这里找到一些更深度的测试来证实你已经记住了这些知识——查看<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">测试你的技能：函数</a>（英文）。后两章文本包含了这个测试需要的技能，所以你可能先需要阅读再尝试该测试。</p> + +<h2 id="总结">总结</h2> + +<p>本文探讨了函数背后的基本概念，为之后的学习奠定了基础。下一步，我们将进行实践，并带你一步步建立起你自己的函数。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions detailed guide</a> — covers some advanced features not included here.</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions reference</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> — advanced concept references</li> +</ul> + +<ul> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p> |