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

更新時間：2021年06月27日 10:19:09 作者：張明玉

任何在函數(shù)中定義的變量,都可認(rèn)為是私有變量,因?yàn)椴荒茉诤瘮?shù)外部訪問這些變量,這篇文章主要給大家介紹了關(guān)于JavaScript中子函數(shù)訪問外部變量的3種解決方法,需要的朋友可以參考下

前言

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

<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('點(diǎn)擊按鈕：' + i);
 });
}
</script>
  
</body>

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

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

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

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

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

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

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

}

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

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

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

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

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

}

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

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

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

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

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

}

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