diff options
Diffstat (limited to 'files/zh-cn/web/javascript/reference/functions')
| -rw-r--r-- | files/zh-cn/web/javascript/reference/functions/arguments/index.html | 36 | ||||
| -rw-r--r-- | files/zh-cn/web/javascript/reference/functions/arrow_functions/index.html | 50 |
2 files changed, 43 insertions, 43 deletions
diff --git a/files/zh-cn/web/javascript/reference/functions/arguments/index.html b/files/zh-cn/web/javascript/reference/functions/arguments/index.html index 0cc7216837..8aff3819bd 100644 --- a/files/zh-cn/web/javascript/reference/functions/arguments/index.html +++ b/files/zh-cn/web/javascript/reference/functions/arguments/index.html @@ -35,18 +35,18 @@ translation_of: Web/JavaScript/Reference/Functions/arguments <p><code>arguments</code>对象是所有（非箭头）函数中都可用的<strong>局部变量</strong>。你可以使用<code>arguments</code>对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。例如，如果一个函数传递了三个参数，你可以以如下方式引用他们：</p> -<pre class="brush: js notranslate">arguments[0] +<pre class="brush: js">arguments[0] arguments[1] arguments[2] </pre> <p>参数也可以被设置：</p> -<pre class="brush: js notranslate">arguments[1] = 'new value';</pre> +<pre class="brush: js">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); +<pre class="brush: js">var args = Array.prototype.slice.call(arguments); var args = [].slice.call(arguments); // ES2015 @@ -57,7 +57,7 @@ const args = [...arguments]; <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 class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments)); </pre> </div> @@ -67,7 +67,7 @@ const args = [...arguments]; <p>typeof参数返回 'object'。</p> -<pre class="brush: js notranslate">console.log(typeof arguments); // 'object' +<pre class="brush: js">console.log(typeof arguments); // 'object' // arguments 对象只能在函数内使用 function test(a){ console.log(a,Object.prototype.toString.call(arguments)); @@ -83,13 +83,13 @@ number <p>可以使用索引确定单个参数的类型。</p> -<pre class="brush: js notranslate">console.log(typeof arguments[0]); //this will return the typeof individual arguments.</pre> +<pre class="brush: js">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); +<pre class="brush: js">var args = Array.from(arguments); var args = [...arguments];</pre> <h2 id="Properties" name="Properties">属性</h2> @@ -120,7 +120,7 @@ var args = [...arguments];</pre> <h3 id="遍历参数求和">遍历参数求和</h3> -<pre class="brush: js notranslate">function add() { +<pre class="brush: js">function add() { var sum =0, len = arguments.length; for(var i=0; i<len; i++){ @@ -136,14 +136,14 @@ add(1,2,3,4); // 10</pre> <p>这个例子定义了一个函数来连接字符串。这个函数唯一正式声明了的参数是一个字符串，该参数指定一个字符作为衔接点来连接字符串。该函数定义如下：</p> -<pre class="brush:js notranslate">function myConcat(separator) { +<pre class="brush:js">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" +<pre class="brush:js">// returns "red, orange, blue" myConcat(", ", "red", "orange", "blue"); // returns "elephant; giraffe; lion; cheetah" @@ -156,7 +156,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> <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;">function list(type) { +<pre class="brush:js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;">function list(type) { var result = "<" + type + "l><li>"; var args = Array.prototype.slice.call(arguments, 1); result += args.join("</li><li>"); @@ -167,7 +167,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</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;">var listHTML = list("u", "One", "Two", "Three"); +<pre class="brush:js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="direction: ltr; white-space: pre;">var listHTML = list("u", "One", "Two", "Three"); /* listHTML is: @@ -180,7 +180,7 @@ myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre> <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) { +<pre class="brush: js">function foo(...args) { return args; } foo(1, 2, 3); // [1,2,3] @@ -190,7 +190,7 @@ foo(1, 2, 3); // [1,2,3] <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) { +<pre class="brush: js">function func(a) { arguments[0] = 99; // 更新了arguments[0] 同样更新了a console.log(a); } @@ -199,7 +199,7 @@ func(10); // 99 <p>并且</p> -<pre class="brush: js notranslate">function func(a) { +<pre class="brush: js">function func(a) { a = 99; // 更新了a 同样更新了arguments[0] console.log(arguments[0]); } @@ -208,7 +208,7 @@ func(10); // 99 <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) { +<pre class="brush: js">function func(a = 55) { arguments[0] = 99; // updating arguments[0] does not also update a console.log(a); } @@ -216,7 +216,7 @@ func(10); // 10</pre> <p>并且</p> -<pre class="brush: js notranslate">function func(a = 55) { +<pre class="brush: js">function func(a = 55) { a = 99; // updating a does not also update arguments[0] console.log(arguments[0]); } @@ -224,7 +224,7 @@ func(10); // 10</pre> <p>并且</p> -<pre class="brush: js notranslate">function func(a = 55) { +<pre class="brush: js">function func(a = 55) { console.log(arguments[0]); } func(); // undefined 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 index 7f3ca61168..a3166bf160 100644 --- a/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.html @@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Functions/Arrow_functions <blockquote> <h3 class="brush: js" id="基础语法">基础语法</h3> -<pre class="notranslate">(param1, param2, …, paramN) => { statements } +<pre>(param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression //相当于：(param1, param2, …, paramN) =>{ return expression; } @@ -39,7 +39,7 @@ singleParam => { statements } <h3 id="高级语法">高级语法</h3> <blockquote> -<pre class="brush: js notranslate">//加括号的函数体返回对象字面量表达式： +<pre class="brush: js">//加括号的函数体返回对象字面量表达式： 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> @@ -60,7 +60,7 @@ f(); // 6</pre> <h3 id="更短的函数">更短的函数</h3> -<pre class="brush: js notranslate">var elements = [ +<pre class="brush: js">var elements = [ 'Hydrogen', 'Helium', 'Lithium', @@ -103,7 +103,7 @@ elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9] <p><code>This</code>被证明是令人厌烦的面向对象风格的编程。</p> -<pre class="brush: js notranslate">function Person() { +<pre class="brush: js">function Person() { // Person() 构造函数定义 `this`作为它自己的实例. this.age = 0; @@ -118,7 +118,7 @@ var p = new Person();</pre> <p>在ECMAScript 3/5中，通过将<code>this</code>值分配给封闭的变量，可以解决<code>this</code>问题。</p> -<pre class="brush: js notranslate">function Person() { +<pre class="brush: js">function Person() { var that = this; that.age = 0; @@ -132,7 +132,7 @@ var p = new Person();</pre> <p>箭头函数不会创建自己的<code>this,它只会从自己的作用域链的上一层继承this</code>。因此，在下面的代码中，传递给<code>setInterval</code>的函数内的<code>this</code>与封闭函数中的<code>this</code>值相同：</p> -<pre class="brush: js notranslate">function Person(){ +<pre class="brush: js">function Person(){ this.age = 0; setInterval(() => { @@ -146,7 +146,7 @@ var p = new Person();</pre> <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; }; +<pre><code>var f = () => { 'use strict'; return this; }; f() === window; // 或者 global</code></pre> <p>严格模式的其他规则依然不变.</p> @@ -155,7 +155,7 @@ f() === window; // 或者 global</code></pre> <p>由于 箭头函数没有自己的this指针，通过 <code>call()</code><em> 或</em> <code>apply()</code> 方法调用一个函数时，只能传递参数（不能绑定this---译者注），他们的第一个参数会被忽略。（这种现象对于bind方法同样成立---译者注）</p> -<pre class="brush: js notranslate">var adder = { +<pre class="brush: js">var adder = { base : 1, add : function(a) { @@ -180,7 +180,7 @@ console.log(adder.addThruCall(1)); // 仍然输出 2</pre> <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]; +<pre class="brush: js">var arguments = [1, 2, 3]; var arr = () => arguments[0]; arr(); // 1 @@ -198,7 +198,7 @@ foo(3,2);//6 <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) { +<pre class="brush: js">function foo(arg) { var f = (...args) => args[0]; return f(arg); } @@ -216,7 +216,7 @@ foo(1,2); //2 <p>如上所述，箭头函数表达式对非方法函数是最合适的。让我们看看当我们试着把它们作为方法时发生了什么。</p> -<pre class="brush: js notranslate">'use strict'; +<pre class="brush: js">'use strict'; var obj = { i: 10, b: () => console.log(this.i, this), @@ -232,7 +232,7 @@ obj.c(); <p>箭头函数没有定义this绑定。另一个涉及{{jsxref("Object.defineProperty()")}}的示例：</p> -<pre class="brush: js notranslate">'use strict'; +<pre class="brush: js">'use strict'; var obj = { a: 10 }; @@ -252,14 +252,14 @@ obj.b; // undefined "undefined" Window {postMessage: ƒ, blur: ƒ, focus: ƒ <p>箭头函数不能用作构造器，和 <code>new</code>一起用会抛出错误。</p> -<pre class="brush: js notranslate">var Foo = () => {}; +<pre class="brush: js">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 = () => {}; +<pre class="brush: js">var Foo = () => {}; console.log(Foo.prototype); // undefined</pre> <h3 id="使用_yield_关键字">使用 <code>yield</code> 关键字</h3> @@ -272,7 +272,7 @@ console.log(Foo.prototype); // undefined</pre> <p>在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的<code>return</code>语句。</p> -<pre class="brush: js notranslate">var func = x => x * x; +<pre class="brush: js">var func = x => x * x; // 简写函数 省略return var func = (x, y) => { return x + y; }; @@ -282,7 +282,7 @@ var func = (x, y) => { return x + y; }; <p>记住用<code>params => {object:literal}</code>这种简单的语法返回对象字面量是行不通的。</p> -<pre class="brush: js notranslate">var func = () => { foo: 1 }; +<pre class="brush: js">var func = () => { foo: 1 }; // Calling func() returns undefined! var func = () => { foo: function() {} }; @@ -292,19 +292,19 @@ var func = () => { foo: function() {} }; <p>所以，记得用圆括号把对象字面量包起来：</p> -<pre class="brush: js notranslate">var func = () => ({foo: 1});</pre> +<pre class="brush: js">var func = () => ({foo: 1});</pre> <h2 id="换行">换行</h2> <p>箭头函数在参数和箭头之间不能换行。</p> -<pre class="brush: js notranslate">var func = () +<pre class="brush: js">var func = () => 1; // SyntaxError: expected expression, got '=>'</pre> <p>但是，可以通过在 ‘=>’ 之后换行，或者用 ‘( )’、'{ }'来实现换行，如下：</p> -<pre class="brush: js notranslate">var func = (a, b, c) => +<pre class="brush: js">var func = (a, b, c) => 1; var func = (a, b, c) => ( @@ -327,7 +327,7 @@ var func = ( <p>虽然箭头函数中的箭头不是运算符，但箭头函数具有与常规函数不同的特殊<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">运算符优先级</a>解析规则。</p> -<pre class="brush: js notranslate">let callback; +<pre class="brush: js">let callback; callback = callback || function() {}; // ok @@ -338,7 +338,7 @@ callback = callback || (() => {}); // ok</pre> <h2 id="更多示例">更多示例</h2> -<pre class="brush: js notranslate">// 空的箭头函数返回 undefined +<pre class="brush: js">// 空的箭头函数返回 undefined let empty = () => {}; (() => 'foobar')(); @@ -383,7 +383,7 @@ setTimeout( () => { <h4 id="箭头函数也可以使用条件（三元）运算符：">箭头函数也可以使用条件（三元）运算符：</h4> -<pre class="brush: js notranslate">var simple = a => a > 15 ? 15 : a; +<pre class="brush: js">var simple = a => a > 15 ? 15 : a; simple(16); // 15 simple(10); // 10 @@ -393,7 +393,7 @@ let max = (a, b) => a > b ? a : b;</pre> <p>箭头函数内定义的变量及其作用域</p> </blockquote> -<pre class="brush: js notranslate">// 常规写法 +<pre class="brush: js">// 常规写法 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作用域 @@ -418,7 +418,7 @@ console.log(now); // ReferenceError: now is not defined <h4 id="箭头函数也可以使用闭包：">箭头函数也可以使用闭包：</h4> </blockquote> -<pre class="brush: js notranslate">// 标准的闭包函数 +<pre class="brush: js">// 标准的闭包函数 function A(){ var i=0; return function b(){ @@ -446,7 +446,7 @@ var Add = (i=0)=> ()=> (++i); <h4 id="箭头函数递归"> 箭头函数递归</h4> </blockquote> -<pre class="brush: js notranslate">var fact = (x) => ( x==0 ? 1 : x*fact(x-1) ); +<pre class="brush: js">var fact = (x) => ( x==0 ? 1 : x*fact(x-1) ); fact(5); // 120</pre> <p>规范</p> |