diff options
Diffstat (limited to 'files/zh-cn/web/javascript/reference/functions/arguments')
5 files changed, 646 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> |