<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          一篇文章帶你了解JavaScript 函數(shù)閉包

          共 2792字,需瀏覽 6分鐘

           ·

          2021-05-21 22:52

          點(diǎn)擊上方“前端進(jìn)階學(xué)習(xí)交流”,進(jìn)行關(guān)注

          回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料

          輪臺(tái)東門送君去,去時(shí)雪滿天山路。

          大家好,我是前端進(jìn)階者。

          JavaScript變量屬于 本地 或者 全局 范圍,使用閉包可以讓私有變量成為可能。

          一、全局變量

          一個(gè)函數(shù)可以訪問所有定義在函數(shù) 內(nèi)部 的變量。

          function myFunction() {    var a = 4;    return a * a;}

          但是函數(shù)也可以訪問定義在函數(shù) 之外 的變量。

          var a = 4; //全局變量function myFunction() {   return a * a; }

          第一個(gè)例子中,a是一個(gè)局部變量.。局部變量只能在定義的函數(shù)內(nèi)使用。

          全局變量可以被頁面(和窗口)中所有腳本使用(和更改),具有相同名稱的全局變量和局部變量是不同的變量。修改一個(gè),不修改其他。

          沒有關(guān)鍵字var創(chuàng)建的變量,總是全局的,即使是在函數(shù)中創(chuàng)建的。


          二、變量的生命周期

          全局變量只要應(yīng)用程序(窗口/網(wǎng)頁)存在,它就存在。

          局部變量生命周期較短。它們在函數(shù)被調(diào)用時(shí)被創(chuàng)建,當(dāng)函數(shù)完成時(shí)被刪除。


          三、為什么需要閉包?

          假設(shè)要使用一個(gè)變量來計(jì)數(shù)某物,并且希望該計(jì)數(shù)器可用于所有函數(shù)。可以使用一個(gè)全局變量和一個(gè)增加計(jì)數(shù)器的函數(shù)。這個(gè)時(shí)候就需要閉包。

          案例:一個(gè)計(jì)數(shù)器

          <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</title></head><body style="background-color: aqua;"><p>使用全局變量計(jì)數(shù)</p>
          <button type="button" onclick="myFunction()">計(jì)數(shù)!</button>
          <p id="demo">0</p>
          <script>var counter = 0;
          function add() {return counter += 1;}
          function myFunction() {document.getElementById("demo").innerHTML = add(); /* the counter is now equal to 3*/ } </script></body></html>

          注:

          計(jì)數(shù)器只被add()函數(shù)改變。問題是,頁上的任何腳本可以改變計(jì)數(shù)器,無需調(diào)用add(),如果在函數(shù)中聲明計(jì)數(shù)器,沒有調(diào)用的時(shí)候,沒有人能改變它 add()。

          function add() {   var counter = 0; //局部變量   counter += 1;}
          add();add();add();
          // the counter should now be 3, but it does not work !

          每次都要調(diào)用add()函數(shù),計(jì)數(shù)器被設(shè)置為1。


          四、JavaScript嵌套函數(shù)

          所有函數(shù)都可以訪問全局作用域。

          事實(shí)上,在JavaScript中,所有函數(shù)都能訪問它們外部的變量。JavaScript支持嵌套函數(shù). 嵌套函數(shù)可以訪問它們 上面(外部) 的作用域。

          實(shí)例中, 內(nèi)部函數(shù) plus() 在父函數(shù)中可以訪問 counter 變量。

          function add() {   var counter = 0;   function plus() {counter += 1;}   plus();       return counter;}

          完整代碼:

          <!DOCTYPE html><html><title>項(xiàng)目</title>
          <body style="background-color: aqua;">
          <h2> JavaScript嵌套函數(shù)</h2>
          <p id="output"></p>
          <script>function outer() {var counter = 0;
          function inner() {counter++;}inner();return counter;}
          document.getElementById("output").innerHTML = `計(jì)數(shù)器是: ${outer()}`;</script>
          </body></html>

          如果能從外部調(diào)用plus()函數(shù),這可能已經(jīng)解決了計(jì)數(shù)器的困境,還需要找到一種方法來執(zhí)行 counter = 0 只執(zhí)行一次,需要閉包。


          五、JavaScript 閉包

          自調(diào)用函數(shù)

          變量add被分配了自調(diào)用函數(shù)的返回值,自調(diào)用函數(shù)只運(yùn)行一次. 它將counter設(shè)置為零(0),并返回函數(shù)表達(dá)式。

          var add = (function () {   var counter = 0;   return function () {return counter += 1;}})();
          add();add();add();
          // the counter is now 3

          這樣 add 變成了一個(gè)函數(shù). "精彩的" 部分是它可以在父作用域中訪問counter。

          注:

          這就是所謂的 JavaScript 閉包, 它使函數(shù)有“私有”變量成為可能。counter受匿名函數(shù)的作用域保護(hù), 并且只能使用add函數(shù)修改。


          六、總結(jié)

          本文基于JavaScript基礎(chǔ)。從函數(shù)的基本概念,(變量和全局 )。函數(shù)為什么需要閉包,使用閉包可以讓私有變量成為可能。通過案例(計(jì)數(shù)器)的講解, 以及對(duì)嵌套函數(shù)中閉包的應(yīng)用能夠更好的理解。

          豐富的效果圖的展示,能夠幫助更好的去理解閉包這一概念。

          希望能夠幫助你更好的學(xué)習(xí)JavaScript 。

          ------------------- End -------------------

          往期精彩文章推薦:

          歡迎大家點(diǎn)贊,留言,轉(zhuǎn)發(fā),轉(zhuǎn)載,感謝大家的相伴與支持

          想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群

          萬水千山總是情,點(diǎn)個(gè)【在看】行不行

          瀏覽 50
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  天天干天天av | www.啪啪啪 | 在线国产视频福利 | 欧美成人三级网站 | 鸡巴网站 在线看 |