JavaScript预编译和执行过程详解

 更新时间:2022年06月22日 16:08:06   作者:小旭2021  
本文详细讲解了JavaScript预编译和执行过程,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块为范围<script></script>,即每遇到一个代码块都会进行预编译>执行),了解javascript引擎的执行机理,将有助于在写js代码过程中的思路总结。

首先javascript是解释型语言,自然就是编译一行,执行一行。

js运行过程分为三步:
1、语法分析 
2、预编译  
3、解释执行

语法分析就是指js引擎去判断检查你的代码是否存在语法错误,解释执行更不用多说,自然就是执行你的代码,然而重中之重的是预编译,预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数 。

理解预编译首先要明白函数声明和变量赋值:

javascript中的两种声明方式,var和function,前者声明的是变量,后者声明的是方法。

在预编译中,javascript对这两种声明做出了两种处理方案:

<script>
   var a = "1";    //声明变量a
   function b() {    //声明方法b
     alert();
   }
   var c = function () { //声明变量c
     alert();
   }
 </script>

以上代码块中,a、c为变量赋值,b为函数声明,当执行以上的代码时,首先会进入预编译阶段,对与变量赋值a、c会在内存中开辟一块内存空间并指向变量名,且赋值为undefined

预编译(函数执行前)

1. 创建AO对象(Active Object)
2. 查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined
3. 实参形参相统一,实参值赋给形参
4. 查找函数声明,函数名作为AO对象的属性,值为函数引用

题目1:

<script>
  function fn(a) {
    console.log(a)
    var a = 123
    console.log(a)
    function a() {
    }
 
    console.log(a)
    var b = function () {
    }
    console.log(b)
    function d() {
    }
 
    console.log(d)
  }
  fn(1)
</script>

分析:

1)、创建AO对象

AO{
 
}

2)、查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined

AO{
      a:undefined,
      b:undefined,
    }

3)、实参形参相统一,实参值赋给形参

AO{
     a:1,
     b:undefined,
   }

4)、查找函数声明,函数名作为AO对象的属性,值为函数引用

AO{
      a:function a() {
      },
      b:undefined,
      d:function d() {
      }
    }

变量、函数声明后代码顺序

  function fn(a) {
    var a
    var b
 
    function a() {
    }
 
    function d() {
    }
 
    console.log(a)
    a = 123
    console.log(a)
 
    console.log(a)
    b = function () {
    }
    console.log(b)
 
    console.log(d)
  }

解释执行

当执行到a=123之前时: 此时 console.log(a)打印的值为: function a() {}

AO{
    a:function a() {
    },
    b:undefined,
      d:function d() {
    }
  }

当执行到a=123时: 此时 console.log(a)打印的值为: 123 123

AO{
      a:123,
      b:undefined,
      d:function d() {
      }
    }

当执行到b = function () {}时:

此时 console.log(b)打印的值为:function () {}

console.log(d)打印的值为:function d() {}

AO{
     a:123,
     b:function () {
     },
     d:function d() {
     }
   }

浏览器执行结果:

题目2:

<script>
    function test(a, b) {
      console.log(a);
      c = 0;
      var c;
      a = 3;
      b = 2;
      console.log(b);
      function b() {
      }
 
      function d() {
      }
 
      console.log(b)
    }
    test(1)
  </script>

分析:

1)、创建AO对象

AO{
  
}

2)、查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined

AO{
      a:undefined,
      b:undefined,
      c:undefined
    }

3)、实参形参相统一,实参值赋给形参 

AO{
      a:1,
      b:undefined,
      c:undefined
    }

4)、查找函数声明,函数名作为AO对象的属性,值为函数引用 

AO{
    a:1,
    b:function b() {
    },
    c:undefined,
    d:function d() {
    }
  }

变量、函数声明后代码顺序

function test(a, b) {
  var a
  var b
  var c
 
  function b() {
  }
 
  function d() {
  }
 
  console.log(a);
  c = 0;
  a = 3;
  b = 2;
  console.log(b);
  console.log(b)
}

解释执行

当执行到function d() {}之前时: 此时 console.log(a)打印的值为: 1

AO{
      a:1,
      b:function b() {
      },
      c:undefined,
      d:function d() {
      }
    }

当执行到b=2之前时: 此时 console.log(b)打印的值为: 2 2

AO{
      a:1,
      b:2,
      c:0,
      d:function d() {
      }
}

浏览器执行结果:

题目3:

<script>
    function test(a, b) {
      console.log(a);
      console.log(b);
      var b = 234;
      console.log(b);
      a = 123;
      console.log(a);
      function a() {
      }
 
      var a;
      b = 456;
      var b = function () {
      }
      console.log(a);
      console.log(b);
    }
    test(1)
  </script>

分析:

1)、创建AO对象

AO{
   
}

2)、查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined 

AO{
    a:undefined,
    b:undefined
  }

3)、实参形参相统一,实参值赋给形参 

AO{
     a:1,
     b:undefined
   }

4)、查找函数声明,函数名作为AO对象的属性,值为函数引用

AO{
    a:function a() {
    },
   b:undefined
  }

变量、函数声明后代码顺序

function test(a, b) {
   var a;
   var b;
 
   function a() {
   }
 
   console.log(a);
   console.log(b);
   b = 234;
   console.log(b);
   a = 123;
   console.log(a);
   b = 456;
   b = function () {
   }
   console.log(a);
   console.log(b);
 }

解释执行

当执行到function a() {}时:
此时 console.log(a)打印的值为: function a() {}

console.log(b)打印的值为: undefined

AO{
    a:function a() {
    },
    b:undefined
  }

当执行到 b=234时: 此时 console.log(b)打印的值为: 234

AO{
      a:function a() {
      },
      b:234
    }

当执行到 a=123时: 此时 console.log(a)打印的值为: 123

AO{
     a:123,
     b:234
   }

当执行到 b=456 时

AO{
     a:123,
     b:456
   }

当执行到 b = function () {}时:
此时 console.log(a)打印的值为: 123

console.log(b)打印的值为: function () {}

AO{
     a:123,
     b:function () {
     }
   }

浏览器执行结果:

到此这篇关于JavaScript预编译和执行过程的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • php的文件上传入门教程(实例讲解)

    php的文件上传入门教程(实例讲解)

    文件作为一种特殊的表单数据,通过http post请求方式提交至服务器的时候,php会生成一个$_FILES全局数组,相关的文件信息会存放在这个全局数组中。我将在这篇文章中通过一些示例代码来阐述php下的文件上传,并且深入看下关于文件上传内部的实现机制,最后简单说下如何加强这方面的安全性!
    2014-04-04
  • JavaScript中window、doucment、body的解释

    JavaScript中window、doucment、body的解释

    JavaScript中window、doucment、body是什么意思呢,下面为大家做个介绍,不知道的朋友可以参考下
    2013-08-08
  • DOM基础教程之使用DOM控制表格

    DOM基础教程之使用DOM控制表格

    这篇文章主要介绍了DOM基础教程之使用DOM控制表格的相关资料,需要的朋友可以参考下
    2015-01-01
  • 详细谈谈javascript的对象

    详细谈谈javascript的对象

    对象是一种复合值,它将很多值(原始值或其他对象)聚合在一起,可通过属性名访问这些值。而属性名可以是包含空字符串在内的任意字符串。JavaScript对象也可以称作一种数据结构
    2016-07-07
  • js实现通用的微信分享组件示例

    js实现通用的微信分享组件示例

    这篇文章主要介绍了微信分享通用组件,用于微信浏览器内浏览网页的分享信息定义,需要的朋友可以参考下
    2014-03-03
  • JavaScript 学习初步 入门教程

    JavaScript 学习初步 入门教程

    看了《21天学习JavaScript》的视频教程,感觉就是语法好熟悉,和C++类似,和C#类似,和Java类似!幡然悔悟这些语言的语法都是类似的,数据类型,对象方法(或者称之为函数,由于我是个菜鸟所以也数不清楚到底是什么)。
    2010-03-03
  • JavaScript中prototype为对象添加属性的误区介绍

    JavaScript中prototype为对象添加属性的误区介绍

    prototype为对象添加属性的的过程中有些误区,在本文将为大家详细介绍下,感兴趣的朋友可不要错过
    2013-10-10
  • javascript 打开页面window.location和window.open的区别

    javascript 打开页面window.location和window.open的区别

    有时候需要用js来实现页面的打开,因为js下有window.location和window.open的不同实现方法,下面来简单的说明下区别。
    2010-03-03
  • js比较和逻辑运算符的介绍

    js比较和逻辑运算符的介绍

    js比较和逻辑运算符的介绍,需要的朋友可以参考一下
    2013-03-03
  • 详解JavaScript中Date.UTC()方法的使用

    详解JavaScript中Date.UTC()方法的使用

    这篇文章主要介绍了详解JavaScript中Date.UTC()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06

最新评论