JavaScript中子函数访问外部变量的3种解决方法-偶像资源网

前言

我们在写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>

代码很简单，就是在页面上创建几个按钮，同时定义按钮的点击事件

JavaScript中子函数访问外部变量的3种解决方法

可当点击按钮时，我们发现获取到的序号一直都是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环境，利用事件参数来转递变量是最简单的，而且可以传递结构化的数据。

否则只能通过立即执行（闭包）的方式。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END