都是Javascript的作用域惹得祸

案件重现

 

今天有位然之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的变量作用域和闭包等概念。


 


总结：


 


有时困扰大牛的不是前面宽阔难以跨越的激流河道，而是身上甩不掉的苍蝇蚊虫。钻完牛角尖后，回过头来发现问题原来如此简单。是否日复一日地写业务代码写的麻木了？是否发现天天刷怪升级，但技能点却总提不上去？不妨返璞归真，温故而知新。最近自己也深有感触，越来越感受到最可怕的事情莫过于今天过的和昨天没有不同。所以居安思危，每天都要改变，每天都要有提升进步。









            

            
posted @ 
 
Gavin丶Hsueh 
阅读(163) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· AI与.NET技术实操系列（二）：开始使用ML.NET
    

· 记一次.NET内存居高不下排查解决与启示
    

· 探究高空视频全景AR技术的实现原理
    

· 理解Rust引用及其生命周期标识（上）
    

· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
    



    

    阅读排行：
    

 ·          全程不用写代码，我用AI程序员写了一个飞机大战
        

 ·          DeepSeek 开源周回顾「GitHub 热点速览」
        

 ·          记一次.NET内存居高不下排查解决与启示
        

 ·          MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
        

 ·          .NET10 - 预览版1新功能体验（一）
        



    

    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
AI FOR CODE 大赛