App下載

Js子函數(shù)如何訪問外部變量？分享三種解決方案

猿友 2021-06-29 17:36:08 瀏覽數(shù) (3585)
反饋

Js 子函數(shù)如何訪問外部變量？分享三種解決方案。我們?cè)趯?web 頁面時(shí)，肯定會(huì)經(jīng)常遇到下面這種情況：

  1. <body>
  2.  
  3. <div class="btns-wrapper"></div>
  4.  
  5. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  6. <script>
  7. var wrapper = $('.btns-wrapper');
  8. for(var i = 0; i < 5; i++){
  9.  var btn = $('<button>按鈕' + i + '</button>').appendTo(wrapper);
  10.  btn.on('click', function(evt){
  11.   console.log('點(diǎn)擊按鈕：' + i);
  12.  });
  13. }
  14. </script>
  15.  
  16. </body>

代碼很簡(jiǎn)單，就是在頁面上創(chuàng)建幾個(gè)按鈕，同時(shí)定義按鈕的點(diǎn)擊事件

可當(dāng)點(diǎn)擊按鈕時(shí)，我們發(fā)現(xiàn)獲取到的序號(hào)一直都是5，也就是 i 最后的值。

這是因?yàn)槎xclick事件時(shí)的匿名函數(shù)所引用的都是同一個(gè)變量 i

解決辦法1：立即執(zhí)行

  1. var wrapper = $('.btns-wrapper');
  2. for(var i = 0; i < 5; i++){
  3.  var btn = $('<button>按鈕' + i + '</button>').appendTo(wrapper);
  4.  
  5.  //默認(rèn)方法
  6.  //btn.on('click', function(evt){
  7.  // console.log('點(diǎn)擊按鈕：' + i);
  8.  //});
  9.  
  10.  //方法1：立即執(zhí)行
  11.  btn.on('click', (function(n){
  12.   return function(evt){
  13.    console.log('點(diǎn)擊按鈕：' + n);
  14.   }
  15.  })(i));
  16.  
  17. }

這種方式就是在定義事件時(shí)直接為每個(gè)按鈕都創(chuàng)建了一個(gè)獨(dú)立的匿名函數(shù)（閉包），并且每個(gè)函數(shù)都持有正確的 i 變量

解決辦法2：利用jquery的事件傳參

  1. var wrapper = $('.btns-wrapper');
  2. for(var i = 0; i < 5; i++){
  3.  var btn = $('<button>按鈕' + i + '</button>').appendTo(wrapper);
  4.  
  5.  //默認(rèn)方法
  6.  //btn.on('click', function(evt){
  7.  // console.log('點(diǎn)擊按鈕：' + i);
  8.  //});
  9.  
  10.  //方法2：利用JQuery的事件傳參
  11.  btn.on('click', { i: i }, function(evt){
  12.   console.log('點(diǎn)擊按鈕：' + evt.data.i);
  13.  });
  14.  
  15. }

這種辦法就簡(jiǎn)單多了，直接利用jquery將參數(shù)體傳遞給匿名函數(shù)即可。

解決辦法3：利用dom的data屬性

  1. var wrapper = $('.btns-wrapper');
  2. for(var i = 0; i < 5; i++){
  3.  var btn = $('<button>按鈕' + i + '</button>').appendTo(wrapper);
  4.  
  5.  //默認(rèn)方法
  6.  //btn.on('click', function(evt){
  7.  // console.log('點(diǎn)擊按鈕：' + i);
  8.  //});
  9.  
  10.  //方法3：利用dom的data屬性
  11.  btn.data('i', i);
  12.  btn.on('click', function(evt){
  13.   console.log('點(diǎn)擊按鈕：' + $(this).data('i'));
  14.  });
  15.  
  16. }

這種方法也很簡(jiǎn)單，弊端就是無法利用data屬性定義結(jié)構(gòu)化的數(shù)據(jù)。

總結(jié)

綜合來看，如果是jquery環(huán)境，利用事件參數(shù)來轉(zhuǎn)遞變量是最簡(jiǎn)單的，而且可以傳遞結(jié)構(gòu)化的數(shù)據(jù)。

否則只能通過立即執(zhí)行（閉包）的方式。

到此這篇關(guān)于JavaScript中子函數(shù)訪問外部變量的文章就介紹到這了,更多相關(guān)JS子函數(shù)訪問外部變量?jī)?nèi)容請(qǐng)搜索我們以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持我們！

JavaScript

0 人點(diǎn)贊