案件重现
今天有位然之OA 系统的定制开发用户咨询了个问题,他想在新加的功能模块的操作面板中,实现用户点击删除按钮时提示友好提醒,如下:
问题很简单,虽然他自己最终达到目的效果了,但不知道起初问题出在哪里。通过交流了解，他开始是这么做的，大致问题代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script> 6 window.onload=function () { 7 function confirmdelete() { 8 return window.confirm("你确定要删除吗？"); 9 } 10 } 11 12 </script> 13 </head> 14 <body> 15 16 </body> 17 <?php 18 echo "<a onclick='confirmdelete()'>删除</a>"; 19 ?>
结果未能达到目的，点击删除按钮没有效果，然后这位朋友将window.onload删除后，再试了一下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script> 6 function confirmdelete() { 7 return window.confirm("你确定要删除吗？"); 8 } 9 </script> 10 </head> 11 <body> 12 13 </body> 14 <?php 15 echo "<a onclick='return confirmdelete()'>删除</a>"; 16 ?>
结果成功了，点击删除按钮成功触发事件，弹出提示框。于是这位朋友就怀疑是不是window.onload将JS代码在页面全部加载完毕后再执行就无效了，是不是代码执行顺序的问题。
事实真的是这样么？
当然不是。相信很多朋友已经发现了真正的问题所在——作用域。
这位朋友起初将confirmdelete函数写成了onload事件的一个内函数，那么confirmdelete就是一个闭包，而删除事件触发后，它是在全局作用域中查找调用函数，由于全局上是找不到这个函数，所以无效。
所以这里我们可以将闭包改为全局变量即可，在JS函数中，声明变量时不用var关键字，则它就是全局变量。代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script> 6 window.onload=function () { 7 confirmdelete = function() { 8 return window.confirm("你确定要删除吗？"); 9 } 10 } 11 12 </script> 13 </head> 14 <body> 15 16 <?php 17 echo "<a onclick='confirmdelete()'>删除</a>"; 18 ?> 19 </body>
这样也是同样有效的。最后只好建议这位朋友在深入了解下JS的变量作用域和闭包等概念。
总结：
有时困扰大牛的不是前面宽阔难以跨越的激流河道，而是身上甩不掉的苍蝇蚊虫。钻完牛角尖后，回过头来发现问题原来如此简单。是否日复一日地写业务代码写的麻木了？是否发现天天刷怪升级，但技能点却总提不上去？不妨返璞归真，温故而知新。最近自己也深有感触，越来越感受到最可怕的事情莫过于今天过的和昨天没有不同。所以居安思危，每天都要改变，每天都要有提升进步。
