浅谈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)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
随机推荐
- 使用DataV制作的一个数据报表
之前接到一个做数据报表的需求,当时准备使用echarts自己画.后来考虑时间来不及,着急要,再加上一直在使用阿里云的产品,就在阿里云上个找了找数据大屏的服务.于是很快做出了一款. 然后看到 https ...
- shell 命令 tar -zxvf 解压 tar -zcvf 压缩
tar -zxvf 解压 tar -zcvf 压缩
- 2019-7-3-WPF-使用-Win2d-渲染
原文:2019-7-3-WPF-使用-Win2d-渲染 title author date CreateTime categories WPF 使用 Win2d 渲染 lindexi 2019-07- ...
- Hive表导出成csv文件
命令 hive -e " set hive.cli.print.header=true; #将表头输出 select * from data_table where some_query_c ...
- go-面向对象编程(上)
一个程序就是一个世界,有很多对象(变量) Golang 语言面向对象编程说明 1) Golang 也支持面向对象编程(OOP),但是和传统的面向对象编程有区别,并不是纯粹的面向对 象语言.所以我们说 ...
- MySQL的基本概念和数据操作
1.连接服务器 数据库是CS模式的软件,所以要连接数据库必须要有客户端软件.MySQL数据库默认端口号是3306 1.1window界面连接服务器 1.2通过web窗体 ...
- indexOf()字符位置
package seday01; /** * int indexOf(String str) * 查找给定字符串在当前字符串中的位置,若返回值为-1,则 * 表示当前字符串中不含有给定的内容. * @ ...
- C# vs2017创建Com组件,并注册
1.创建一个普通类库dll项目,如:MyCom. 2.导出接口,添加Guid,Guid为全局唯一标识,可以用VS2017自带工具获取.获取Guid的方法,如图: (1)打开自带Guid工具. (2)首 ...
- 『009』Python
『004』索引-Language Python 准备更新中
- 02vuex-modules
01===> module的理解:将一个大的系统进行拆分 拆分成若干个细的模块 给个模块都有自己的 state mutations 等属性 这样可以在自己的小模块中进行修改 方便维护 modul ...