zoukankan      html  css  js  c++  java
  • js执行顺序总结

    参考博文:http://www.2cto.com/kf/201401/273825.html

        http://www.jb51.net/article/44123.htm

    http://zhidao.baidu.com/link?url=BNhBPvi-DaTqZCxQ0CfNsBxNS_mWCAu8XsouLraBAkp36vmq7itYKRqxPDOysTc4wU7QpnwUd28XX6W0puV3j9_hBMN5AtM334E3646K9GK

    JavaScript中的代码块是指由<script>标签分割的代码段,可以有多个<script>标签,多个代码块是顺序执行的,所以如下的代码结果会是,先弹出"这是代码块一"的对话框,点击确定之后,才会弹出"这是代码块二"的对话框。

    <script type="text/javascript">
          alert("这是代码块一");
    </script>
    <script type="text/javascript">
          alert("这是代码块二");
    </script>

    声明式函数和赋值式函数

    Js的函数定义分为两种:声明式函数和赋值式函数,请看如下代码示例。

    <script type="text/javascript">
         function Fn(){ //声明式函数
                
         }
            
         var Fn = function{  //赋值式函数
                
         }
    </script>
    View Code

    声明式函数与赋值式函数的区别在于:在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码。这也就说明了一个问题,为什么当js函数的调用在在js函数声明之前,是不会报错的,请看代码,结果是显示对话框,"执行了声明式函数"。

        <script type="text/javascript">
            Fn();  //执行结果:"执行了声明式函数",在预编译期声明函数及被处理了,所以即使函数Fn()的调用放在函数的声明前也能执行。
            function Fn() { //声明式函数
                alert("执行了声明式函数");
            }
        </script>
    View Code

    如果是赋值式函数,就会报错,看代码

        <script type="text/javascript">
            Fn1();//会报错,因为在预处理阶段,不会对赋值式函数进行处理,所以赋值式函 数的调用不能放到赋值式函数的声明之前===0x800a138f - JavaScript 运行时错误: 缺少对象
            var Fn1 = function () {  //赋值式函数
                alert("执行了赋值式函数");
            //Fn1();//如果函数的调用放到这里就不会报错了
            }
        </script>

    但是需要注意的一个问题是:我们的声明式函数可以放在函数调用之后,但是对于变量来说,变量的声明和赋值是不能放到变量调用之后的,看代码 

    <script type="text/javascript">
          alert(str); //结果是,弹窗"undefined"
        ////js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值,所以导致结果是unfiened的。
    var
    str = "aaa"; </script> //

    大家在看下面的代码下面的例子,感觉对undefined理论的解释是行得通的,我也有点儿不明白了。

    <script type="text/javascript">
          alert(str);//因为没有定义str,所以浏览器会出错,下面的不能运行
          alert("我是代码块一");//没有运行到这里
          var test = "我是代码块一变量";
    </script>
    <script type="text/javascript">
          alert("我是代码块二"); //这里有运行到
        alert(test); //弹出"undefined"
    </script>
  • 相关阅读:
    javaScript hook
    封装
    javascript 数字验证
    new 运算符
    指针
    js中的call及apply
    每行显示2条数据的分页
    less语言特性(二) —— 混合
    less语言特性(一) —— 变量
    理解响应式布局设计
  • 原文地址:https://www.cnblogs.com/mrxiaohe/p/5057441.html
Copyright © 2011-2022 走看看