论js闭包的重要性

很久没写博客了,今天发现了一个很有意思的问题,写下来分享一下

话不多说,贴前端代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btnky").bind('click',function(){
             //发送给服务端
             var postMoney=getMoney();
             alert("发送给后台："+postMoney);
             $.post("to_json.html",{postMoney:postMoney},function(data){
                 alert(data);
             });
        });
    })
    function getMoney(){
            return 1;
    }
</script>
</head>
<body>
<input type="button" value="发送后台" id="btnky">
</body>

 前端一个很简单的ajax提交代码,对不对?通过getMoney()函数 得到一个值,然后发送给后台,注意,该函数是不包含在$()代码块里面的

 后台代码：

 也是很简单的,只是响应用户的发送数据,代码如下：

?
1
2
3
4
5
6
@RequestMapping("/to_json.html")
@ResponseBody
public String to_Json(@RequestParam("postMoney") int postMoney){
    System.out.println("前端发送的钱："+postMoney);
    return "你给服务端发送的money是："+postMoney;
}

OK,万事具备,页面走起!!

页面点击发送

看后台：

 

貌似没错,后台如愿得到我们要的数据

只是,如果有些捣蛋鬼喜欢捣蛋呢?比如我用火狐的firefox注入一个getMoney()方法

好吧,我注入了一个和页面上相同的函数getMoney(),居然返回100000.太坏了..

OK,让我们在点击发送后台按钮,看看是什么情况呢?

天呐.......居然真给变了...

好吧,再看看我们的服务端,是不是也会随波逐流呢?

我已经无语了,这别个捣蛋鬼岂不是能随便传送数据...

不然,如果页面修改一下呢?代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
    $(function(){
        $("#btnky").bind('click',function(){
             //发送给服务端
             var postMoney=getMoney();
             alert("发送给后台："+postMoney);
             $.post("to_json.html",{postMoney:postMoney},function(data){
                 alert(data);
             });
        });
        function getMoney(){
            return 1;
        }
    })
     
</script>
</head>
<body>
<input type="button" value="发送后台" id="btnky">
</body>

 

注意,这次我的getMoney()函数写在$()这个里面去了

OK,我们在刷新页面,做相同的操作,注入一个getMoney

很奇怪呢,居然没有变化,不放心,再看看后台：

也没有变化,是不是很有意思呢?

呵呵,各位有什么看法呢?畅所欲言哦

posted @   Knife4j  阅读(2781)  评论(11)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示