亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js 閉包深入理解與實例分析

 更新時間:2020年03月19日 15:20:55   作者:星耀學(xué)園  
這篇文章主要介紹了js 閉包,結(jié)合實例形式深入分析了JS閉包的概念、原理、使用方法與操作注意事項,需要的朋友可以參考下

本文實例講述了js 閉包。分享給大家供大家參考,具體如下:

1.什么是閉包

定義:是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)

創(chuàng)建閉包:在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)

基本特點 在返回的匿名函數(shù)中 可以調(diào)用外部函數(shù)的變量 如下例中所示 內(nèi)部函數(shù)(匿名函數(shù)) 可以訪問外部函數(shù)的變量num 形式如a[num] 原因是匿名函數(shù)作用域鏈中包括外部函數(shù)test1的作用域

閉包有權(quán)訪問包含函數(shù)內(nèi)部的所有變量 如下面的 外部函數(shù)定義變量d 在閉包中可以直接訪問到d (var dd=d)

 function test1(num){
     var d;

    return function(a,b){
      var d1=a[num],d2=b[num];
      var dd=d;
 }

  }

實例參考 此時點擊產(chǎn)品1 到 產(chǎn)品4 結(jié)果都是5 點擊匿名函數(shù)的作用域鏈中包括外部函數(shù)init的活動對象 都是引用的同一個變量i 都是5 。解決辦法 返回的匿名函數(shù) 通過立即執(zhí)行函數(shù) 把參數(shù)i傳給匿名函數(shù)

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
  <title>閉包演示</title>
  <style type="text/css">
    p {background:gold;}
  </style>
  <script type="text/javascript">
    function init() {
      var pAry = document.getElementsByTagName("p");
      for( var i=0; i<pAry.length; i++ ) {
        pAry[i].onclick = function() {
          alert(i);
        }
      }
    }
   
  </script>
</head>
<body onload="init();">
<p>產(chǎn)品 0</p>
<p>產(chǎn)品 1</p>
<p>產(chǎn)品 2</p>
<p>產(chǎn)品 3</p>
<p>產(chǎn)品 4</p>
</body>
</html>

 彈出結(jié)果都是5截圖 

解決辦法:立即執(zhí)行匿名函數(shù) 參數(shù)i是循環(huán)i的值 傳遞給num形參 匿名函數(shù)里 在創(chuàng)建閉包 可以訪問這個傳遞過來的值num 

pAry[i].onclick = function(num){//......}(i)
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
  <title>閉包演示</title>
  <style type="text/css">
    p {background:gold;}
  </style>
  <script type="text/javascript">
     /*修改后*/
     function init() {
     var pAry = document.getElementsByTagName("p");
     for( var i=0; i<pAry.length; i++ ) {
     pAry[i].onclick = function(num) {

     return function(){
     alert(num)
     }
     }(i)
     }
     }

  </script>
</head>
<body onload="init();">
<p>產(chǎn)品 0</p>
<p>產(chǎn)品 1</p>
<p>產(chǎn)品 2</p>
<p>產(chǎn)品 3</p>
<p>產(chǎn)品 4</p>
</body>
</html>

  結(jié)果點擊第一展示

還有這樣寫也是可以的

 function a(){
      var pAry = document.getElementsByTagName("p");
      for( var i=0; i<pAry.length; i++ ) {
        (function(num){
          pAry[num].onclick = function() {
            alert(num);
          }
        })(i)
      }
    }

1.1 閉包的原理

-1) 閉包的作用域鏈 包括 閉包自身的作用域(一般返回匿名函數(shù)的作用域),外部函數(shù)的作用域(包含的外部函數(shù)),全局作用域

-2)通常,函數(shù)的作用域和所有變量都會在函數(shù)執(zhí)行結(jié)束后被銷毀

-3)函數(shù)返回一個閉包,這個函數(shù)的作用域會一直保存在內(nèi)存中直到閉包不存在為止

使用閉包可以模仿塊級作用域

-1)創(chuàng)建閉包并立即執(zhí)行這個函數(shù) 不會再內(nèi)存中留下該函數(shù)的引用

-2 )結(jié)果 函數(shù)內(nèi)部的所有變量都會被立即銷毀

2.什么是作用域鏈


執(zhí)行環(huán)境:定義了變量或函數(shù)有權(quán)訪問其他數(shù)據(jù),決定它們各自的行為。

變量對象:每個執(zhí)行環(huán)境都有一個與之關(guān)聯(lián)的變量對象。

執(zhí)行環(huán)境定義的所有變量和函數(shù)都保存在變量對象中。編寫代碼無法訪問這個對象,解析器在處理數(shù)據(jù)時會在后臺使用它。

-1)全局執(zhí)行環(huán)境是最外圍的一個執(zhí)行環(huán)境

-2)web瀏覽器中,全局執(zhí)行環(huán)境默認是window對象,因此所有全局變量和函數(shù)都是作為window對象的屬性和方法創(chuàng)建的

-3)某個執(zhí)行環(huán)境中的所有代碼執(zhí)行完畢后,該環(huán)境被銷毀,保存在其中的所有變量和函數(shù)定義都隨之銷毀  全局執(zhí)行環(huán)境直到應(yīng)用程序退出--例如關(guān)閉網(wǎng)頁或瀏覽器時才會被銷毀

-4)每個函數(shù)都有自己的執(zhí)行環(huán)境

作用域鏈:當(dāng)代碼在一個執(zhí)行環(huán)境中執(zhí)行時,會創(chuàng)建變量對象 一個作用域鏈

作用域鏈用途:保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問

標(biāo)識符解析:沿著作用域鏈一級一級的向上搜索標(biāo)識符的過程。

函數(shù)參數(shù)也被當(dāng)做變量來看待,因此訪問規(guī)則與執(zhí)行環(huán)境中的其它變量相同。 例子:下面函數(shù)chageColor(num){} 在閉包里tempColor(a){}里可用a[num]訪問

實例解析

<script type="text/javascript">
  /*全局變量*/
  var color = 'red' ;

  function changeColor(num){
    var otherColor = 'blue',
      another =color,
     chage = changeColor();


      function tempColor(a){
         var temp = otherColor,
           temp2 = color,
           temp3 = changeColor();/*這里可以訪問上層執(zhí)行環(huán)境otherColor another chage 和全局color*/
         var u =a[num];


      }

  }
</script>

  全局 window

             |

             |-------------color 全局變量

             |------------changeColor()

                                             |

                                             |---------------otherColor(局部變量 還有兩個就是調(diào)用的上層全局環(huán)境里的color變量和函數(shù)chageColor)

                                             |---------------tempColor()

                                                                               |-------------------h(變量h不能被上層執(zhí)行環(huán)境調(diào)用 只能在tempColor()里調(diào)用 標(biāo)識符向上搜索沿著作用域鏈 這個環(huán)境里可以調(diào)用外層環(huán)境和全局環(huán)境的變量)

參考:

http://chabaoo.cn/article/183094.htm

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

  • Openlayers實現(xiàn)距離面積測量

    Openlayers實現(xiàn)距離面積測量

    這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)距離面積測量,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • JavaScript異步編程:異步數(shù)據(jù)收集的具體方法

    JavaScript異步編程:異步數(shù)據(jù)收集的具體方法

    我們先嘗試在不借助任何工具函數(shù)的情況下來解決這個問題。筆者能想到的最簡單的方法是:因前一個readFile的回調(diào)運行下一個readFile,同時跟蹤記錄迄今已觸發(fā)的回調(diào)次數(shù),并最終顯示輸出。下面是筆者的實現(xiàn)結(jié)果。
    2013-08-08
  • JavaScript中原型鏈存在的問題解析

    JavaScript中原型鏈存在的問題解析

    本文通過實例給大家介紹js原型鏈存在的問題解析,非常不錯,具有參考借鑒價值,感興趣的朋友一起看看吧
    2016-09-09
  • 淺析JS中對函數(shù)function的理解(基礎(chǔ)篇)

    淺析JS中對函數(shù)function的理解(基礎(chǔ)篇)

    我們知道,在js中,函數(shù)實際上是一個對象,每個函數(shù)都是Function類型的實例,并且都與其他引用類型一樣具有屬性和方法。下面給大家談下對JS中函數(shù)function的理解,一起看看吧
    2016-10-10
  • 淺談js里面的InttoStr和StrtoInt

    淺談js里面的InttoStr和StrtoInt

    下面小編就為大家?guī)硪黄獪\談js里面的InttoStr和StrtoInt。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • 基于Unit PNG Fix.js有時候在ie6下不正常的解決辦法

    基于Unit PNG Fix.js有時候在ie6下不正常的解決辦法

    本篇文章是對Unit PNG Fix.js有時候在ie6下不正常的解決辦法進行了詳細的分析介紹,需要的朋友參考下
    2013-06-06
  • javascript閉包的高級使用方法實例

    javascript閉包的高級使用方法實例

    這篇文章介紹了javascript閉包的高級使用方法實例,有需要的朋友可以參考一下
    2013-07-07
  • javascript 使用 NodeList需要注意的問題

    javascript 使用 NodeList需要注意的問題

    理解NodeList及其近親NamedNodeMap和HTMLCollection,是從整體上透徹理解DOM的關(guān)鍵所在,這三個集合都是“動態(tài)的”,換句話說,每當(dāng)文檔結(jié)構(gòu)發(fā)生變化時,他們都會得到更新。
    2013-03-03
  • 前端uniapp封裝網(wǎng)絡(luò)請求以及實際應(yīng)用教程

    前端uniapp封裝網(wǎng)絡(luò)請求以及實際應(yīng)用教程

    這篇文章主要給大家介紹了關(guān)于前端uniapp封裝網(wǎng)絡(luò)請求以及實際應(yīng)用的相關(guān)資料,在uniapp中進行網(wǎng)絡(luò)測試請求可以通過封裝網(wǎng)絡(luò)請求來實現(xiàn),文中給出了詳細的代碼實例,需要的朋友可以參考下
    2024-01-01
  • JavaScript?中的數(shù)據(jù)類型Number

    JavaScript?中的數(shù)據(jù)類型Number

    這篇文章主要介紹了JavaScript?中的數(shù)據(jù)類型Number,Number?類型使用?IEEE?754?格式表示整數(shù)和浮點值,下文相關(guān)詳細資料介紹,需要的小伙伴可以參考一下
    2022-04-04

最新評論