浅析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 相关文章推荐
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
Javascript玩转继承(三)
May 08 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
May 19 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
vue的for循环使用方法
Feb 12 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
详解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
PHP4实际应用经验篇(8)
2006/10/09 PHP
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP面向对象概念
2011/11/06 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
js Calender控件使用详解
2015/01/05 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
2017/07/06 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python中的字符串替换操作示例
2016/06/27 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
python定义类的简单用法
2020/07/24 Python
酒店总经理助理职责
2014/02/12 职场文书
工厂车间标语
2014/06/19 职场文书
初三毕业评语
2014/12/26 职场文书
晚会开幕词
2015/01/28 职场文书
售票员岗位职责
2015/02/15 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python