今天小编给大家分享一下Js子函数怎么访问外部变量的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
Js 子函数如何访问外部变量？分享三种解决方案。我们在写 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
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 变量
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将参数体传递给匿名函数即可。
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属性定义结构化的数据。
以上就是“Js子函数怎么访问外部变量”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
