开发者社区> gavin_hsueh> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

都是Javascript的作用域惹得祸

简介:
+关注继续查看

案件重现

今天有位然之OA系统的定制开发用户咨询了个问题,他想在新加的功能模块的操作面板中,实现用户点击删除按钮时提示友好提醒,如下:

问题很简单,虽然他自己最终达到目的效果了,但不知道起初问题出在哪里。通过交流了解,他开始是这么做的,大致问题代码如下:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        window.onload=function () {
            function confirmdelete() {
                return  window.confirm("你确定要删除吗?");
            }
        }

    </script>
</head>
<body>

</body>
<?php
   echo "<a onclick='confirmdelete()'>删除</a>";
?>


结果未能达到目的,点击删除按钮没有效果,然后这位朋友将window.onload删除后,再试了一下:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
            function confirmdelete() {
                return  window.confirm("你确定要删除吗?");
            }
    </script>
</head>
<body>

</body>
<?php
   echo "<a onclick='return confirmdelete()'>删除</a>";
?>


结果成功了,点击删除按钮成功触发事件,弹出提示框。于是这位朋友就怀疑是不是window.onload将JS代码在页面全部加载完毕后再执行就无效了,是不是代码执行顺序的问题。

事实真的是这样么?


当然不是。相信很多朋友已经发现了真正的问题所在——作用域。

这位朋友起初将confirmdelete函数写成了onload事件的一个内函数,那么confirmdelete就是一个闭包,而删除事件触发后,它是在全局作用域中查找调用函数,由于全局上是找不到这个函数,所以无效。

所以这里我们可以将闭包改为全局变量即可,在JS函数中,声明变量时不用var关键字,则它就是全局变量。代码如下:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        window.onload=function () {
            confirmdelete = function() {
                return  window.confirm("你确定要删除吗?");
            }
        }

    </script>
</head>
<body>

<?php
   echo "<a onclick='confirmdelete()'>删除</a>";
?>
</body>


这样也是同样有效的。最后只好建议这位朋友在深入了解下JS的变量作用域和闭包等概念。



总结:

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

1PZ2b6Oq5UyKFF.gif

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js-作用域&闭包实践与分析
js-作用域&闭包实践与分析
48 0
重学 JavaScript 作用域和闭包(上)
1. 作用域 对于多数编程语言,最基本的功能就是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改。那么有了变量之后,应该把它放在哪里、程序如何找到它们?是否需要提前约定好一套存储变量、访问变量的规则?答案是肯定的,这套规则就是作用域
40 0
重学 JavaScript 作用域和闭包(下)
1. 作用域 对于多数编程语言,最基本的功能就是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改。那么有了变量之后,应该把它放在哪里、程序如何找到它们?是否需要提前约定好一套存储变量、访问变量的规则?答案是肯定的,这套规则就是作用域
47 0
《你不知道的JavaScript》整理(一)——作用域、提升与闭包
最近在读一本进阶的JavaScript的书《你不知道的JavaScript(上卷)》,里面分析了很多基础性的概念。 可以更全面深入的理解JavaScript深层面的知识点。
50 0
「注解」《你不知道的JavaScript(上卷)》第五章:作用域闭包
「注解」《你不知道的JavaScript(上卷)》第五章:作用域闭包
53 0
JS(作用域与闭包)
JS(作用域与闭包) 1.对变量提升的理解 1.变量定义(上下文) 2.函数声明 2.说明 this 几种不同的使用场景 常见用法 1.
1309 0
+关注
gavin_hsueh
专注于web开发相关技术,熟悉html、css、js、php、mysql、linux等相关技术领域
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
Javascript中的对象
立即下载