浅析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系列(39):设计模式之适配器模式详解
Mar 04 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
php实现的双向队列类实例
2014/09/24 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
使用Python设计一个代码统计工具
2018/04/04 Python
Python中安装easy_install的方法
2018/11/18 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
毕业生的自我评价
2013/12/30 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
书香校园建设方案
2014/05/02 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
Django与数据库交互的实现
2021/06/03 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
排查Tomcat进程假死的问题
2022/05/06 Servers