zoukankan      html  css  js  c++  java
  • javascript代码执行顺序易错点

    使用过javascript都知道,它是一种解释型语言,在浏览器中从上往下解释执行。但是否真的是完 全的从上往下执行的呢?其实这种说
    法是不严谨的,下面有两个简单的代码示例:
     
    示例一:
    <html>
     <head>
      <script type="text/javascript">
       testOne();
       function testOne(){
        alert("Hi");
       }
      </script>
     </head>
     <body>
     </body>
    </html>
        在浏览器中运行这段代码,可能不少人都会认为这段代码会出现错误,因为javascript是从上往下
     
    执行的,当执行testOne()的时候,方法testOne()还没有定义,在实际的开发过程中也确实可能会碰到
     
    这样的错误,当需要获得某个HTML标签的DOM对象时,由于标签还没有加载完毕而出现错误。但是此处并
     
    非如此,代码正确的执行了,界面上弹出对话框,显示“Hi”
     
    示例二:
    <html>
     <head>
      <script type="text/javascript">
       function testOne(){
        alert("Hi");
       }
       testOne();
       function testOne()
       {
        alert("Hello");
       }
      </script>
     </head>
     <body>
     </body>
    </html>
        当执行这段代码时,弹出的对话框显示的信息是“Hello”,而并非是“Hi”。按照javascript代码
     
    从上到下依次执行的原则来说,应该是“Hi”,而不是“Hello”,那这是为什么呢?(在此简单的提一
     
    下,可能有人会认为声明两个同名方法会出现错误,在C#、java等语言中的确无法声明两个同名方法,
     
    但是javascript中可以这么声明,后声明的方法定义会将先声明的方法定义覆盖)
     
        出现以上情况的原因就是如我一开始所说的,“javascript是从上往下执行”这句话是不严谨的,
     
    javascript并非是完全的从上往下执行,其中还有代码优先的问题。规则是方法的声明会先执行,然后
     
    才会执行变量的赋值、方法的调用等其它代码,不论方法声明是写在其它代码前面,还是后面,都会先
     
    执行,当然在这当中,是遵循从上到下执行的原则,写在前面的方法声明先执行,写在后面的就后执行
     
    ,其它代码也是如此。所以在示例一中,虽然testOne方法的调用写在了他声明代码的前面,但由于声明
     
    代码是先执行的,所以这里不会出错,能够打印出“Hi”;示例二中testOne方法声明了两次 ,这两次都
     
    会先于方法的调用而执行,并且由于是同名,第二次会覆盖第一次的方法定义,所以结果不是“Hi”,而
     
    是“Hello”。
        为了大家能够更好的理解,再看一下第三个简单示例:
    示例三:
    <html>
     <head>
      <script type="text/javascript">
       var test=function testOne(){
        alert("Hi");
       }
       test();
       var test=function testOne()
       {
        alert("Hello");
       }
      </script>
     </head>
     <body>
     </body>
    </html>
        这这段代码中输出的结果就是Hi,而不是Hello,因为此时是通过一个指向了方法的变量来调用方法,
     
    方法的声明虽然先执行了,但是变量的赋值、以及方法的调用等代码是按照从上往下的规则来执行的,
     
    当执行test()的时候,只把输出“Hi”的方法赋值给了test变量,所以输出的结果是“Hi”。
  • 相关阅读:
    uni-app开发经验分享四: 实现文字复制到选择器中
    uni-app开发经验分享三: Vuex实现登录和用户信息留存
    uni-app 开发随笔(踩坑记录)
    uni-app开发经验分享二: uni-app生命周期记录
    uni-app开发经验分享一: 多页面传值的三种解决方法
    JS复习笔记一:冒泡排序和二叉树列
    jQ实现图片无缝轮播
    canvas星空背景特效+CSS旋转相册学习
    CSS响应式布局学习笔记(多种方法解决响应式问题)
    LeetCode 76. 最小覆盖子串
  • 原文地址:https://www.cnblogs.com/zhouyifengNET/p/3051234.html
Copyright © 2011-2022 走看看