浅谈javascript引擎执行代码的步骤-(2019-2)
平时面试经常会遇到类似下面的这种题,而且千变万化,让人一个头两个。示例这道题算是稍微有点难度的了,这种题考查的是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)的更多相关文章
- 浅谈javascript函数执行过程
javascript函数执行过程: 1. 为函数创建一个执行环境 2. 复制函数的 [[scopes]] 属性中的对象构建起执行环境的作用链域 3. 创建函数活动对象并推入执行环境作用链域的前端 4. ...
- 浅谈 JavaScript new 执行过程及function原理
前言 最近在学习JavaScript语言精粹,感觉写得相当不错.所以这里也算是总结一下.一个方法使用new的方式创建到底是怎样的过程,一个function的声明内部又是怎样执行的呢 另外学的过程中,不 ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- 浅谈 JavaScript 编程语言的编码规范
对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...
- 浅谈javascript的原型及原型链
浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...
- [转载]浅谈JavaScript函数重载
原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...
- javascript引擎执行的过程的理解--执行阶段
一.概述 同步更新sau交流学习社区(nodeJSBlog):javascript引擎执行的过程的理解--执行阶段 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍 ...
- 浅谈JavaScript中的正则表达式(适用初学者观看)
浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
随机推荐
- php使用inotify扩展监控文件或目录,如果发生改变,就执行指定命令
通过inotify扩展监控文件或目录的变化,如果发生变化,就执行命令. 可以应用于 swoole 中,如果文件发生变化,就执行 kill -USR1 进程PID 来实现热更新. <?php cl ...
- MySQL EXPLAIN 语句
对于 MySQL 在执行时来说,EXPLAIN 功能上与 DESCRIBE 一样.实际运用中,后者多用来获取表的信息,而前者多用于展示 MySQL 会如何执行 SQL 语句(Obtaining Exe ...
- 2019-6-5-WPF-拼音输入法
原文:2019-6-5-WPF-拼音输入法 title author date CreateTime categories WPF 拼音输入法 lindexi 2019-6-5 17:6:58 +08 ...
- php中搭建Web服务器和服务器配置
1.搭建Web服务器 1.1目录结构 1.2访问服务器 访问规则:http://服务器ip地址/php页面 比如: http://localhost/demo.php http://127.0 ...
- JDK1.8新特性——使用新的方式遍历集合
JDK1.8新特性——使用新的方式遍历集合 摘要:本文主要学习了在JDK1.8中新增的遍历集合的方式. 遍历List 方法: default void forEach(Consumer<? su ...
- ABP进阶教程6 - 布局配置
点这里进入ABP进阶教程目录 解读参数 l - length changing input control (左上,每页显示记录数) f - filtering input (右上,过滤条件) t - ...
- ABP进阶教程2 - 组合查询
点这里进入ABP进阶教程目录 更新数据传输对象 打开应用层(即JD.CRS.Application)的Course\Dto\GetAllCoursesInput.cs //Course数据传输对象(查 ...
- weblogic新增域并进行Jconsole监听
一.创建域: 第一步,打开域配置界面: [bofm@UAT02-BIZ-ZJCG-AP-002 bin]$ cd /home/software/weblogic/Oracle/Middleware/w ...
- Mybatis书写
Mybatis设置主键和自增 方法1: <insert id="insert" parameterType="Person" useGeneratedKe ...
- Shell命令-系统信息及显示之free、cal
文件及内容处理 - free.cal 1. free:查看系统内存 free命令的功能说明 free 命令用于显示内存状态.free 指令会显示内存的使用情况,包括实体内存,虚拟的交换文件内存,共享内 ...