浅析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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
详解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函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
python3编写C/S网络程序实例教程
2014/08/25 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
python模拟事件触发机制详解
2018/01/19 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
小学教研工作总结2015
2015/05/13 职场文书
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android