diff options
Diffstat (limited to 'files/zh-cn/web/javascript/reference/functions/arrow_functions/index.html')
| -rw-r--r-- | files/zh-cn/web/javascript/reference/functions/arrow_functions/index.html | 50 |
1 files changed, 25 insertions, 25 deletions
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> |