javascript运行机制之执行顺序理解


Posted in Javascript onAugust 03, 2020

       JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜。

       那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语:

      1、代码块

              JavaScript中的代码块是指由<script>标签分割的代码段。例如:

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

            JS是按照代码块来进行编译和执行的,代码块间相互独立,但变量和方法共享。什么意思呢? 举个例子,你就明白了:

<script type="text/javascript">
   alert(str);//因为没有定义str,所以浏览器会出错,下面的不能运行
   alert("我是代码块一");//没有运行到这里
   var test = "我是代码块一变量";
</script>
<script type="text/javascript">
   alert("我是代码块二"); //这里有运行到
   alert(test); //弹出"我是代码块一变量"
</script>

                 上面的代码中代码块一中运行报错,但不影响代码块二的执行,这就是代码块间的独立性,而代码块二中能调用到代码一中的变量,则是块间共享性。

       2、声明式函数与赋值式函数

                JS中的函数定义分为两种:声明式函数与赋值式函数。

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

             声明式函数与赋值式函数的区别在于:在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码。

         3、预编译期与执行期

               事实上,JS的解析过程分为两个阶段:预编译期(预处理)与执行期。

               预编译期JS会对本代码块中的所有声明的变量和函数进行处理(类似与C语言的编译),但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。

<script type="text/javascript">
     Fn();  //执行结果:"执行了函数2",同名函数后者会覆盖前者
     function Fn(){ //函数1
        alert("执行了函数1");
    }
        
     function Fn(){  //函数2
        alert("执行了函数2");
     }
</script>  
<script type="text/javascript">
   Fn(); //执行结果:"执行了声明式函数",在预编译期声明函数及被处理了,所以即使Fn()调用函数放在声明函数前也能执行。
   function Fn(){ //声明式函数
     alert("执行了声明式函数");
   }
    
   var Fn = function(){ //赋值式函数
     alert("执行了赋值式函数");
   }
</script>
//代码块一
<script type="text/javascript">
      alert(str);//浏览器报错,但并没有弹出信息窗
</script>
//代码块二
<script type="text/javascript">
      alert(str); //弹窗"undefined"
      var str = "aaa";
</script>
//js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值,所以导致代码块二中的变量是unfiened的,而代码一中的变量是完全不存在的,所以浏览器报错。

            理解了上面的几个术语,相信大家对JS的运行机制已经有了个大概的印象了,现在我们来看个例子:

<script type="text/javascript">
   Fn(); //浏览器报错:"undefined"
</script>
<script type="text/javascript">
   function Fn(){ //函数1
     alert("执行了函数1");
   }
</script>

              为什么运行上面的代码浏览器会报错呢?声明函数不是会在预处理期就会被处理了吗,怎么还会找不到Fn()函数呢?其实这是一个理解误点,我们上面说了JS引擎是按照代码块来顺序执行的,其实完整的说应该是按照代码块来进行预处理和执行的,也就是说预处理的只是执行到的代码块的声明函数和变量,而对于还未加载的代码块,是没法进行预处理的,这也是边编译边处理的核心所在。

              现在,让我们来总结整理下:

              step 1.  读入第一个代码块。

              step 2.  做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到step5。

              step 3.  对var变量和function定义做“预编译处理”(永远不会报错的,因为只解析正确的声明)。

              step 4.  执行代码段,有错则报错(比如变量未定义)。

              step 5.  如果还有下一个代码段,则读入下一个代码段,重复step2。

              step6. 结束。

             而根据HTML文档流的执行顺序,需要在页面元素渲染前执行的js代码应该放在<body>前面的<script>代码块中,而需要在页面元素加载完后的js放在</body>元素后面,body标签的onload事件是在最后执行的。

<script type="text/javascript">
  alert("first");
  function Fn(){
  	alert("third");
  }
</script>
<body οnlοad="Fn()">
  
</body>
<script type="text/javascript">
  alert("second");
</script>

到此这篇关于javascript运行机制之执行顺序理解的文章就介绍到这了,更多相关javascript运行机制之执行顺序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
解决vue+elementui项目打包后样式变化问题
Aug 03 #Javascript
vue实现PC端分辨率适配操作
Aug 03 #Javascript
浅谈JavaScript中的“!!”作用
Aug 03 #Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 #Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 #Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 #Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 #Javascript
You might like
如何删除多级目录
2006/10/09 PHP
php之readdir函数用法实例
2014/11/13 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python实现批量文件重命名
2019/10/31 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
银行委托书范本
2014/09/28 职场文书
出售房屋协议书范本
2014/10/06 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
中学生运动会广播稿
2015/08/19 职场文书
筑梦中国心得体会
2016/01/18 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库