`
GavinHsueh
  • 浏览: 71531 次
文章分类
社区版块
存档分类
最新评论

都是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的变量作用域和闭包等概念。

 

 

总结:

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

分享到:
评论

相关推荐

    深入理解JavaScript作用域和作用域链

    JavaScript作用域是编程中至关重要的概念,它规定了变量和函数的可见性及生命周期。JavaScript主要有两种作用域:全局作用域和局部作用域。 全局作用域是指在代码的任何位置都可以访问的变量或函数,这通常包括在最...

    JavaScript作用域原理

    JavaScript作用域是编程中至关重要的概念,它定义了变量、函数和对象的可见性和生命周期。在JavaScript中,作用域主要分为两种类型:全局作用域和局部作用域。此外,随着ES6的引入,块级作用域和函数作用域也变得...

    深化理解javascript作用域其次篇之词法作用域和动态作用域_.docx

    深化理解javascript作用域其次篇之词法作用域和动态作用域_ 深化理解javascript作用域其次篇之词法作用域和动态作用域,是javascript中非常重要的一部分。理解词法作用域和动态作用域对javascript的编程至关重要。...

    深入理解JavaScript作用域共12页.pdf.zip

    JavaScript作用域是编程中至关重要的概念,尤其是在JavaScript这种动态类型的脚本语言中。它规定了变量、函数以及其它标识符的可见性和生命周期,是代码组织和管理的关键元素。本资料"深入理解JavaScript作用域共12...

    JavaScript作用域示例详解_.docx

    JavaScript作用域是编程中至关重要的概念,它规定了变量和函数的可见性和生命周期。了解JavaScript作用域对于编写高效、安全的代码至关重要。本篇将详细解释JavaScript作用域的几个核心特性,包括无块级作用域、函数...

    javascript作用域

    讨论javascript作用域,很多人被javascript作用域搞迷糊了,这个应该有用。

    关于JavaScript作用域你想知道的一切

    Javacript 中有一系列作用域的概念。对于新的JS的开发人员无法理解这些概念,甚至一些经验丰富的开发者也未必能。这篇文章主要目的帮助理解JavaScript中的一些概念如:scope,closure, this, namespace, function ...

    深入理解JavaScript作用域.pdf

    深入理解JavaScript作用域

    Javascript的词法作用域分析.pdf

    Javascript词法作用域分析 Javascript中的词法作用域分析是指变量的作用域不是在执行时决定的,而是在定义时决定的,也就是说通过静态分析就能确定。因此,词法作用域也叫做静态作用域。 在Javascript中,一个方法...

    JavaScript: 函数与作用域深入解析及应用场景

    接着讨论了 JavaScript 中的全局作用域、局部作用域、块级作用域和函数作用域,特别是闭包的概念。随后,文章探讨了函数的高级用法,如递归函数、高阶函数和立即执行函数表达式(IIFE)。最后,通过实际应用示例,如...

    再探JavaScript作用域

    js没有块级作用域(你可以自己闭包或其他方法实现),只有函数级作用域,函数外面的变量函数里面可以找到,函数里面的变量外面找不到。 first try: 这是为什么呢?? var a = 10; function aaa(){//step-4 ...

    深入浅析JavaScript中的作用域和上下文

    JavaScript中,作用域和上下文是理解代码执行逻辑的关键概念。作用域指的是变量和函数的可见性和生命周期,而上下文则关乎`this`关键字的值,它指示了当前代码执行的环境。 **作用域(Scope)** 1. **全局作用域**...

    javascript的作用域和块级作用域概念理解.doc

    javascript的作用域和块级作用域概念理解.doc

    JavaScript程序设计-变量作用域.pdf

    作用域链是JavaScript中实现作用域机制的一种方式,它是由一系列作用域构成的链状结构,每个函数都有自己的作用域链,用于在查找变量时提供路径。当尝试访问一个变量时,JavaScript会首先在当前作用域查找,如果没有...

    基于JavaScript的变量作用域的辨析.pdf

    所有面向对象的编程语言都有某种形式的作用域,JavaScript也不例外。 在JavaScript中,有全局变量和局部变量之分,其作用域由函数约束。全局变量是定义在所有函数体之外,其作用域是所有函数;而局部变量是定义在...

    深入理解javascript作用域第二篇之词法作用域和动态作用域

    本文是深入理解javascript作用域系列第二篇——词法作用域和动态作用域 词法作用域  第一篇介绍过,编译器的第一个工作阶段叫作分词,就是把由字符组成的字符串分解成词法单元。这个概念是理解词法作用域的基础  ...

    【温故而知新】JavaScript作用域.md

    【温故而知新】JavaScript作用域

Global site tag (gtag.js) - Google Analytics