App下載

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

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

Js 子函數如何訪問外部變量？分享三種解決方案。我們在寫 web 頁面時，肯定會經常遇到下面這種情況：

  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('點擊按鈕：' + i);
  12.  });
  13. }
  14. </script>
  15.  
  16. </body>

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

可當點擊按鈕時，我們發(fā)現獲取到的序號一直都是5，也就是 i 最后的值。

這是因為定義click事件時的匿名函數所引用的都是同一個變量 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.  //默認方法
  6.  //btn.on('click', function(evt){
  7.  // console.log('點擊按鈕：' + i);
  8.  //});
  9.  
  10.  //方法1：立即執(zhí)行
  11.  btn.on('click', (function(n){
  12.   return function(evt){
  13.    console.log('點擊按鈕：' + n);
  14.   }
  15.  })(i));
  16.  
  17. }

這種方式就是在定義事件時直接為每個按鈕都創(chuàng)建了一個獨立的匿名函數（閉包），并且每個函數都持有正確的 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.  //默認方法
  6.  //btn.on('click', function(evt){
  7.  // console.log('點擊按鈕：' + i);
  8.  //});
  9.  
  10.  //方法2：利用JQuery的事件傳參
  11.  btn.on('click', { i: i }, function(evt){
  12.   console.log('點擊按鈕：' + evt.data.i);
  13.  });
  14.  
  15. }

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

解決辦法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.  //默認方法
  6.  //btn.on('click', function(evt){
  7.  // console.log('點擊按鈕：' + i);
  8.  //});
  9.  
  10.  //方法3：利用dom的data屬性
  11.  btn.data('i', i);
  12.  btn.on('click', function(evt){
  13.   console.log('點擊按鈕：' + $(this).data('i'));
  14.  });
  15.  
  16. }

這種方法也很簡單，弊端就是無法利用data屬性定義結構化的數據。

總結

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

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

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

JavaScript

0 人點贊