diff options
Diffstat (limited to 'files/zh-cn/web/javascript/reference/functions')
12 files changed, 2576 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/functions/arguments/@@iterator/index.html b/files/zh-cn/web/javascript/reference/functions/arguments/@@iterator/index.html new file mode 100644 index 0000000000..5da702bb2b --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/arguments/@@iterator/index.html @@ -0,0 +1,72 @@ +--- +title: 'arguments[@@iterator]()' +slug: Web/JavaScript/Reference/Functions/arguments/@@iterator +translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><code><strong>@@iterator</strong></code> 属性的初始值是和 {{jsxref("Array.prototype.values")}} 属性的初始值相同的对象。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>arguments</var>[Symbol.iterator]()</pre> + +<h2 id="实例">实例</h2> + +<h3 id="使用for...of循环的迭代">使用<code>for...of</code>循环的迭代</h3> + +<pre class="brush: js">function f() { + // 你的浏览器必须支持 for..of 循环 + // 以及 for 循环中的 let 区域变量 + for (let letter of arguments) { + console.log(letter); + } +} +f('w', 'y', 'k', 'o', 'p'); +</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('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>初始定义.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>初始定义.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div> + + +<p>{{Compat("javascript.functions.arguments.@@iterator")}}</p> +</div> + +<h2 id="更多">更多</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> diff --git a/files/zh-cn/web/javascript/reference/functions/arguments/callee/index.html b/files/zh-cn/web/javascript/reference/functions/arguments/callee/index.html new file mode 100644 index 0000000000..c4682f0885 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/arguments/callee/index.html @@ -0,0 +1,177 @@ +--- +title: arguments.callee +slug: Web/JavaScript/Reference/Functions/arguments/callee +tags: + - Deprecated + - JavaScript + - arguments + - arguments.callee + - 函数 + - 属性 + - 已弃用 +translation_of: Web/JavaScript/Reference/Functions/arguments/callee +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><code><strong>arguments.callee </strong></code>属性包含当前正在执行的函数。</p> + +<h2 id="Description" name="Description">描述</h2> + +<p><strong><code>callee</code></strong> 是 <code>arguments</code> 对象的一个属性。它可以用于引用该函数的函数体内当前正在执行的函数。这在函数的名称是未知时很有用，例如在没有名称的函数表达式 (也称为“匿名函数”)内。</p> + +<div class="warning"><strong>警告：</strong>在<a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode">严格模式</a>下，第5版 ECMAScript (<strong>ES5</strong>) 禁止使用 <code>a<strong>rguments.callee()</strong>。当一个函数必须调用自身的时候, 避免使用 <strong>arguments.callee(), </strong></code>通过<code>要么</code>给函数表达式一个名字<font face="Consolas, Liberation Mono, Courier, monospace">,</font>要么使用一个函数声明.</div> + +<h2 id="为什么_arguments.callee_从ES5严格模式中删除了？">为什么 arguments.callee 从ES5严格模式中删除了？</h2> + +<p>(改编自 <a href="http://stackoverflow.com/a/235760/578288" title="http://stackoverflow.com/a/235760/578288">a Stack Overflow answer by olliej</a>)</p> + +<p>早期版本的 JavaScript不允许使用命名函数表达式，出于这样的原因, 你不能创建一个递归函数表达式。</p> + +<p>例如，下边这个语法就是行的通的：</p> + +<pre class="brush: js">function factorial (n) { + return !(n > 1) ? 1 : factorial(n - 1) * n; +} + +[1,2,3,4,5].map(factorial);</pre> + +<p>但是:</p> + +<pre class="brush: js">[1,2,3,4,5].map(function (n) { + return !(n > 1) ? 1 : /* what goes here? */ (n - 1) * n; +});</pre> + +<p>这个不行。为了解决这个问题， <code>arguments.callee</code> 添加进来了。然后你可以这么做</p> + +<pre class="brush: js">[1,2,3,4,5].map(function (n) { + return !(n > 1) ? 1 : arguments.callee(n - 1) * n; +});</pre> + +<p>然而，这实际上是一个非常糟糕的解决方案，因为这 (以及其它的 <code>arguments</code>, <code>callee</code>, 和 <code>caller</code> 问题) 使得在通常的情况（你可以通过调试一些个别例子去实现它，但即使最好的代码也是次优选项，因为(JavaScript 解释器)做了不必要的检查）不可能实现内联和尾递归。另外一个主要原因是递归调用会获取到一个不同的 <code>this</code> 值，例如：</p> + +<pre class="brush: js">var global = this; + +var sillyFunction = function (recursed) { + if (!recursed) { return arguments.callee(true); } + if (this !== global) { + alert("This is: " + this); + } else { + alert("This is the global"); + } +} + +sillyFunction();</pre> + +<p>ECMAScript 3 通过允许命名函数表达式解决这些问题。例如：</p> + +<pre class="brush: js">[1,2,3,4,5].map(function factorial (n) { + return !(n > 1) ? 1 : factorial(n-1)*n; +});</pre> + +<p>这有很多好处：</p> + +<ul> + <li>该函数可以像代码内部的任何其他函数一样被调用</li> + <li>它不会在外部作用域中创建一个变量 (<a href="http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope">除了 IE 8 及以下</a>)</li> + <li>它具有比访问arguments对象更好的性能</li> +</ul> + +<p>另外一个被废弃的特性是 <code>arguments.callee.caller</code>，具体点说则是 <code>Function.caller。为什么</code>? 额，在任何一个时间点，你能在堆栈中找到任何函数的最深层的调用者，也正如我在上面提到的，在调用堆栈有一个单一重大影响：不可能做大量的优化，或者有更多更多的困难。比如，如果你不能保证一个函数 f 不会调用一个未知函数，它就绝不可能是内联函数 f。基本上这意味着内联代码中积累了大量防卫代码：</p> + +<pre class="brush: js">function f (a, b, c, d, e) { return a ? b * c : d * e; }</pre> + +<p>如果 JavaScript 解释器不能保证所有提供的参数数量在被调用的时候都存在，那么它需要在行内代码插入检查，或者不能内联这个函数。现在在这个特殊例子里一个智能的解释器应该能重排检查而更优，并检查任何将不用到的值。然而在许多的情况里那是不可能的，也因此它不能够内联。 </p> + +<h2 id="Example.3A_Using_arguments.callee_in_an_anonymous_recursive_function" name="Example.3A_Using_arguments.callee_in_an_anonymous_recursive_function">例子</h2> + +<h3 id="Example.3A_Using_arguments.callee_in_an_anonymous_recursive_function" name="Example.3A_Using_arguments.callee_in_an_anonymous_recursive_function">在匿名递归函数中使用 <code>arguments.callee</code></h3> + +<p>递归函数必须能够引用它本身。很典型的，函数通过自己的名字调用自己。然而，匿名函数 (通过 <a href="/en-US/docs/JavaScript/Reference/Operators/function" title="JavaScript/Reference/Operators/Special/function">函数表达式</a> 或者 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function">函数构造器 </a>创建</code>) 没有名称。因此如果没有可访问的变量指向该函数，唯一能引用它的方式就是通过 <code>arguments.callee</code>。</p> + +<p>下面的例子定义了一个函数，按流程，定义并返回了一个阶乘函数。该例并不是很实用，并且几乎都能够用 <a href="/en-US/docs/JavaScript/Reference/Operators/function" style="line-height: 1.5;" title="JavaScript/Reference/Operators/Special/function">命名函数表达式</a> <span style="line-height: 1.5;">实现同样结果的例子, and there are nearly no cases where the same result cannot be achieved with </span><span style="line-height: 1.5;">.</span></p> + +<pre class="brush: js">function create() { + return function(n) { + if (n <= 1) + return 1; + return n * arguments.callee(n - 1); + }; +} + +var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1) +</pre> + +<h3 id="没有替代方案的_arguments.callee">没有替代方案的 arguments.callee</h3> + +<p><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">当你必须要使用Function构造函数时，</span>下面的例子是没有可以替代 <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;"><code>arguments.callee</code> 的方案的，因此</span><span style="line-height: 1.5;">弃用它时会产生一个BUG (参看 {{Bug("725398")}}):</span></p> + +<pre class="brush: js">function createPerson (sIdentity) { + var oPerson = new Function("alert(arguments.callee.identity);"); + oPerson.identity = sIdentity; + return oPerson; +} + +var john = createPerson("John Smith"); + +john();</pre> + +<p>译者注：利用命名函数表达式也可以实现上述例子的同样效果</p> + +<pre class="brush: js">function createPerson (identity) { + function Person() { + console.log(Person.identity); + } + Person.identity = identity; + return Person; +} +var john = createPerson("John Smith"); + +john(); //John Smith +</pre> + +<h2 id="Specifications">Specifications</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>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> <br> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + + + +<p>{{Compat("javascript.functions.arguments.callee")}}</p> + +<h2 id="也可以看看">也可以看看</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> + +<p> </p> diff --git a/files/zh-cn/web/javascript/reference/functions/arguments/caller/index.html b/files/zh-cn/web/javascript/reference/functions/arguments/caller/index.html new file mode 100644 index 0000000000..13128ec962 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/arguments/caller/index.html @@ -0,0 +1,47 @@ +--- +title: caller +slug: Web/JavaScript/Reference/Functions/arguments/caller +translation_of: Archive/Web/JavaScript/arguments.caller +--- +<p>{{jsSidebar("Functions")}}</p> + +<p><code><font face="Open Sans, Arial, sans-serif">废弃的 </font><strong>arguments.caller</strong></code> 属性原先用在函数执行的时候调用自身。本属性已被移除且不再有用。</p> + +<h2 id="描述">描述</h2> + +<p><code>arguments.caller 已经不可使用了，但是你还可以使用</code> {{jsxref("Function.caller")}}。</p> + +<pre>function whoCalled() { + if (whoCalled.caller == null) + console.log('I was called from the global scope.'); + else + console.log(whoCalled.caller + ' called me!'); +} +</pre> + +<h3 id="Examples" name="Examples">示例</h3> + +<p>下例演示了<code>arguments.caller</code>属性的作用.</p> + +<pre class="brush: js example-bad">function whoCalled() { + if (arguments.caller == null) + console.log('该函数在全局作用域内被调用.'); + else + console.log(arguments.caller + '调用了我!'); +}</pre> + +<h2 id="规范">规范</h2> + +<p>无相关标准。JavaScript 1.1 实现，{{bug(7224)}} 移除 caller，因为潜在的不安全性。</p> + +<h2 id="浏览器支持">浏览器支持</h2> + + + +<p>{{Compat("javascript.functions.arguments.caller")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/zh-cn/web/javascript/reference/functions/arguments/index.html b/files/zh-cn/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..f1f356a935 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,275 @@ +--- +title: Arguments 对象 +slug: Web/JavaScript/Reference/Functions/arguments +tags: + - Functions + - JavaScript + - Reference + - arguments + - arguments.length +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +<div> +<div> +<div>{{jsSidebar("Functions")}}</div> +</div> +</div> + +<p><strong><code>arguments</code></strong> 是一个对应于传递给函数的参数的类数组对象。</p> + +<p>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Description" name="Description">描述</h2> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> If you're writing ES6 compatible code, then <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a> should be preferred.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> “Array-like” means that <code>arguments</code> has a {{jsxref("Functions/arguments/length", "length")}} property and properties indexed from zero, but it doesn't have {{JSxRef("Array")}}'s built-in methods like {{jsxref("Array.forEach", "forEach()")}} and {{jsxref("Array.map", "map()")}}. See <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments$edit#Description">§Description</a> for details.</p> +</div> + +<p><code>arguments</code>对象是所有（非箭头）函数中都可用的<strong>局部变量</strong>。你可以使用<code>arguments</code>对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。例如，如果一个函数传递了三个参数，你可以以如下方式引用他们：</p> + +<pre class="brush: js notranslate">arguments[0] +arguments[1] +arguments[2] +</pre> + +<p>参数也可以被设置：</p> + +<pre class="brush: js notranslate">arguments[1] = 'new value';</pre> + +<p><code>arguments</code>对象不是一个 {{jsxref("Array")}} 。它类似于<code>Array</code>，但除了length属性和索引元素之外没有任何<code>Array</code>属性。例如，它没有 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="JavaScript/Reference/Global_Objects/Array/pop">pop</a> 方法。但是它可以被转换为一个真正的<code>Array</code>：</p> + +<pre class="brush: js notranslate">var args = Array.prototype.slice.call(arguments); +var args = [].slice.call(arguments); + +// ES2015 +const args = Array.from(arguments); +const args = [...arguments]; +</pre> + +<div class="warning"> +<p>对参数使用slice会阻止某些JavaScript引擎中的优化 (比如 V8 - <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">更多信息</a>)。如果你关心性能，尝试通过遍历arguments对象来构造一个新的数组。另一种方法是使用被忽视的<code>Array</code>构造函数作为一个函数：</p> + +<pre class="brush: js notranslate">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments)); +</pre> +</div> + +<p>如果调用的参数多于正式声明接受的参数，则可以使用<code>arguments</code>对象。这种技术对于可以传递可变数量的参数的函数很有用。使用 <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>来确定传递给函数参数的个数，然后使用<code>arguments</code>对象来处理每个参数。要确定函数<a href="/zh-CN/docs/Glossary/Signature/Function">签名</a>中（输入）参数的数量，请使用<code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code>属性。</p> + +<h3 id="对参数使用_typeof">对参数使用 <code>typeof</code></h3> + +<p>typeof参数返回 'object'。</p> + +<pre class="brush: js notranslate">console.log(typeof arguments); // 'object' +// arguments 对象只能在函数内使用 +function test(a){ + console.log(a,Object.prototype.toString.call(arguments)); + console.log(arguments[0],arguments[1]); + console.log(typeof arguments[0]); +} +test(1); +/* +1 "[object Arguments]" +1 undefined +number +*/</pre> + +<p>可以使用索引确定单个参数的类型。</p> + +<pre class="brush: js notranslate">console.log(typeof arguments[0]); //this will return the typeof individual arguments.</pre> + +<h3 id="对参数使用扩展语法">对参数使用扩展语法</h3> + +<p>您还可以使用{{jsxref("Array.from()")}}方法或<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator">扩展运算符</a>将参数转换为真实数组：</p> + +<pre class="brush: js notranslate">var args = Array.from(arguments); +var args = [...arguments];</pre> + +<h2 id="Properties" name="Properties">属性</h2> + +<dl> + <dt><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee" title="JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code></dt> + <dd>指向参数所属的当前执行的函数。</dd> + <dt> + <div class="hidden"> + <p><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/caller" title="JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</p> + </div> + </dt> + <dd> + <p>指向调用当前函数的函数。</p> + </dd> + <dt><code><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/length" title="JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code></dt> + <dd>传递给函数的参数数量。</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt> + <dd>返回一个新的{{jsxref("Array/@@iterator", "Array 迭代器", "", 0)}} 对象，该对象包含参数中每个索引的值。</dd> + <dt></dt> +</dl> + +<div class="blockIndicator note"> +<p>注意: 在严格模式下，<code>arguments</code>对象已与过往不同。<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code>不再与函数的实际形参之间共享，同时caller属性也被移除。</p> +</div> + +<h2 id="Examples" name="Examples">例子</h2> + +<h3 id="遍历参数求和">遍历参数求和</h3> + +<pre class="brush: js notranslate">function add() { + var sum =0, + len = arguments.length; + for(var i=0; i<len; i++){ + sum += arguments[i]; + } + return sum; +} +add() // 0 +add(1) // 1 +add(1,2,3,4); // 10</pre> + +<h3 id="Example_Defining_function_that_concatenates_several_strings" name="Example:_Defining_function_that_concatenates_several_strings">定义连接字符串的函数</h3> + +<p>这个例子定义了一个函数来连接字符串。这个函数唯一正式声明了的参数是一个字符串，该参数指定一个字符作为衔接点来连接字符串。该函数定义如下：</p> + +<pre class="brush:js notranslate">function myConcat(separator) { + var args = Array.prototype.slice.call(arguments, 1); + return args.join(separator); +}</pre> + +<p>你可以传递任意数量的参数到该函数，并使用每个参数作为列表中的项创建列表。</p> + +<pre class="brush:js notranslate">// returns "red, orange, blue" +myConcat(", ", "red", "orange", "blue"); + +// returns "elephant; giraffe; lion; cheetah" +myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); + +// returns "sage. basil. oregano. pepper. parsley" +myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> + +<h3 id="Example_Defining_a_function_that_creates_HTML_lists" name="Example:_Defining_a_function_that_creates_HTML_lists">定义创建HTML列表的方法</h3> + +<p>这个例子定义了一个函数通过一个字符串来创建HTML列表。这个函数唯一正式声明了的参数是一个字符。当该参数为 "<code>u</code>" 时，创建一个无序列表 (项目列表)；当该参数为 "<code>o</code>" 时，则创建一个有序列表 (编号列表)。该函数定义如下：</p> + +<pre class="brush:js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><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;">list<span class="punctuation token" style="color: #999999;">(</span></span>type<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> + <span class="keyword token" style="color: #0077aa;">var</span> result <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"<"</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> type <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"l><li>"</span><span class="punctuation token" style="color: #999999;">;</span> + <span class="keyword token" style="color: #0077aa;">var</span> args <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> Array<span class="punctuation token" style="color: #999999;">.</span>prototype<span class="punctuation token" style="color: #999999;">.</span>slice<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">call<span class="punctuation token" style="color: #999999;">(</span></span>arguments<span class="punctuation token" style="color: #999999;">,</span> <span class="number token" style="color: #990055;">1</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> + result <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> args<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">join<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"</li><li>"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> + result <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"</li></"</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> type <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"l>"</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // end list +</span> + <span class="keyword token" style="color: #0077aa;">return</span> result<span class="punctuation token" style="color: #999999;">;</span> +<span class="punctuation token" style="color: #999999;">}</span></code></pre> + +<p>你可以传递任意数量的参数到该函数，并将每个参数作为一个项添加到指定类型的列表中。例如：</p> + +<pre class="brush:js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> listHTML <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="function token" style="color: #dd4a68;">list<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"u"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"One"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Two"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Three"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> + +<span class="comment token" style="color: #708090;">/* listHTML is: + +"<ul><li>One</li><li>Two</li><li>Three</li></ul>" + +*/</span></code> +</pre> + +<h3 id="剩余参数、默认参数和解构赋值参数">剩余参数、默认参数和解构赋值参数</h3> + +<p><code>arguments</code>对象可以与<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">剩余参数</a>、<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a>和<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>参数结合使用。</p> + +<pre class="brush: js notranslate">function foo(...args) { + return args; +} +foo(1, 2, 3); // [1,2,3] +</pre> + +<p>在严格模式下，<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">剩余参数</a>、<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a>和<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>参数的存在不会改变 <code>arguments</code>对象的行为，但是在非严格模式下就有所不同了。</p> + +<p>当非严格模式中的函数<strong>没有</strong>包含<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">剩余参数</a>、<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a>和<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>，那么<code>arguments</code>对象中的值<strong>会</strong>跟踪参数的值（反之亦然）。看下面的代码：</p> + +<pre class="brush: js notranslate">function func(a) { + arguments[0] = 99; // 更新了arguments[0] 同样更新了a + console.log(a); +} +func(10); // 99 +</pre> + +<p>并且</p> + +<pre class="brush: js notranslate">function func(a) { + a = 99; // 更新了a 同样更新了arguments[0] + console.log(arguments[0]); +} +func(10); // 99 +</pre> + +<p>当非严格模式中的函数<strong>有</strong>包含<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">剩余参数</a>、<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a>和<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>，那么<code>arguments</code>对象中的值<strong>不会</strong>跟踪参数的值（反之亦然）。相反, <code>arguments</code>反映了调用时提供的参数：</p> + +<pre class="brush: js notranslate">function func(a = 55) { + arguments[0] = 99; // updating arguments[0] does not also update a + console.log(a); +} +func(10); // 10</pre> + +<p>并且</p> + +<pre class="brush: js notranslate">function func(a = 55) { + a = 99; // updating a does not also update arguments[0] + console.log(arguments[0]); +} +func(10); // 10</pre> + +<p>并且</p> + +<pre class="brush: js notranslate">function func(a = 55) { + console.log(arguments[0]); +} +func(); // undefined +</pre> + +<h2 id="规范">规范</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>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.functions.arguments")}}</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/zh-cn/web/javascript/reference/functions/arguments/length/index.html b/files/zh-cn/web/javascript/reference/functions/arguments/length/index.html new file mode 100644 index 0000000000..3bf25335f4 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/arguments/length/index.html @@ -0,0 +1,75 @@ +--- +title: arguments.length +slug: Web/JavaScript/Reference/Functions/arguments/length +translation_of: Web/JavaScript/Reference/Functions/arguments/length +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>本次函数调用时传入函数的实参数量.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">arguments.length</pre> + +<h2 id="Description" name="Description">描述</h2> + +<p>arguments.length表示的是实际上向函数传入了多少个参数,这个数字可以比形参数量大,也可以比形参数量小(形参数量的值可以通过<a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Function/length" title="JavaScript/Reference/Global Objects/Function/length">Function.length</a>获取到).</p> + +<h2 id="Examples" name="Examples">例子</h2> + +<h3 id="Example:_Using_arguments.length" name="Example:_Using_arguments.length">例子: 使用<code>arguments.length</code></h3> + +<p>这个例中,我们定义了一个可以相加任意个数字的函数.</p> + +<pre class="brush: js">function adder(base, /*, n2, ... */) { + base = Number(base); + for (var i = 0; i < arguments.length; i++) { + base += Number(arguments[i]); + } + return base; +} +</pre> + +<h2 id="Specifications">Specifications</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>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + + + +<p>{{Compat("javascript.functions.arguments.length")}}</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Function/length" title="JavaScript/Reference/Global_Objects/Function/length">Function.length</a></li> +</ul> diff --git a/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.html b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..a7a50b8d5b --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,484 @@ +--- +title: 箭头函数 +slug: Web/JavaScript/Reference/Functions/Arrow_functions +tags: + - ECMAScript 2015 + - ES6 Arrow Function + - Functions + - Intermediate + - JavaScript + - Lambda + - Lambda Expression + - Reference + - ramda +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions")}} </div> + +<p><strong>箭头函数表达式</strong>的语法比<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/function">函数表达式</a>更简洁，并且没有自己的<code><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/this">this</a></code>，<code><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>，<code><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/super">super</a></code>或<code><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code>。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。</p> + +{{EmbedInteractiveExample("pages/js/functions-arrow.html")}} + +<h2 id="Syntax" name="Syntax">语法</h2> + +<blockquote> +<h3 class="brush: js" id="基础语法">基础语法</h3> + +<pre class="notranslate">(param1, param2, …, paramN) => { statements } +(param1, param2, …, paramN) => expression +//相当于：(param1, param2, …, paramN) =>{ return expression; } + +// 当只有一个参数时，<strong>圆括号</strong>是可选的： +(singleParam) => { statements } +singleParam => { statements } + +// 没有参数的函数应该写成一对圆括号。 +() => { statements }</pre> +</blockquote> + +<h3 id="高级语法">高级语法</h3> + +<blockquote> +<pre class="brush: js notranslate">//加括号的函数体返回对象字面量表达式： +params => ({foo: bar}) + +//支持<strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">剩余参数</a></strong>和<strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a></strong> +(param1, param2, ...rest) => { statements } +(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { +statements } + +//同样支持参数列表<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构</a> +let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; +f(); // 6</pre> +</blockquote> + +<h2 id="描述">描述</h2> + +<p>参考 <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>.</p> + +<p>引入箭头函数有两个方面的作用：更简短的函数并且不绑定<code>this</code>。</p> + +<h3 id="更短的函数">更短的函数</h3> + +<pre class="brush: js notranslate">var elements = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +elements.map(function(element) { + return element.length; +}); // 返回数组：[8, 6, 7, 9] + +// 上面的普通函数可以改写成如下的箭头函数 +elements.map((element) => { + return element.length; +}); // [8, 6, 7, 9] + +// 当箭头函数只有一个参数时，可以省略参数的圆括号 +elements.map(element => { + return element.length; +}); // [8, 6, 7, 9] + +// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号 +elements.map(element => element.length); // [8, 6, 7, 9] + +// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构 +// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名， +// 可以替换成任意合法的变量名 +elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9] +</pre> + +<h3 id="没有单独的this">没有单独的<code>this</code></h3> + +<p>在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：</p> + +<ul> + <li>如果是该函数是一个构造函数，this指针指向一个新的对象</li> + <li>在严格模式下的函数调用下，this指向<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">undefined</span></font></li> + <li>如果是该函数是一个对象的方法，则它的this指针指向这个对象</li> + <li>等等</li> +</ul> + +<p><code>This</code>被证明是令人厌烦的面向对象风格的编程。</p> + +<pre class="brush: js notranslate">function Person() { + // Person() 构造函数定义 `this`作为它自己的实例. + this.age = 0; + + setInterval(function growUp() { + // 在非严格模式, growUp()函数定义 `this`作为全局对象, + // 与在 Person()构造函数中定义的 `this`并不相同. + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>在ECMAScript 3/5中，通过将<code>this</code>值分配给封闭的变量，可以解决<code>this</code>问题。</p> + +<pre class="brush: js notranslate">function Person() { + var that = this; + that.age = 0; + + setInterval(function growUp() { + // 回调引用的是`that`变量, 其值是预期的对象. + that.age++; + }, 1000); +}</pre> + +<p>或者，可以创建<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">绑定函数</a>，以便将预先分配的<code>this</code>值传递到绑定的目标函数（上述示例中的<code>growUp()</code>函数）。</p> + +<p>箭头函数不会创建自己的<code>this,它只会从自己的作用域链的上一层继承this</code>。因此，在下面的代码中，传递给<code>setInterval</code>的函数内的<code>this</code>与封闭函数中的<code>this</code>值相同：</p> + +<pre class="brush: js notranslate">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| 正确地指向 p 实例 + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="与严格模式的关系">与严格模式的关系</h4> + +<p>鉴于 <code>this</code> 是词法层面上的，<a href="/zh-CN/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a>中与 <code>this</code> 相关的规则都将被忽略。</p> + +<pre class="notranslate"><code>var f = () => { 'use strict'; return this; }; +f() === window; // 或者 global</code></pre> + +<p>严格模式的其他规则依然不变.</p> + +<h4 id="通过_call_或_apply_调用">通过 call 或 apply 调用</h4> + +<p>由于 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">箭头函数没有自己的this指针</span></font>，通过 <code>call()</code><em> 或</em> <code>apply()</code> 方法调用一个函数时，只能传递参数（不能绑定this---译者注），他们的第一个参数会被忽略。（这种现象对于bind方法同样成立---译者注）</p> + +<pre class="brush: js notranslate">var adder = { + base : 1, + + add : function(a) { + var f = v => v + this.base; + return f(a); + }, + + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base : 2 + }; + + return f.call(b, a); + } +}; + +console.log(adder.add(1)); // 输出 2 +console.log(adder.addThruCall(1)); // 仍然输出 2</pre> + +<h3 id="不绑定arguments">不绑定<code>arguments</code></h3> + +<p>箭头函数不绑定<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments">Arguments 对象</a>。因此，在本示例中，<code>arguments</code>只是引用了封闭作用域内的arguments：</p> + +<pre class="brush: js notranslate">var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n,即传给foo函数的第一个参数 + return f(); +} + +foo(1); // 2 +foo(2); // 4 +foo(3); // 6 +foo(3,2);//6 +</pre> + +<p>在大多数情况下，使用<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">剩余参数</a>是相较使用<code>arguments</code>对象的更好选择。</p> + +<pre class="brush: js notranslate">function foo(arg) { + var f = (...args) => args[0]; + return f(arg); +} +foo(1); // 1 + +function foo(arg1,arg2) { + var f = (...args) => args[1]; + return f(arg1,arg2); +} +foo(1,2); //2 + +</pre> + +<h3 id="使用箭头函数作为方法">使用箭头函数作为方法</h3> + +<p>如上所述，箭头函数表达式对非方法函数是最合适的。让我们看看当我们试着把它们作为方法时发生了什么。</p> + +<pre class="brush: js notranslate">'use strict'; +var obj = { + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log( this.i, this) + } +} +obj.b(); +// undefined, Window{...} +obj.c(); +// 10, Object {...} +</pre> + +<p>箭头函数没有定义this绑定。另一个涉及{{jsxref("Object.defineProperty()")}}的示例：</p> + +<pre class="brush: js notranslate">'use strict'; +var obj = { + a: 10 +}; + +Object.defineProperty(obj, "b", { + get: () => { + console.log(this.a, typeof this.a, this); + return this.a+10; + // 代表全局对象 'Window', 因此 'this.a' 返回 'undefined' + } +}); + +obj.b; // undefined "undefined" Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} +</pre> + +<h3 id="使用_new_操作符">使用 <code>new</code> 操作符</h3> + +<p>箭头函数不能用作构造器，和 <code>new</code>一起用会抛出错误。</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo is not a constructor</pre> + +<h3 id="使用prototype属性">使用<code>prototype</code>属性</h3> + +<p>箭头函数没有<code>prototype</code>属性。</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +console.log(Foo.prototype); // undefined</pre> + +<h3 id="使用_yield_关键字">使用 <code>yield</code> 关键字</h3> + +<p> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。</p> + +<h2 id="函数体">函数体</h2> + +<p>箭头函数可以有一个“简写体”或常见的“块体”。</p> + +<p>在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的<code>return</code>语句。</p> + +<pre class="brush: js notranslate">var func = x => x * x; +// 简写函数 省略return + +var func = (x, y) => { return x + y; }; +//常规编写 明确的返回值</pre> + +<h2 id="返回对象字面量">返回对象字面量</h2> + +<p>记住用<code>params => {object:literal}</code>这种简单的语法返回对象字面量是行不通的。</p> + +<pre class="brush: js notranslate">var func = () => { foo: 1 }; +// Calling func() returns undefined! + +var func = () => { foo: function() {} }; +// SyntaxError: function statement requires a name</pre> + +<p>这是因为花括号（<code>{}</code> ）里面的代码被解析为一系列语句（即 <code>foo</code> 被认为是一个标签，而非对象字面量的组成部分）。</p> + +<p>所以，记得用圆括号把对象字面量包起来：</p> + +<pre class="brush: js notranslate">var func = () => ({foo: 1});</pre> + +<h2 id="换行">换行</h2> + +<p>箭头函数在参数和箭头之间不能换行。</p> + +<pre class="brush: js notranslate">var func = () + => 1; +// SyntaxError: expected expression, got '=>'</pre> + +<p>但是，可以通过在 ‘=>’ 之后换行，或者用 ‘( )’、'{ }'来实现换行，如下：</p> + +<pre class="brush: js notranslate">var func = (a, b, c) => + 1; + +var func = (a, b, c) => ( + 1 +); + +var func = (a, b, c) => { + return 1 +}; + +var func = ( + a, + b, + c +) => 1; + +// 不会有语法错误</pre> + +<h2 id="解析顺序">解析顺序</h2> + +<p>虽然箭头函数中的箭头不是运算符，但箭头函数具有与常规函数不同的特殊<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">运算符优先级</a>解析规则。</p> + +<pre class="brush: js notranslate">let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError: invalid arrow-function arguments + +callback = callback || (() => {}); // ok</pre> + +<h2 id="更多示例">更多示例</h2> + +<pre class="brush: js notranslate">// 空的箭头函数返回 undefined +let empty = () => {}; + +(() => 'foobar')(); +// Returns "foobar" +// (这是一个立即执行函数表达式,可参阅 'IIFE'术语表) + + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Easy array filtering, mapping, ... + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// 更简明的promise链 +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// 无参数箭头函数在视觉上容易分析 +setTimeout( () => { + console.log('I happen sooner'); + setTimeout( () => { + // deeper code + console.log('I happen later'); + }, 1); +}, 1);</pre> + +<h4 id="箭头函数也可以使用条件（三元）运算符：">箭头函数也可以使用条件（三元）运算符：</h4> + +<pre class="brush: js notranslate">var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b;</pre> + +<blockquote> +<p>箭头函数内定义的变量及其作用域</p> +</blockquote> + +<pre class="brush: js notranslate">// 常规写法 +var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} +greeting(); //"Good day." +console.log(now); // ReferenceError: now is not defined 标准的let作用域 + +// 参数括号内定义的变量是局部变量（默认参数） +var greeting = (now=new Date()) => "Good" + (now.getHours() > 17 ? " evening." : " day."); +greeting(); //"Good day." +console.log(now); // ReferenceError: now is not defined + +// 对比：函数体内{}不使用var定义的变量是全局变量 +var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} +greeting(); //"Good day." +console.log(now); // Fri Dec 22 2017 10:01:00 GMT+0800 (中国标准时间) + +// 对比：函数体内{} 用var定义的变量是局部变量 +var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} +greeting(); //"Good day." +console.log(now); // ReferenceError: now is not defined +</pre> + +<blockquote> +<h4 id="箭头函数也可以使用闭包：">箭头函数也可以使用闭包：</h4> +</blockquote> + +<pre class="brush: js notranslate">// 标准的闭包函数 +function A(){ + var i=0; + return function b(){ + return (++i); + }; +}; + +var v=A(); +v(); //1 +v(); //2 + + +//箭头函数体的闭包（ i=0 是默认参数） +var Add = (i=0) => {return (() => (++i) )}; +var v = Add(); +v(); //1 +v(); //2 + +//因为仅有一个返回，return 及括号（）也可以省略 +var Add = (i=0)=> ()=> (++i); + +</pre> + +<blockquote> +<h4 id="箭头函数递归"> 箭头函数递归</h4> +</blockquote> + +<pre class="brush: js notranslate">var fact = (x) => ( x==0 ? 1 : x*fact(x-1) ); +fact(5); // 120</pre> + +<p>规范</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.functions.arrow_functions")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/zh-cn/web/javascript/reference/functions/default_parameters/index.html b/files/zh-cn/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..7422fc208b --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,220 @@ +--- +title: 默认参数值 +slug: Web/JavaScript/Reference/Functions/Default_parameters +tags: + - ECMAScript 2015 + - Functions + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<p>{{jsSidebar("Functions")}}</p> + +<p><strong>函数默认参数</strong>允许在没有值或<code>undefined</code>被传入时使用默认形参。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div> + + + +<h2 id="语法" name="语法">语法</h2> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) { +<em> statements</em> +} +</pre> + +<h2 id="描述" name="描述">描述</h2> + +<p>JavaScript 中函数的参数默认是<code>{{jsxref("undefined")}}</code>。然而，在某些情况下可能需要设置一个不同的默认值。这是默认参数可以帮助的地方。</p> + +<p>以前，一般设置默认参数的方法是在函数体测试参数是否为<code>undefined</code>，如果是的话就设置为默认的值。</p> + +<p>下面的例子中，如果在调用<code>multiply</code>时，参数<code>b</code>的值没有提供，那么它的值就为<code>undefined</code>。如果直接执行<code>a * b</code>，函数会返回 <code>NaN</code>。</p> + +<pre class="brush: js">function multiply(a, b) { + return a * b; +} + +multiply(5, 2); // 10 +multiply(5); // NaN ! + +</pre> + +<p>为了防止这种情况，第二行代码解决了这个问题，其中如果只使用一个参数调用<code>multiply</code>，则<code>b</code>设置为<code>1</code>：</p> + +<pre class="brush: js">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1; + return a * b; +} + +multiply(5, 2); // 10 +multiply(5); // 5</pre> + +<p>有了默认参数，我们不需要再在函数体内做不必要的检查。现在你可以在函数头将<code>b</code>的默认值置为<code>1</code>：</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a * b; +} + +multiply(5, 2); // 10 +multiply(5); // 5</pre> + +<h2 id="示例" name="示例">示例</h2> + +<h3 id="传入_undefined_vs_其他假值">传入 <code>undefined</code> vs 其他假值</h3> + +<p>在第二次调用中，即使第一个参数在调用时显式设置为<code>undefined</code>（虽然不是<code>null</code>或其他<a href="/zh-CN/docs/Glossary/Falsy">falsy</a>值），但是<code>num</code>参数的值是默认值。</p> + +<pre class="brush: js">function test(num = 1) { + console.log(typeof num); +} + +test(); // 'number' (num is set to 1) +test(undefined); // 'number' (num is set to 1 too) + +// test with other falsy values: +test(''); // 'string' (num is set to '') +test(null); // 'object' (num is set to null)</pre> + +<h3 id="调用时解析">调用时解析</h3> + +<p>在函数被调用时，参数默认值会被解析，所以不像Python中的例子，每次函数调用时都会创建一个新的参数对象。</p> + +<pre class="brush: js">function append(value, array = []) { + array.push(value); + return array; +} + +append(1); //[1] +append(2); //[2], not [1, 2]</pre> + +<p>这个规则对于函数和变量也是适用的。</p> + +<pre class="brush: js">function callSomething(thing = something()) { + return thing; +} + +let numberOfTimesCalled = 0; +function something() { + numberOfTimesCalled += 1; + return numberOfTimesCalled; +} + +callSomething(); // 1 +callSomething(); // 2</pre> + +<h3 id="默认参数可用于后面的默认参数">默认参数可用于后面的默认参数</h3> + +<p>已经遇到的参数可用于以后的默认参数：</p> + +<pre class="brush: js">function greet(name, greeting, message = greeting + ' ' + name) { + return [name, greeting, message]; +} + +greet('David', 'Hi'); // ["David", "Hi", "Hi David"] +greet('David', 'Hi', 'Happy Birthday!'); // ["David", "Hi", "Happy Birthday!"] +</pre> + +<p>以下这个例子近似模拟了一些比较简单的情况，并说明了特殊情况是怎么被处理的。</p> + +<pre class="brush: js">function go() { + return ':P'; +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g]; +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]</pre> + +<h3 id="函数嵌套定义">函数嵌套定义</h3> + +<p>在 Gecko 33 {{geckoRelease(33)}} 中引入。在函数体内的函数声明不能引用内部的默认参数，并且会在 SpiderMonkey 抛出一个{{jsxref("ReferenceError")}}（现在是 {{jsxref("TypeError")}}），参见 {{bug(1022967)}}。默认参数总是会被首先执行，而在函数体内部的函数声明会在之后生效。</p> + +<pre class="brush: js">// Doesn't work! Throws ReferenceError. +function f(a = go()) { + function go() { return ':P'; } +}</pre> + +<h3 id="位于默认参数之后非默认参数">位于默认参数之后非默认参数</h3> + +<p>在Gecko 26 {{geckoRelease(26)}}之前，以下代码会造成{{jsxref("SyntaxError")}}错误。这已经在{{bug(1022967)}}中修复，并在以后的版本中按预期方式工作。参数仍然设置为从左到右，覆盖默认参数，即使后面的参数没有默认值。</p> + +<pre class="brush: js">function f(x = 1, y) { + return [x, y]; +} + +f(); // [1, undefined] +f(2); // [2, undefined]</pre> + +<h3 id="有默认值的解构参数">有默认值的解构参数</h3> + +<p>你可以通过<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>为参数赋值：</p> + +<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z; +} + +f(); // 6</pre> + +<h2 id="规范">规范</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>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容" name="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.functions.default_parameters")}}</p> + +<h2 id="相关链接" name="相关链接">相关链接</h2> + +<ul> + <li><a class="external external-icon" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li> +</ul> + +<p> </p> diff --git a/files/zh-cn/web/javascript/reference/functions/get/index.html b/files/zh-cn/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..38c16fea77 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/get/index.html @@ -0,0 +1,175 @@ +--- +title: getter +slug: Web/JavaScript/Reference/Functions/get +tags: + - ECMAScript 2015 + - Functions + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/get +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong><code>get</code></strong>语法将对象属性绑定到查询该属性时将被调用的函数。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div> + + + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">{get <em>prop</em>() { ... } } + +{get <em>[expression]</em>() { ... } }</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>要绑定到给定函数的属性名。</dd> + <dt>expression</dt> + <dd>从 ECMAScript 2015 开始，还可以使用一个计算属性名的表达式绑定到给定的函数。</dd> +</dl> + +<h2 id="描述">描述</h2> + +<p>有时需要允许访问返回动态计算值的属性，或者你可能需要反映内部变量的状态，而不需要使用显式方法调用。在JavaScript中，可以使用 <em>getter </em>来实现。</p> + +<p>尽管可以结合使用getter和setter来创建一个伪属性，但是不可能同时将一个 getter 绑定到一个属性并且该属性实际上具有一个值。</p> + +<p>使用<code>get</code>语法时应注意以下问题：</p> + +<div> +<ul> + <li>可以使用数值或字符串作为标识；</li> + <li>必须不带参数（请参考<a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a>）；</li> + <li>它不能与另一个 <code>get </code>或具有相同属性的数据条目同时出现在一个对象字面量中（不允许使用 <code>{ get x() { }, get x() { } }</code> 和 <code>{ x: ..., get x() { } }</code>）。</li> +</ul> +</div> + +<h2 id="示例">示例</h2> + +<h3 id="Example_Defining_a_getter_with_the_get_operator" name="Example:_Defining_a_getter_with_the_get_operator">在新对象初始化时定义一个getter</h3> + +<p>这会为<code>obj</code>创建一个伪属性<code>latest</code>，它会返回<code>log</code>数组的最后一个元素。</p> + +<pre class="brush: js">const obj = { + log: ['example','test'], + get latest() { + if (this.log.length == 0) return undefined; + return this.log[this.log.length - 1]; + } +} +console.log(obj.latest); // "test".</pre> + +<p>注意，尝试为<code>latest</code>分配一个值不会改变它。</p> + +<h3 id="Example_Deleting_a_getter_using_the_delete_operator" name="Example:_Deleting_a_getter_using_the_delete_operator">使用<code>delete</code>操作符删除 getter</h3> + +<p>只需使用 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>，就可删除 getter：</p> + +<pre class="brush: js">delete obj.latest; +</pre> + +<h3 id="使用defineProperty在现有对象上定义_getter">使用<code>defineProperty</code>在现有对象上定义 getter</h3> + +<p>要随时将 getter 添加到现有对象，使用 {{jsxref("Object.defineProperty()")}}.</p> + +<pre class="brush: js">var o = { a:0 } + +Object.defineProperty(o, "b", { get: function () { return this.a + 1; } }); + +console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)</pre> + +<h3 id="使用计算出的属性名">使用计算出的属性名</h3> + +<pre class="brush: js">var expr = 'foo'; + +var obj = { + get [expr]() { return 'bar'; } +}; + +console.log(obj.foo); // "bar"</pre> + +<h3 id="智能_自我复写_懒加载_getters">智能 / 自我复写/ 懒加载 getters</h3> + +<p>Getters 给你一种方法来定义一个对象的属性，但是在访问它们之前不会计算属性的值。 getter 延迟计算值的成本，直到需要此值，如果不需要，您就不用支付成本。</p> + +<p>一种额外的优化技术是用<strong>智能(或称<a href="https://en.wikipedia.org/wiki/Memoization">记忆化</a>)getters </strong>延迟属性值的计算并将其缓存以备以后访问。该值是在第一次调用getter 时计算的，然后被缓存，因此后续访问返回缓存值而不重新计算它。这在以下情况下很有用：</p> + +<ul> + <li>如果属性值的计算是昂贵的（占用大量RAM或CPU时间，产生工作线程，检索远程文件等）。</li> + <li>如果现在不需要该值。它将在稍后使用，或在某些情况下它根本不使用。</li> + <li>如果被使用，它将被访问几次，并且不需要重新计算，该值将永远不会被改变，或者不应该被重新计算。</li> +</ul> + +<div class="blockIndicator note"> +<p>这意味着你不应该为你希望更改其值的属性使用懒 getter，因为 getter 不会重新计算该值。</p> +</div> + +<p>在以下示例中，对象具有一个 getter 属性。在获取属性时，该属性将从对象中删除并重新添加，但此时将隐式显示为数据属性。最后返回得到值。</p> + +<pre class="brush: js">get notifier() { + delete this.notifier; + return this.notifier = document.getElementById('bookmarked-notification-anchor'); +}, +</pre> + +<p>对于Firefox代码，另请参阅定义<code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>函数的<code>XPCOMUtils.jsm</code>代码模块。</p> + +<h3 id="get_vs._defineProperty"><code>get</code> vs. <code>defineProperty</code></h3> + +<p>当使用 <code>get</code> 关键字时，它和{{jsxref("Object.defineProperty()")}} 有类似的效果，在{{jsxref("classes")}}中使用时，二者有细微的差别。</p> + +<p>当使用 <code>get</code> 关键字时，属性将被定义在实例的原型上，当使用{{jsxref("Object.defineProperty()")}}时，属性将被定义在实例自身上。</p> + +<pre class="brush: js">class Example { + get hello() { + return 'world'; + } +} + +const obj = new Example(); +console.log(obj.hello); +// "world" + +console.log(Object.getOwnPropertyDescriptor(obj, 'hello')); +// undefined + +console.log( + Object.getOwnPropertyDescriptor( + Object.getPrototypeOf(obj), 'hello' + ) +); +// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.functions.get")}}</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li>在Javascript指南中 <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">定义Getters和Setters</a></li> +</ul> diff --git a/files/zh-cn/web/javascript/reference/functions/index.html b/files/zh-cn/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..9851fa71cb --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/index.html @@ -0,0 +1,528 @@ +--- +title: 函数 +slug: Web/JavaScript/Reference/Functions +tags: + - Function + - Functions + - JavaScript +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<div>一般来说，一个函数是可以通过外部代码调用的一个“子程序”（或在递归的情况下由内部函数调用）。像程序本身一样，一个函数由称为函数体的一系列语句组成。值可以传递给一个函数，函数将返回一个值。</div> + +<div> </div> + +<div>在 JavaScript中，函数是<strong>头等(</strong>first-class<strong>)</strong>对象，因为它们可以像任何其他<strong>对象</strong>一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。简而言之，它们是<code><a href="/zh-cn/JavaScript/Reference/Global_Objects/Function" title="zh-cn/Core_JavaScript_1.5_Reference/Global_Objects/Function">Function</a></code>对象。</div> + +<div> </div> + +<p>有关更多示例和说明，请参阅<a href="/zh-CN/docs/Web/JavaScript/Guide/Functions">有关函数的JavaScript指南</a>。</p> + +<h2 id="描述">描述</h2> + +<p>在JavaScript中，每个函数其实都是一个<code>Function</code>对象。查看{{jsxref("Function")}}页面<code>了解其</code>属性和方法。</p> + +<p>如果一个函数中没有使用return语句，则它默认返回<code>undefined</code>。要想返回一个特定的值，则函数必须使用 <code><a href="/zh-cn/JavaScript/Reference/Statements/return" title="zh-cn/Core_JavaScript_1.5_Reference/Statements/return">return</a></code> 语句来指定一个要返回的值。(使用<a href="/zh-cn/JavaScript/Reference/Operators/new" title="new">new</a>关键字调用一个<a href="/zh-cn/JavaScript/Reference/Global_Objects/Object/constructor" title="constructor">构造函数</a>除外)。</p> + +<p>调用函数时，传递给函数的值被称为函数的实参（值传递），对应位置的函数参数名叫作形参。如果实参是一个包含原始值(数字，字符串，布尔值)的变量，则就算函数在内部改变了对应形参的值，返回后，该实参变量的值也不会改变。如果实参是一个对象引用，则对应形参会和该实参指向同一个对象。假如函数在内部改变了对应形参的值，返回后，实参指向的对象的值也会改变：</p> + +<pre class="brush: js line-numbers language-js"> /* 定义函数 myFunc */ + function myFunc(theObject) + { + //实参 mycar 和形参 theObject 指向同一个对象. + theObject.brand = "Toyota"; + } + + /* + * 定义变量 mycar; + * 创建并初始化一个对象; + * 将对象的引用赋值给变量 mycar + */ + var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 + }; + + /* 弹出 'Honda' */ + window.alert(mycar.brand); + + /* 将对象引用传给函数 */ + myFunc(mycar); + + /* + * 弹出 'Toyota',对象的属性已被修改. + */ + console.log(mycar.brand); +</pre> + +<p>在函数执行时，<a href="/zh-cn/JavaScript/Reference/Operators/this" title="this"><code>this</code> 关键字</a>并不会指向正在运行的函数本身，而是指向调用该函数的对象。所以，如果你想在函数内部获取函数自身的引用，只能使用函数名或者使用<a href="/zh-cn/JavaScript/Reference/Functions_and_function_scope/arguments/callee" title="zh-cn/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a>属性(<u><a href="/zh-cn/JavaScript/Strict_mode" title="https://developer.mozilla.org/zh-cn/JavaScript/Strict_mode">严格模式</a></u>下不可用)，如果该函数是一个匿名函数,则你只能使用后者。</p> + +<h2 id="Defining_functions" name="Defining_functions">函数定义</h2> + +<p>定义函数有多种方法:</p> + +<h3 id="The_function_declaration_.28function_statement.29" name="The_function_declaration_.28function_statement.29">函数声明 (<font face="Consolas, Liberation Mono, Courier, monospace">函数</font>语句)</h3> + +<p>有一个特殊的语法来声明函数(查看<a href="/zh-cn/JavaScript/Reference/Statements/function" title="zh-cn/Core_JavaScript_1.5_Reference/Statements/function">函数语句</a>了解详情)：</p> + +<pre class="syntaxbox">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>传递给函数的参数的名称，一个函数最多可以有255个参数。</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>组成函数体的声明语句。</dd> +</dl> + +<h3 id="The_function_expression_.28function_operator.29" name="The_function_expression_.28function_operator.29">函数表达式 (<code>function</code> expression)</h3> + +<p>函数表达式和函数声明非常相似，它们甚至有相同的语法（查看<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/function">函数表达式</a>了解详情）。一个函数表达式可能是一个更大的表达式的一部分。可以定义函数“名字”（例如可以在调用堆栈时使用）或者使用“匿名”函数。函数表达式不会提升，所以不能在定义之前调用。</p> + +<pre class="syntaxbox">var myFunction = 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>传递给函数的参数的名称，一个函数最多可以有255个参数.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>组成函数体的声明语句。</dd> +</dl> + +<p>下面是<strong>匿名</strong>函数的一个例子（函数没有名字）：</p> + +<pre class="brush: js">var myFunction = function() { + // statements +}</pre> + +<p>也可以在定义时为函数<strong>命名</strong>：</p> + +<pre class="brush: js">var myFunction = function namedFunction(){ + // statements +}</pre> + +<p>命名函数表达式的好处是当我们遇到错误时，堆栈跟踪会显示函数名，容易寻找错误。</p> + +<p>可以看到，上面的两个例子都不以function开头。不以function开头的函数语句就是函数表达式定义。</p> + +<p>当函数只使用一次时，通常使用<strong>IIFE (<em>Immediately Invokable Function Expressions</em>)。</strong></p> + +<pre class="brush: js">(function() { + statements +})();</pre> + +<p><strong>IIFE</strong>是在函数声明后立即调用的函数表达式。</p> + +<h3 id="函数生成器声明_(function*_语句)">函数生成器声明 (<code>function*</code> 语句)</h3> + +<p>函数声明有一种特殊的语法 (详情请查阅{{jsxref('Statements/function*', 'function* statement')}} )：</p> + +<pre class="syntaxbox">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> + <dt><code>param</code></dt> + <dd>传递给函数的参数的名称，一个函数最多可以有255个参数。</dd> + <dt><code>statements</code></dt> + <dd>组成函数体的声明语句。</dd> +</dl> + +<h3 id="函数生成器表达式_(function*表达式)">函数生成器表达式 (<code>function*</code>表达式)</h3> + +<p>构造函数表达式和函数声明类似，并且有着相同的语法 (详情请查阅 {{jsxref('Operators/function*', 'function* expression')}} ):</p> + +<pre class="syntaxbox">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> + <dt><code>param</code></dt> + <dd>传递给函数的参数的名称。一个函数可以有多达255个参数</dd> + <dt><code>statements</code></dt> + <dd>组成函数体的声明语句。</dd> +</dl> + +<h3 id="箭头函数表达式_(>)">箭头函数表达式 (=>)</h3> + +<p>箭头函数表达式有着更短的语法，并在词汇方面结合这个值 (详情请查阅 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> ):</p> + +<pre class="syntaxbox">([param] [, param]) => { statements } param => expression</pre> + +<dl> + <dt><code>param</code></dt> + <dd>参数名称. 零参数需要用()表示. 只有一个参数时不需要括号. (例如 <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>多个声明statements需要用大括号括起来，而单个表达式时则不需要。表达式expression也是该函数的隐式返回值。</dd> +</dl> + +<h3 id="Function构造函数"> <code>Function</code>构造函数</h3> + +<div class="note"> +<p><strong>注意:</strong> 不推荐使用 <code>Function</code> 构造函数创建函数,因为它需要的函数体作为字符串可能会阻止一些JS引擎优化,也会引起其他问题。</p> +</div> + +<p>所有其他对象, {{jsxref("Function")}} 对象可以用new操作符创建:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>函数使用零个或多个名称作为正式的参数名称。每一个必须是一个符合有效的JavaScript标识符规则的字符串或用逗号分隔的字符串列表,例如“x”,“theValue”或“a,b”。</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>一个构成的函数定义的，包含JavaScript声明语句的字符串。</dd> +</dl> + +<p>把Function的构造函数当作函数一样调用(不使用new操作符)的效果与作为Function的构造函数调用一样。</p> + +<h3 id="生成器函数的构造函数">生成器函数的构造函数</h3> + +<div class="note"> +<p><strong>注意:</strong> <code>GeneratorFunction</code> 不是一个全局对象，但可以从构造函数实例取得。(详情请查阅<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/生成器函数">生成器函数</a>).</p> +</div> + +<div class="note"> +<p><strong>注意:</strong> 不推荐使用构造器函数的构造函数 (<code>GeneratorFunction</code> constructor)创建函数，因为它需要的函数体作为字符串可能会阻止一些JS引擎优化，也会引起其他问题。</p> +</div> + +<p>所有其他对象, {{jsxref("GeneratorFunction")}} 对象可以用 new 操作符创建：</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>函数使用零个或多个名称作为正式的参数名称。每一个必须是一个符合有效的JavaScript标识符规则的字符串或用逗号分隔的字符串列表,例如“x”,“theValue”或“a,b”。</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>一个构成的函数定义的，包含JavaScript声明语句的字符串。</dd> +</dl> + +<p>把Function的构造函数当作函数一样调用(不使用new操作符)的效果与作为Function的构造函数调用一样。</p> + +<h2 id="函数参数">函数参数</h2> + +<h3 id="默认参数">默认参数</h3> + +<p>如果没有值或传入了未定义的值，默认函数参数允许形式参数使用默认值初始化。 参见：<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a>。</p> + +<h3 id="剩余参数">剩余参数</h3> + +<p>剩余参数语法允许将数量不限的参数描述成一个数组。 参见：<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters">剩余参数</a>。</p> + +<h2 id="arguments对象"><code>arguments</code>对象</h2> + +<p>你可以参阅在函数里使用<code>arguments</code>对象的函数参数。参见：<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments"> arguments</a>。</p> + +<ul> + <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: 一个包含了传递给当前执行函数参数的类似于数组的对象。</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: 当前正在执行的函数。</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : 调用当前执行函数的函数。</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: 传给函数的参数的数目。</li> +</ul> + +<h2 id="方法函数定义">方法函数定义</h2> + +<h3 id="Getter_和_setter_函数">Getter 和 setter 函数</h3> + +<p>你可以在支持添加新属性的任何标准的内置对象或用户定义的对象内定义getter(访问方法)和setter(设置方法)。使用对象字面量语法定义getters和setters方法。</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>当查找某个对象属性时，该对象属性将会与被调用函数绑定。</p> + </dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>当试图设置该属性时，对象属性与被调用函数绑定。</dd> +</dl> + +<h3 id="方法定义语法">方法定义语法</h3> + +<p>从ECMAScript 6开始, 你可以用更短的语法定义自己的方法，类似于getters和setters。详情请查阅 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> .</p> + +<pre class="brush: js line-numbers language-js"> var obj = { + foo() {}, + bar() {} + }; +</pre> + +<h2 id="构造函数_vs_函数声明_vs_函数表达式">构造函数 vs 函数声明 vs 函数表达式</h2> + +<p>对比下面的例子：</p> + +<p>一个用<code>Function</code>构造函数定义的函数,被赋值给变量multiply：</p> + +<pre class="brush: js"><code>var multiply = new Function('x', 'y', 'return x * y');</code></pre> + +<p>一个名为<code>multiply</code>的函数声明：</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} // 没有分号 +</pre> + +<p>一个匿名函数的函数表达式，被赋值给变量<code><font face="Open Sans, Arial, sans-serif">multiply</font></code><font face="Open Sans, Arial, sans-serif">：</font></p> + +<pre class="brush: js line-numbers language-js"> var multiply = function(x, y) { + return x * y; + }; +</pre> + +<p><font face="Open Sans, Arial, sans-serif">一个命名为<code>func_named</code>的函数的函数表达式，被赋值给变量</font><code><font face="Open Sans, Arial, sans-serif">multiply</font></code><font face="Open Sans, Arial, sans-serif">：</font></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +};</pre> + +<h3 id="差别">差别</h3> + +<p>虽然有一些细微的差别，但所起的作用都差不多：</p> + +<p>函数名和函数的变量存在着差别。函数名不能被改变，但函数的变量却能够被再分配。函数名只能在函数体内使用。倘若在函数体外使用函数名将会导致错误（如果函数之前是通过一个var语句声明的则是undefined）。例如：</p> + +<pre class="brush: js line-numbers language-js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>当函数是通过 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>被序列化时，函数名同样也会出现。</p> + +<p>另一方面，被函数赋值的变量仅仅受限于它的作用域，该作用域确保包含着该函数被声明时的作用域。</p> + +<p>正如第四个例子所展示的那样，函数名与被函数赋值的变量是不相同的. 彼此之间没有关系。函数声明同时也创建了一个和函数名相同的变量。因此，与函数表达式定义不同，以函数声明定义的函数能够在它们被定义的作用域内通过函数名而被访问到：</p> + +<p>使用用 '<code>new Function'定义的函数没有函数名。</code> 然而，在 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript引擎中，其函数的序列化形式表现的好像它拥有一个名叫"anonymous"的名称一样。比如，使用 <code>alert(new Function())</code> 输出：</p> + +<pre class="brush: js line-numbers language-js">function anonymous() { +}</pre> + +<p>而实际上其函数并没有名称，<code>anonymous</code> 不是一个可以在函数内被访问到的变量。例如，下面的例子将会导致错误：</p> + +<pre class="brush: js line-numbers language-js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>和通过函数表达式定义或者通过Function构造函数定义的函数不同，函数声明定义的函数可以在它被声明之前使用。举个例子：</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +}</pre> + +<p>函数表达式定义的函数继承了当前的作用域。换言之，函数构成了闭包。另一方面，Function构造函数定义的函数不继承任何全局作用域以外的作用域(那些所有函数都继承的)。</p> + +<p>通过函数表达式定义的函数和通过函数声明定义的函数只会被解析一次，而Function构造函数定义的函数却不同。也就是说，每次构造函数被调用，传递给Function构造函数的函数体字符串都要被解析一次 。虽然函数表达式每次都创建了一个闭包，但函数体不会被重复解析，因此函数表达式仍然要快于"<code>new Function(...)</code>"。 所以Function构造函数应尽可能地避免使用。</p> + +<p>有一点应该要注意的，在通过解析Function构造函数字符串产生的函数里，内嵌的函数表达式和函数声明不会被重复解析。例如：</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // 函数体字符串"function() {\n\talert(bar);\n}"的这一部分不会被重复解析。</pre> + +<p>函数声明非常容易（经常是意外地）转换为函数表达式。当它不再是一个函数声明：</p> + +<ul> + <li>成为表达式的一部分</li> + <li>不再是函数或者脚本自身的“源元素” （source element）。“源元素”是脚本或函数体中的非嵌套语句。</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x === 0) { // source element + x = 10; // 非source element + function boo() {} // 非 source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y === 10) { // source element + function blah() {} // 非 source element + y++; //非source element + } +} +</pre> + +<h3 id="例子">例子</h3> + +<pre class="brush: js line-numbers language-js">// 函数声明 +function foo() {} + +// 函数表达式 +(function bar() {}) + +// 函数表达式 +x = function hello() {} + +if (x) { + // 函数表达式 + function world() {} +} + +// 函数声明 +function a() { + // 函数声明 + function b() {} + if (0) { + //函数表达式 + function c() {} + } +} +</pre> + +<h2 id="块级函数">块级函数</h2> + +<p>从ECMAScript 6开始，在<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a>下，块里的函数作用域为这个块。ECMAScript 6之前不建议块级函数在严格模式下使用。</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode</pre> + +<h3 id="非严格模式下的块级函数">非严格模式下的块级函数</h3> + +<p>一句话：不要用。</p> + +<p>在非严格模式下，块中的函数声明表现奇怪。例如：</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: 兼容性风险 + console.log("This is zero."); + } +} +</pre> + +<p>ECMAScript 6中，如果<code>shouldDefineZero</code>是false，则永远不会定义zero,因为这个块从不执行。然而，这是标准的新的一部分。这是历史遗留问题，无论这个块是否执行，一些浏览器会定义zero。</p> + +<p><code>在</code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a><code>下，所有支持</code>ECMAScript 6的<code>浏览器以相同的方式处理：只有在shouldDefineZero为true的情况下定义zero，并且作用域只是这个块内。</code></p> + +<p>有条件地定义一个函数的一个更安全的方法是把函数表达式赋给一个变量：</p> + +<pre class="brush: js"><code>var zero;</code> +if (0) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="示例">示例</h2> + +<h3 id="返回格式化数字">返回格式化数字</h3> + +<p>下面的函数返回一个字符串，其中包含了一个格式化的、以一个由0开头并填充的数字。</p> + +<pre class="brush: js">// 这个函数返回一个由0开头并填充的字符串 +function padZeros(num, totalLen) { + var numStr = num.toString(); // 用字符串返回值进行初始化 + var numZeros = totalLen - numStr.length; // 计算zeros顺序 + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +}</pre> + +<p>下面的语句调用了padZeros函数：</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005"</pre> + +<h3 id="检测函数是否存在">检测函数是否存在</h3> + +<p>你可以通过<strong> typeof </strong>操作符检测一个函数是否存在。在下面的例子中，用一个测试来演示检测window对象是否拥有一个noFunc函数的属性。如果存在，那就使用它；否则就采取其它的一些操作。</p> + +<pre class="brush: js">if ('function' === typeof window.noFunc) { + // use noFunc() + } else { + // do something else + }</pre> + +<p>注意在if语句中，使用了noFunc的引用--在函数名的后面没有括号“（）”，所以实际函数并没有被调用。</p> + +<h2 id="规范">规范</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>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</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>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/zh-cn/web/javascript/reference/functions/method_definitions/index.html b/files/zh-cn/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..a26e15dc20 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,220 @@ +--- +title: 方法的定义 +slug: Web/JavaScript/Reference/Functions/Method_definitions +tags: + - ECMAScript 2015 + - Functions + - JavaScript + - Object + - 语法 +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +<div>{{JsSidebar("Functions")}}</div> + +<p>从ECMAScript 2015开始，在对象初始器中引入了一种更简短定义方法的语法，这是一种把方法名直接赋给函数的简写方式。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}</div> + +<p class="hidden">这个交互式例子的源代码位于 GitHub 仓库中。如果你想对这个交互式的样例做出一些贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 然后提一个 pull request 给我们。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var obj = { + <var>property</var>( <var>parameters…</var> ) {}, + *<var>generator</var>( <var>parameters…</var> ) {}, + async property( <var>parameters…</var> ) {}, + async* generator( <var>parameters…</var> ) {}, + + // with computed keys: + [property]( <var>parameters…</var> ) {}, + *[generator]( <var>parameters…</var> ) {}, + async [property]( <var>parameters…</var> ) {}, + + // compare getter/setter syntax: + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {} +}; +</pre> + +<h2 id="描述">描述</h2> + +<p>该简写语法与ECMAScript 2015的<a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a>和<a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>语法类似。</p> + +<p>如下代码：</p> + +<pre class="brush: js">var obj = { + foo: function() { + /* code */ + }, + bar: function() { + /* code */ + } +};</pre> + +<p>现可被简写为：</p> + +<pre class="brush: js">var obj = { + foo() { + /* code */ + }, + bar() { + /* code */ + } +};</pre> + +<div class="note"> +<p><strong>注意：</strong>简写语法使用命名函数而不是匿名函数（如…<code>foo: function() {}</code>…）。命名函数可以从函数体调用（这对匿名函数是不可能的，因为没有标识符可以引用）。详细信息，请参阅{{jsxref("Operators/function","function","#Examples")}}。</p> +</div> + +<h3 id="生成器方法">生成器方法</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">生成器方法</a>也可以用这种简写语法定义。使用它们时，</p> + +<ul> + <li>简写语法中的星号（*）必须出现在生成器名前，也就是说<code>* g(){}</code>可以正常工作，而<code>g *(){}</code>不行。</li> + <li> + <p>非生成器方法定义可能不包含<code>yield</code>关键字。这意味着<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">遗留的生成器函数</a>也不会工作，并且将抛出 {{jsxref("SyntaxError")}}。始终使用<code>yield</code>与星号（*）结合使用。</p> + </li> +</ul> + +<pre class="brush: js;highlight[12]">// 用有属性名的语法定义方法（ES6之前）： +var obj2 = { + g: function*() { + var index = 0; + while(true) + yield index++; + } +}; + +// 同一个方法，简写语法： +var obj2 = { + * g() { + var index = 0; + while(true) + yield index++; + } +}; + +var it = obj2.g(); +console.log(it.next().value); // 0 +console.log(it.next().value); // 1</pre> + +<h3 id="Async_方法">Async 方法</h3> + +<p>{{jsxref("Statements/async_function", "Async 方法", "", 1)}}也可以使用简写语法来定义。</p> + +<pre class="brush: js">// 用有属性名的语法定义方法（ES6之前）： +var obj3 = { + f: async function () { + await some_promise; + } +}; + +// 同一个方法，简写语法： +var obj3 = { + async f() { + await some_promise; + } +};</pre> + +<h3 id="Async_生成器方法">Async 生成器方法</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">生成器方法</a>也能成为 {{jsxref("Statements/async_function", "async", "", 1)}}.</p> + +<pre class="brush: js">var obj4 = { + f: async function* () { + yield 1; + yield 2; + yield 3; + } +}; + +// The same object using shorthand syntax +var obj4 = { + async* f() { + yield 1; + yield 2;<code> + yield 3; + } +};</code></pre> + +<h3 id="方法定义不是构造函数">方法定义不是构造函数</h3> + +<p>所有方法定义不是构造函数，如果您尝试实例化它们，将抛出{{jsxref("TypeError")}}。</p> + +<pre class="brush: js example-bad">var obj = { + method() {} +}; +new obj.method; // TypeError: obj.method is not a constructor + +var obj = { + * g() {} +}; +new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016) +</pre> + +<h2 id="示例">示例</h2> + +<h3 id="简单示例">简单示例</h3> + +<pre class="brush: js;highlight[3]">var obj = { + a : "foo", + b(){ return this.a; } +}; +console.log(obj.b()); // "foo" +</pre> + +<h3 id="计算的属性名">计算的属性名</h3> + +<p>该简写语法还支持计算的属性名称作为方法名。</p> + +<pre class="brush: js;highlight[4]">var bar = { + foo0: function() { return 0; }, + foo1() { return 1; }, + ['foo' + 2]() { return 2; } +}; + +console.log(bar.foo0()); // 0 +console.log(bar.foo1()); // 1 +console.log(bar.foo2()); // 2</pre> + +<h2 id="规范">规范</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>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>Changed that generator methods should also not have a [[Construct]] trap and will throw when used with <code>new</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">浏览器兼容表是通过一些结构化的数据生成的。如果你想贡献一些兼容数据，请参阅 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并将 pull request 发送给我们。</div> + +<p>{{Compat("javascript.functions.method_definitions")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> +</ul> diff --git a/files/zh-cn/web/javascript/reference/functions/rest_parameters/index.html b/files/zh-cn/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..04ddd4243d --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,168 @@ +--- +title: 剩余参数 +slug: Web/JavaScript/Reference/Functions/Rest_parameters +tags: + - Functions + - JavaScript + - Rest + - Rest parameters +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong>剩余参数</strong>语法允许我们将一个不定数量的参数表示为一个数组。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</div> + + + +<h2 id="语法">语法</h2> + +<pre class="brush: js">function(a, b, ...theArgs) { + // ... +} +</pre> + +<h2 id="描述">描述</h2> + +<p>如果函数的最后一个命名参数以<code>...</code>为前缀，则它将成为一个由剩余参数组成的真数组，其中从<code>0</code>（包括）到<code>theArgs.length</code>（排除）的元素由传递给函数的实际参数提供。</p> + +<p>在上面的例子中，<code>theArgs</code>将收集该函数的第三个参数（因为第一个参数被映射到<code>a</code>，而第二个参数映射到<code>b</code>）和所有后续参数。</p> + +<h3 id="剩余参数和_arguments对象的区别">剩余参数和 <code>arguments</code>对象的区别</h3> + +<p>剩余参数和 <code><a href="/zh-cn/JavaScript/Reference/Functions_and_function_scope/arguments" title="arguments">arguments</a></code>对象之间的区别主要有三个：</p> + +<ul> + <li>剩余参数只包含那些没有对应形参的实参，而 <code>arguments</code> 对象包含了传给函数的所有实参。</li> + <li><code>arguments</code>对象不是一个真正的数组，而剩余参数是真正的 <code><a href="/zh-cn/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></code>实例，也就是说你能够在它上面直接使用所有的数组方法，比如 <code><a href="/zh-cn/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method">sort</a></code><font face="Open Sans, Arial, sans-serif">，</font><code><a href="/zh-cn/JavaScript/Reference/Global_Objects/Array/map" title="Array map method">map</a></code><font face="Open Sans, Arial, sans-serif">，</font><code><a href="/zh-cn/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method">forEach</a></code><font face="Open Sans, Arial, sans-serif">或</font><code><a href="/zh-cn/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method">pop</a></code>。</li> + <li><code>arguments</code>对象还有一些附加的属性 （如<code>callee</code>属性）。</li> +</ul> + +<h3 id="从_arguments_到数组">从 arguments 到数组</h3> + +<p>引入了剩余参数来减少由参数引起的样板代码。</p> + +<pre><code>// Before rest parameters, "arguments" could be converted to a normal array using: + +function f(a, b) { + + var normalArray = Array.prototype.slice.call(arguments); + // -- or -- + var normalArray = [].slice.call(arguments); + // -- or -- + var normalArray = Array.from(arguments); + + var first = normalArray.shift(); // OK, gives the first argument + var first = arguments.shift(); // ERROR (arguments is not a normal array) + +} + +// Now we can easily gain access to a normal array using a rest parameter + +function f(...args) { + var normalArray = args; + var first = normalArray.shift(); // OK, gives the first argument +}</code></pre> + +<h3 id="解构剩余参数">解构剩余参数</h3> + +<p>剩余参数可以被解构，这意味着他们的数据可以被解包到不同的变量中。请参阅<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>。</p> + +<pre class="brush: js">function f(...[a, b, c]) { + return a + b + c; +} + +f(1) // NaN (b and c are undefined) +f(1, 2, 3) // 6 +f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)</pre> + +<h2 id="Example" name="Example">示例</h2> + +<p>因为<code>theArgs</code>是个数组，所以你可以使用<code>length</code>属性得到剩余参数的个数：</p> + +<pre class="brush: js">function fun1(...theArgs) { + alert(theArgs.length); +} + +fun1(); // 弹出 "0", 因为theArgs没有元素 +fun1(5); // 弹出 "1", 因为theArgs只有一个元素 +fun1(5, 6, 7); // 弹出 "3", 因为theArgs有三个元素</pre> + +<p>下例中，剩余参数包含了从第二个到最后的所有实参，然后用第一个实参依次乘以它们：</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(function (element) { + return multiplier * element; + }); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6] +</pre> + +<p>下例演示了你可以在剩余参数上使用任意的数组方法，而<code>arguments</code>对象不可以：</p> + +<pre class="brush: js">function sortRestArgs(...theArgs) { + var sortedArgs = theArgs.sort(); + return sortedArgs; +} + +alert(sortRestArgs(5,3,7,1)); // 弹出 1,3,5,7 + +function sortArguments() { + var sortedArgs = arguments.sort(); + return sortedArgs; // 不会执行到这里 +} + +alert(sortArguments(5,3,7,1)); // 抛出TypeError异常:arguments.sort is not a function +</pre> + +<p>为了在<code>arguments</code>对象上使用<code>Array</code>方法，它必须首先被转换为一个真正的数组。</p> + +<pre class="brush: js">function sortArguments() { + var args = Array.prototype.slice.call(arguments); + var sortedArgs = args.sort(); + return sortedArgs; +} +console.log(sortArguments(5, 3, 7, 1)); // shows 1, 3, 5, 7</pre> + +<h2 id="Specifications" name="Specifications">规范</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>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.functions.rest_parameters")}}</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread operator</a> (also ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments object</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Functions</a></li> + <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li> + <li><a href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a></li> +</ul> diff --git a/files/zh-cn/web/javascript/reference/functions/set/index.html b/files/zh-cn/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..bb49eb1e39 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/functions/set/index.html @@ -0,0 +1,135 @@ +--- +title: setter +slug: Web/JavaScript/Reference/Functions/set +tags: + - ECMAScript 5 + - Functions + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/set +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>当尝试设置属性时，<strong><code>set</code></strong>语法将对象属性绑定到要调用的函数。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</div> + + + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . . }} +{set [expression](<em>val</em>) { . . . }}</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>要绑定到给定函数的属性名。</dd> +</dl> + +<dl> + <dt><code>val</code></dt> + <dd>用于保存尝试分配给<code>prop</code>的值的变量的一个别名。</dd> + <dt>表达式</dt> + <dd>从 ECMAScript 2015 开始，还可以使用一个计算属性名的表达式绑定到给定的函数。</dd> +</dl> + +<h2 id="描述">描述</h2> + +<p>在 javascript 中，如果试着改变一个属性的值，那么对应的 setter 将被执行。setter 经常和 getter 连用以创建一个伪属性。不可能在具有真实值的属性上同时拥有一个 setter 器。</p> + +<p>使用 set 语法时请注意：</p> + +<div> +<ul> + <li>它的标识符可以是数字或字符串；</li> + <li>它必须有一个明确的参数 （详见 <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a>）；</li> + <li>在对象字面量中，不能为一个已有真实值的变量使用 set ，也不能为一个属性设置多个 set。<br> + ( <code>{ set x(v) { }, set x(v) { } }</code> 和 <code>{ x: ..., set x(v) { } }</code> 是不允许的 )</li> +</ul> +</div> + +<h2 id="示例">示例</h2> + +<h3 id="Example_Defining_a_getter_with_the_get_operator" name="Example:_Defining_a_getter_with_the_get_operator">在对象初始化时定义 setter</h3> + +<p>这将定义一个对象 <code><font face="consolas, Liberation Mono, courier, monospace">language</font></code> 的伪属性<code>current</code>，当<code>current</code>被分配一个值时，将使用该值更新<code>log</code>：</p> + +<pre class="brush: js">const language = { + set current(name) { + this.log.push(name); + }, + log: [] +} + +language.current = 'EN'; +console.log(language.log); // ['EN'] + +language.current = 'FA'; +console.log(language.log); // ['EN', 'FA']</pre> + +<p>请注意，<code>current</code>属性是未定义的，访问它时将会返回 <code>undefined</code>。</p> + +<h3 id="Example_Removing_a_setter_with_the_delete_operator" name="Example:_Removing_a_setter_with_the_delete_operator">用 <code>delete</code> 操作符移除一个 setter</h3> + +<p>我们可以使用<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>操作符移除 setter。</p> + +<pre class="brush: js">delete language.current; +</pre> + +<h3 id="使用_defineProperty_为当前对象定义_setter">使用 <code>defineProperty</code> 为当前对象定义 setter</h3> + +<p>我们可以随时使用 {{jsxref("Object.defineProperty()")}} 给一个已经存在的对象添加一个 setter。</p> + +<pre class="brush: js">const o = { a:0 }; + +Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } }); + +o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property +console.log(o.a) // 5</pre> + +<h3 id="使用计算属性名">使用计算属性名</h3> + +<pre class="brush: js">const expr = "foo"; + +const obj = { + baz: "bar", + set [expr](v) { this.baz = v; } +}; + +console.log(obj.baz); // "bar" +obj.foo = "baz"; // run the setter +console.log(obj.baz); // "baz" +</pre> + +<h2 id="规范"><span class="def"><span>规范</span></span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.functions.set")}}</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/get">getter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li> +</ul> |