平时面试经常会遇到类似下面的这种题,而且千变万化,让人一个头两个。示例这道题算是稍微有点难度的了,这种题考查的是JavaScript引擎执行代码的步骤。

b = 'cba';
function a(a, a){
console.log(a);
console.log(b);
var b = 'abc'; a();
function a(){
console.log(a);
console.log(b);
}
}
a(5,10);

先上理论:

(1)分析脚本的执行过程,也就是全局作用域下的代码。

①创建全局对象GO(window)

②加载脚本代码

③预编译:依此找到var开头的变量声明,把变量加入到全局对象中;找到function开头的函数声明,也放到全局对象中,如果有相同的变量名或函数名,替换之前的;非声明的语句不予理睬;

④解释执行,变量赋值,函数调用

(2)分析每个函数的执行过程

①创建每个函数对象AO(Active Object)

②预编译:创建作用域链;初始化arguments;初始化形参,绑定arguments和形参;找到变量声明加入到AO;找到函数声明加入到AO;

③解释执行

-----------------------------------------------------------------------------------------------------------------------------

具体分析上面的代码:

全局作用域下预编译阶段:
b = 'cba';//忽略,既不是变量声明,也不是函数声明
function a(a, a){//function开头的函数声明,GO加入函数a,函数体忽略
console.log(a);
console.log(b);
var b = 'abc';
a();
function a(){
console.log(a);
console.log(b);
}
}
a(5,10); 全局作用域下解释执行:
b = 'cba';//GO中加入变量b,且赋值为'cba'
function a(a, a){
console.log(a);
console.log(b);
var b = 'abc';
a();
function a(){
console.log(a);
console.log(b);
}
}
a(5,10);//执行函数a,然后生成a的AO 函数a的预编译阶段:
初始化arguments;
初始化形参,两个形参名都为a,后赋的值会替换先赋的值,a先赋值为5,后赋值为10,所以此时变量a为10;
console.log(a);//不是变量声明,忽略
console.log(b);//忽略
var b = 'abc';//是变量声明,将变量b加入到AO,值为undefined
a();//忽略
//函数声明,函数a与形参a同名,替换之前的a=10,此时a为function
function a(){
console.log(a);
console.log(b);
} 函数a解释执行阶段:
console.log(a);//输出function
console.log(b);//输出undefined
var b = 'abc';//变量b赋值'abc'
a();//执行,此处省略分析子函数a的预编译过程
function a(){
console.log(a); //子函数a的AO中没有变量a,向父函数a中寻找,所以输出function
console.log(b); //子函数a的AO中没有变量b,向父函数a中寻找,所有输出'abc'
}

有点乱哈,我写的可能也不是很清楚,不过这个真的很重要,我也是想通过这种方式能让自己加深印象,也希望有需要的人如果看到多少能提供一点帮助。

浅谈javascript引擎执行代码的步骤-(2019-2)的更多相关文章

  1. 浅谈javascript函数执行过程

    javascript函数执行过程: 1. 为函数创建一个执行环境 2. 复制函数的 [[scopes]] 属性中的对象构建起执行环境的作用链域 3. 创建函数活动对象并推入执行环境作用链域的前端 4. ...

  2. 浅谈 JavaScript new 执行过程及function原理

    前言 最近在学习JavaScript语言精粹,感觉写得相当不错.所以这里也算是总结一下.一个方法使用new的方式创建到底是怎样的过程,一个function的声明内部又是怎样执行的呢 另外学的过程中,不 ...

  3. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  4. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  5. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  6. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  7. [转载]浅谈JavaScript函数重载

     原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...

  8. javascript引擎执行的过程的理解--执行阶段

    一.概述 同步更新sau交流学习社区(nodeJSBlog):javascript引擎执行的过程的理解--执行阶段 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍 ...

  9. 浅谈JavaScript中的正则表达式(适用初学者观看)

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

随机推荐

  1. php使用inotify扩展监控文件或目录,如果发生改变,就执行指定命令

    通过inotify扩展监控文件或目录的变化,如果发生变化,就执行命令. 可以应用于 swoole 中,如果文件发生变化,就执行 kill -USR1 进程PID 来实现热更新. <?php cl ...

  2. MySQL EXPLAIN 语句

    对于 MySQL 在执行时来说,EXPLAIN 功能上与 DESCRIBE 一样.实际运用中,后者多用来获取表的信息,而前者多用于展示 MySQL 会如何执行 SQL 语句(Obtaining Exe ...

  3. 2019-6-5-WPF-拼音输入法

    原文:2019-6-5-WPF-拼音输入法 title author date CreateTime categories WPF 拼音输入法 lindexi 2019-6-5 17:6:58 +08 ...

  4. php中搭建Web服务器和服务器配置

    1.搭建Web服务器     1.1目录结构 1.2访问服务器 访问规则:http://服务器ip地址/php页面 比如: http://localhost/demo.php http://127.0 ...

  5. JDK1.8新特性——使用新的方式遍历集合

    JDK1.8新特性——使用新的方式遍历集合 摘要:本文主要学习了在JDK1.8中新增的遍历集合的方式. 遍历List 方法: default void forEach(Consumer<? su ...

  6. ABP进阶教程6 - 布局配置

    点这里进入ABP进阶教程目录 解读参数 l - length changing input control (左上,每页显示记录数) f - filtering input (右上,过滤条件) t - ...

  7. ABP进阶教程2 - 组合查询

    点这里进入ABP进阶教程目录 更新数据传输对象 打开应用层(即JD.CRS.Application)的Course\Dto\GetAllCoursesInput.cs //Course数据传输对象(查 ...

  8. weblogic新增域并进行Jconsole监听

    一.创建域: 第一步,打开域配置界面: [bofm@UAT02-BIZ-ZJCG-AP-002 bin]$ cd /home/software/weblogic/Oracle/Middleware/w ...

  9. Mybatis书写

    Mybatis设置主键和自增 方法1: <insert id="insert" parameterType="Person" useGeneratedKe ...

  10. Shell命令-系统信息及显示之free、cal

    文件及内容处理 - free.cal 1. free:查看系统内存 free命令的功能说明 free 命令用于显示内存状态.free 指令会显示内存的使用情况,包括实体内存,虚拟的交换文件内存,共享内 ...