Js 子函數(shù)如何訪問外部變量?分享三種解決方案。我們在寫 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('點擊按鈕:' + i);
- });
- }
- </script>
-
- </body>
代碼很簡單,就是在頁面上創(chuàng)建幾個按鈕,同時定義按鈕的點擊事件
可當點擊按鈕時,我們發(fā)現(xiàn)獲取到的序號一直都是5,也就是 i 最后的值。
這是因為定義click事件時的匿名函數(shù)所引用的都是同一個變量 i
解決辦法1:立即執(zhí)行
- 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:立即執(zhí)行
- btn.on('click', (function(n){
- return function(evt){
- console.log('點擊按鈕:' + n);
- }
- })(i));
-
- }
這種方式就是在定義事件時直接為每個按鈕都創(chuàng)建了一個獨立的匿名函數(shù)(閉包),并且每個函數(shù)都持有正確的 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將參數(shù)體傳遞給匿名函數(shù)即可。
解決辦法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屬性定義結構化的數(shù)據(jù)。
總結
綜合來看,如果是jquery環(huán)境,利用事件參數(shù)來轉(zhuǎn)遞變量是最簡單的,而且可以傳遞結構化的數(shù)據(jù)。
否則只能通過立即執(zhí)行(閉包)的方式。
到此這篇關于JavaScript中子函數(shù)訪問外部變量的文章就介紹到這了,更多相關JS子函數(shù)訪問外部變量內(nèi)容請搜索我們以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持我們!