浅析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中删除指定数组中指定的元素的代码
Feb 12 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
Vuex提升学习篇
Jan 11 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
微信小程序事件流原理解析
Nov 27 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无限级分类方法及代码
2013/06/21 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
理解JS绑定事件
2016/01/19 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
python抽象基类用法实例分析
2015/06/04 Python
Python多线程下载文件的方法
2015/07/10 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
python requests 使用快速入门
2017/08/31 Python
Django 请求Request的具体使用方法
2019/11/11 Python
python ssh 执行shell命令的示例
2020/09/29 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
Linux操作面试题
2015/02/11 面试题
大学竞选班长演讲稿
2014/04/24 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
简易版租房协议书范本
2014/10/13 职场文书