浅析JavaScript预编译和暗示全局变量


Posted in Javascript onSeptember 03, 2020

1. 暗示全局变量

未声明的变量称为暗示全局变量。

var a = 1; //函数体外声明的变量称为全局变量
b = 2; // 无论函数体外或函数体内未声明的变量都称为暗示全局变量
function fn() {
 var c = 3; //函数体内声明的变量称为局部变量
 d = 4; // 暗示全局变量
}
fn(); // 若不执行函数,则不会进行函数预编译,d 就不会提升为全局变量
console.log(c); // error: c is not defined
console.log(d); // 4

2. JavaScript执行过程

1. 语法分析,若存在低级语法错误,则不编译执行;
2. 预编译,包括变量声明提前和函数声明提前;
3. 解释执行,解释一行,执行一行。

3. 预编译

预编译可分为全局预编译和函数预编译。

预编译可分为全局预编译和函数预编译。

1. 在js脚本加载之后,会先通篇检查是否存在低级错误;
2. 在语法检测完之后,便进行全局预编译;
3. 在全局预编译之后,就解释一行,执行一行;
4. 当执行到函数调用那一行,会先进行函数预编译,再往下执行。

全局预编译:

1. 创建全局对象GO(window对象);
2. 变量声明提前,将所有变量的声明放到最前面,作为GO对象的属性,
并赋值undefined,若存在变量名相同,只声明一个;
3. 函数声明提前,将函数声明也放到最前面,作为GO对象的属性,
若函数名与变量名相同,变量名会被函数名覆盖,值是函数体。
这就是函数定义放到函数调用之前或之后都可以的原因。

函数预编译:

1. 在函数执行前的一瞬间,函数预编译闪亮登场;
2. 先创建一个AO对象(Active Object);
3. 将形参和变量声明提前,赋值undefined,作为AO的属性;
4. 将实参赋值给形参;
5. 函数声明提前,值为函数体,作为AO的属性。

栗子:

var a = 1;
function b(c){
 console.log(c);
 var c = 2;
 console.log(c);
 function c() {}
 var d = 3;
 function e() {}
}
b(4);

先分析全局预编译,

  • 创建GO对象,GO = {};
  • 变量声明提前
// 伪代码
GO = { 
 a = undefined
}
  • 函数声明提前
// 伪代码
GO = { 
 a = undefined
 b = f b(c) { console.log(c); ... }
}

再分析函数预编译,

  • 创建AO对象,AO = {};
  • 形参和变量声明提前;

// 伪代码
AO = { 
c = undefined // 与变量名相同,只声明一个
d = undefined
}
  • 将实参赋值给形参;
// 伪代码
AO = { 
c = 4 // b(4),传入的实参是4
d = undefined
}

  • 函数声明提前

// 伪代码
AO = { 
c = f c() {} // 函数名会覆盖变量名
d = undefined
e = f e() {}
}

所以第一次打印变量c的时候,是输出函数体,而不是实参4。

以上就是浅析JavaScript预编译和暗示全局变量的详细内容,更多关于JavaScript预编译和暗示全局变量的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
Position属性之relative用法
Dec 14 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 #Javascript
JS变量提升及函数提升实例解析
Sep 03 #Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 #Javascript
Vue js with语句原理及用法解析
Sep 03 #Javascript
Vue通过provide inject实现组件通信
Sep 03 #Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 #Javascript
Vue父组件监听子组件生命周期
Sep 03 #Javascript
You might like
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
python图像处理入门(一)
2019/04/04 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
外贸英语专业求职信范文
2013/12/25 职场文书
组织关系转移介绍信
2014/01/16 职场文书
铁路个人事迹材料
2014/01/30 职场文书
小学英语课后反思
2014/04/26 职场文书
新闻发布会策划方案
2014/06/12 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
安全温馨提示语大全
2015/07/14 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
python实现剪贴板的操作
2021/07/01 Python
Python 阶乘详解
2021/10/05 Python
Python实现数据的序列化操作详解
2022/07/07 Python
Nginx报404错误的详细解决方法
2022/07/23 Servers