浅析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小框架 fly javascript framework
Nov 26 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
axios学习教程全攻略
Mar 26 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
vue如何截取字符串
May 06 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
Openlayers绘制地图标注
Sep 28 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 session 检测和注销
2009/03/16 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Laravel下生成验证码的类
2017/11/15 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
javascript去除字符串左右两端的空格
2015/02/05 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
keras 读取多标签图像数据方式
2020/06/12 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
经济管理毕业生求职信
2014/03/15 职场文书
小学三年级学生评语
2014/04/22 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
广告宣传策划方案
2014/05/21 职场文书
学用政策心得体会
2014/09/10 职场文书
停车位租赁协议书
2014/09/24 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2014收银员工作总结范文
2014/12/16 职场文书