浅析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代码
Mar 06 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
js闭包的用途详解
Nov 09 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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 更新数据库中断的解决方法
2009/06/05 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
重新认识php array_merge函数
2014/08/31 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
jquery 问答知识整理
2010/02/11 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
wxpython布局的实现方法
2019/11/01 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
优秀管理者获奖感言
2014/02/17 职场文书
担保书格式及范文
2014/04/01 职场文书
说明书怎么写
2014/05/06 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
歌咏比赛主持词
2015/06/29 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers