浅析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 相关文章推荐
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
关于vue-router路径计算问题
May 10 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
微信小程序转发事件实现解析
Oct 22 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
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
js 调用百度分享功能
2017/02/27 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
pow在python中的含义及用法
2019/07/11 Python
python打印异常信息的两种实现方式
2019/12/24 Python
python如何查看网页代码
2020/06/07 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
房地产还款计划书
2014/01/10 职场文书
自主实习接收函
2014/01/13 职场文书
总经理司机岗位职责
2014/02/06 职场文书
人力资源总监工作说明
2014/03/03 职场文书
高中生操行评语大全
2014/04/25 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle