JavaScript中子函數訪問外部變量的3種解決方法

Posted on by

前言

我們在寫web頁面時，肯定會經常遇到下面這種情況：

<body>
  
<div class="btns-wrapper"></div>
  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
 var btn = $('<button>按鈕' + i + '</button>').appendTo(wrapper);
 btn.on('click', function(evt){
  console.log('點擊按鈕：' + i);
 });
}
</script>
  
</body>

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

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

這是因為定義click事件時的匿名函數所引用的都是同一個變量 i

解決辦法1：立即執行

var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
 var btn = $('<button>按鈕' + i + '</button>').appendTo(wrapper);

 //默認方法
 //btn.on('click', function(evt){
 // console.log('點擊按鈕：' + i);
 //});

 //方法1：立即執行
 btn.on('click', (function(n){
  return function(evt){
   console.log('點擊按鈕：' + n);
  }
 })(i));

}

這種方式就是在定義事件時直接為每個按鈕都創建瞭一個獨立的匿名函數（閉包），並且每個函數都持有正確的 i 變量

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

var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
 var btn = $('<button>按鈕' + i + '</button>').appendTo(wrapper);

 //默認方法
 //btn.on('click', function(evt){
 // console.log('點擊按鈕：' + i);
 //});

 //方法2：利用JQuery的事件傳參
 btn.on('click', { i: i }, function(evt){
  console.log('點擊按鈕：' + evt.data.i);
 });

}

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

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

var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
 var btn = $('<button>按鈕' + i + '</button>').appendTo(wrapper);

 //默認方法
 //btn.on('click', function(evt){
 // console.log('點擊按鈕：' + i);
 //});

 //方法3：利用dom的data屬性
 btn.data('i', i);
 btn.on('click', function(evt){
  console.log('點擊按鈕：' + $(this).data('i'));
 });

}

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

總結 

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

否則隻能通過立即執行（閉包）的方式。

到此這篇關於JavaScript中子函數訪問外部變量的文章就介紹到這瞭,更多相關JS子函數訪問外部變量內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：