浅析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编程起步(第五课)
Jan 10 Javascript
asp 的 分词实现代码
May 24 Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
微信小程序入门教程
Nov 18 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
javascript编写简易计算器
2017/05/06 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python程序退出方式小结
2017/12/09 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
汽车维修求职信
2014/06/15 职场文书
公司外出活动方案
2014/08/14 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
黄埔军校观后感
2015/06/10 职场文书