博客
关于我
JS中的预编译,如何进行这种行为?
阅读量:71 次
发布时间:2019-02-26

本文共 1790 字,大约阅读时间需要 5 分钟。

前言

预编译,顾名思义就是是做些代码文本的替换工作。是整个编译过程的最先做的工作。JavaScript 的圣经 —— MDN 明确地说过, JavaScript 是一个解释型语言,而并非编译型语言,所以预编译对于JS来说是子虚乌有的。但是人们喜欢称之为预编译其实也无伤大雅,关键在于为什么人们会认为JS存在预编译,是JS的哪种行为让人们觉得它产生了预编译呢?让我们来简单聊一聊。

引入

在代码执行前,编译器会进行如下操作:

一 parse阶段

分词。就是将代码分成原子符号(token)

将token解析翻译成AST(语法生成树)。

二 analyze阶段

  1. 遇到声明语句,将会把声明传到作用域(scope)中创建绑定,分配内存并将变量默认设为undefined或函数体。
    然后就可以执行代码啦,执行中途每次遇到赋值或者取值,都会从作用域中查找绑定。这样看,是不是有点“预编译”内味了?但是实际上还是称它为预处理更加贴切一点。接下来,让我们来了解一波看起来最像预编译的操作–第三步的干货。

“预编译”

我的老师在和我讲相关知识点前和我说过这么一个笑话:

面试时我因为这么一个问题挂了

var a = 100function foo(){       console.log(a)}foo()

问:为什么输出a的值是100?

答:因为100赋值给了a。
老师说完我头昏脑涨,完全不明白笑点在哪,后来才知道这是在考察“预编译”这方面的知识。
总的来说,“预编译”可以分为

创建GO对象(global object) 发生在页面加载完成时

创建AO对象(activation object) 发生在函数执行前一刻

具体步骤如下:

全局预编译1. 创建GO对象2. 找变量声明,将变量声明作为GO对象的属性名,并赋值undefined3. 找全局里的函数声明,将函数名作为GO对象的属性名,值赋予函数体局部预编译1. 创建一个AO对象2. 找形参和变量声明,将形参和变量声明作为AO对象的属性名,值为undefined3. 将实参和形参统一4. 在函数体里找函数声明,将函数名作为AO对象的属性名,值赋予函数体

所以那个笑话里的面试问题我们应该这么回答:

首先,编译器创建一个GO对象找到变量声明 var a和函数声明 function foo(){   }将上面两个变量声明作为GO的属性名赋初值GO{       a:undefined    foo:function(){   }}然后运行第一行代码 a=100在GO中将100赋值给a再执行第五行代码运行foo函数创建一个AO对象在函数体内找变量声明和形参,(无)再在函数体内找函数声明(无)所以AO{       }完成后运行第三行代码,输出a先在AO对象中寻找a的值,发现不存在,向外部作用域扩展,在GO对象中寻找a,发现a的值为100输出100

当然,笑话里的题过于简单,但是能让我们清晰的了解到这个“预编译”的进行

下面,我们来看一道面试题简化版,练练手:

global = 100    function fn() {         console.log(global);       global = 200      console.log(global);       var global = 300    }    fn()

它的逻辑和输出结果是多少呢?通过一步步的分析我们可以知道具体的分析应该是这样的:

GO: {         global: undefined => 100,      fn: function() {   }    }    global = 100 // 没有声明的变量默认为全局变量,也会放到GO中    function fn() {         console.log(global); // 输出undefined      global = 200      console.log(global); // 输出200      var global = 300    }    AO: {         global: undefined => 200 => 300    }    fn()

文章到这里就结束了,希望大家点个赞哈。如果有错误,欢迎评论区指导

转载地址:http://nkbz.baihongyu.com/

你可能感兴趣的文章
MySQL分组函数
查看>>
MySQL分组查询
查看>>
Mysql分表后同结构不同名称表之间复制数据以及Update语句只更新日期加减不更改时间
查看>>
mySql分页Iimit优化
查看>>
MySQL分页查询
查看>>
mysql列转行函数是什么
查看>>
mysql创建函数报错_mysql在创建存储函数时报错
查看>>
mysql创建数据库和用户 并授权
查看>>
mysql创建数据库指定字符集
查看>>
MySql创建数据表
查看>>
MySQL创建新用户以及ERROR 1396 (HY000)问题解决
查看>>
MySQL创建用户与授权
查看>>
MySQL创建用户报错:ERROR 1396 (HY000): Operation CREATE USER failed for 'slave'@'%'
查看>>
MySQL创建索引时提示“Specified key was too long; max key length is 767 bytes”
查看>>
mysql初始密码错误问题
查看>>
MySQL删除数据几种情况以及是否释放磁盘空间【转】
查看>>
Mysql删除重复数据通用SQL
查看>>
mysql判断某一张表是否存在的sql语句以及方法
查看>>
mysql加入安装策略_一键安装mysql5.7及密码策略修改方法
查看>>
mysql加强(1)~用户权限介绍、分别使用客户端工具和命令来创建用户和分配权限
查看>>