前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript的预编译过程分析

JavaScript的预编译过程分析

作者头像
九旬
发布2020-10-23 15:55:14
6460
发布2020-10-23 15:55:14
举报
文章被收录于专栏:九旬大爷九旬大爷

一、JavaScript概念

JavaScript ( JS ) 是一个单线程、解释型的编程语言。

#二、JavaScript语言特点

#2.1 单线程

JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。

#2.2 解释型语言

自上而下,解释一行,执行一行;不会通篇编译为一个文件再执行。

#三、 JavaScript执行过程

#3.1 语法分析

顾名思义 就是检查一遍js代码内有没有出现语法错误(比如少些个分号,多写个括号等);语法分析期间不会执行代码

#3.2 预编译

预编译发生在函数执行的前一刻 全局下: 全局的变量声明和函数声明则会存放在全局对象内(Global Object 简称GO,它是window的一部分,你可以直接把他理解成window对象)中 函数体内: 预编译会提前把函数里的变量声明和函数声明依据规则存放在该活动对象内(Activation Object,简称AO),

预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数 。

预编译大致可分为4步:

  1. 创建AO(GO)对象
  2. 找形参和变量声明,将形参和变量名作为AO(GO)属性名,值为undefined
  3. 将实参值和形参统一
  4. 在函数体里面找函数声明,值赋予函数体。

所以如果遇到下面这种情况,当函数声明和变量声明名称相同时:

代码语言:javascript
复制
console.log(a); 
var a= 1;
function a(){};

编译后的代码其实是:

代码语言:javascript
复制
var a;
function a(){};
console.log(a);
a= 1;

所以最后输出的是:

代码语言:javascript
复制
function a() {}
#预编译小节

预编译两个小规则

  1. 函数声明整体提升—(具体点说,无论函数调用和声明的位置是前是后,系统总会把函数声明移到调用前面)
  2. 变量 声明提升—(具体点说,无论变量调用和声明的位置是前是后,系统总会把声明移到调用前,注意仅仅只是声明,所以值是undefined),只有在解释执行阶段才会进行变量初始化,匿名函数不参与预编译。

预编译前奏

  1. imply global 即任何变量,如果未经声明就赋值,则此变量就位全局变量所有(全局域就是window) 。
  2. 一切声明的全局变量,全是window的属性。
代码语言:javascript
复制
<script>
  var a=2; 
  console.log(window.a);//2
</script>

#3.3 解释执行

预编译完毕之后,JavaScript 脚本开始执行,执行顺序按照从上到下的顺序执行。

#总结

JavaScript执行顺序

  1. 语法分析
  2. 预编译 2.1. 创建AO(GO)对象 2.2. 找形参和变量声明,将形参和变量名作为AO(GO)属性名,值为undefined 2.3. 将实参值和形参统一 2.4. 在函数体里面找函数声明,值赋予函数体。
  3. 解释执行

练习:

代码语言:javascript
复制
function a(a){
    console.log(a);
    a= 2;
    console.log(b);
    var b= 3;
    console.log(a);
}
a(1);
console.log(a);

你可以先试想一下结果,然后复制代码到控制台去验证你的答案是否正确。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-06-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、JavaScript概念
  • #二、JavaScript语言特点
    • #2.1 单线程
      • #2.2 解释型语言
      • #三、 JavaScript执行过程
        • #3.1 语法分析
          • #3.2 预编译
            • #预编译小节
          • #3.3 解释执行
          • #总结
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档