JS函数访问外部变量的方法有哪些?
发布时间：2022-02-22 13:52:28 所属栏目：语言 来源：互联网
导读：JS函数访问外部变量的方法有哪些?其实任何在函数中定义的变量都可认为是私有变量，因为是不能在函数外部访问这些变量的，但是我们可以通用JavaScript中子函数访问外部变量，下文给大家分享了三种方法，感兴趣的朋友可以参考。 前言 我们在写web页面时，肯定
|
JS函数访问外部变量的方法有哪些?其实任何在函数中定义的变量都可认为是私有变量，因为是不能在函数外部访问这些变量的，但是我们可以通用JavaScript中子函数访问外部变量，下文给大家分享了三种方法，感兴趣的朋友可以参考。 前言 我们在写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环境，利用事件参数来转递变量是最简单的，而且可以传递结构化的数据。否则只能通过立即执行（闭包）的方式。 （编辑：信阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
