JavaScript ES6和ES5闭包的小demo

<div id="article_content" class="article_content clearfix"> <div class="article-copyright"> <span class="creativecommons"> <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="知识共享许可协议" style="border-width:0" src="https://csdnimg.cn/release/phoenix/images/creativecommons/80x15.png"></a> <span>版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文（</span><a href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons</a>） </span> </div> <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css"> <div id="content_views" class="markdown_views prism-atom-one-light">  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>可能有些小伙伴不知道ES6的写法，这儿先填写一个小例子</p> <pre class="prettyprint"><code class="has-numbering" onclick="mdcp.copyCode(event)"> let connter = (res => { for(var count = 1; ; count++){ console.log(count+'A'); if(count ===5){ return; } console.log(count+'B'); } })(0)

    <div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre>
    <p>注意：这儿采用了箭头函数。</p>
    <p>下面我们正式找出不一样：</p>
    <pre class="prettyprint"><code class="has-numbering" onclick="mdcp.copyCode(event)">
    // ES6闭包
    let makeAdder =(x =&gt;{
        return (y=&gt;{
            return x+y;
        })  
    })


    var add5 = makeAdder(5);
    console.log(add5(2));//7

    var add6 = makeAdder(10);
    console.log(add10(2));//12
    <div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li></ul></pre>
    <p>下面是ES5的闭包</p>
    <pre class="prettyprint"><code class="has-numbering" onclick="mdcp.copyCode(event)">
    //es5语法闭包
    function makeAdder2(x) {
        return function(y) {
        return x + y;
        };
    }
    

    var add8 = makeAdder2(8);
    console.log(add8(2));//10


    var add9 = makeAdder2(10);
    console.log(add8(2));//12


    <div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li></ul></pre>
    <p>从上面可以看出，输出的过值都是一样的，但ES6使代码更简洁，更具有高效性，在性能上超过ES5。</p>

                                        </div>
                    <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-e44c3c0e64.css" rel="stylesheet">
                        </div>

来源：oschina

链接：https://my.oschina.net/u/4409332/blog/3291027

标签

phoenix

javascript

highlight

Markdown

webkit