【JS】预编译详解
⌚️⌚️⌚️个人格言：时间是亳不留情的，它真使人在自己制造的镜子里照见自己的真相! 📖Git专栏：📑Git篇🔥🔥🔥 📖JavaScript专栏：📑js实用技巧篇，该专栏持续更新中🔥🔥🔥，目的是给大家分享一些常用实用技巧，同时巩固自己的基础，共同进步，欢迎前来交流👀👀👀 👉👉👉你的一键三连是对我的最大支持💙 💜 ❤️
文章目录
✔️前言
本篇给大家带来js语法核心基础之预编译的讲解
🉐内容
📗作用域
- JS有两种作用域：全局作用域和函数作用域
- 内部的作用域能访问外部，反之不行；访问时从内向外依次查找
- 如果在内部的作用域中访问了外部，则会产生闭包(下面是关于闭包简单介绍，后面将会更新”闭包“相关内容)
- 闭包：
- 闭包实际上是一个高级技巧
- 闭包不是 JS 独有的，它是计算机语言中能否支持的一个高级特性（词法作用域的语言，都支持闭包的特性）
- 闭包是由作用域产生的一种现象
- JS 中所有函数都是闭包
- 闭包：
- 内部作用域能访问的外部，取决于函数定义的位置，和调用无关
- 作用域内定义的变量、函数声明会提升到作用域顶部——预编译；在JS中只有
var和function会进行声明提升
示例：
- js语言
broswer环境输出：
- 下图为c++语言特性(vs编辑器中，本文均以该语言作为例子进行对比)：
cpp语言中的i未进行声明提升，即i的作用域仅限for循环当中
📗global、window、document的区别
此处我们介绍这三个对象是为后文的预编译做铺垫，概念比较容易区分，明白差异即可
global：node环境中提供的全局对象window：broswer环境中提供的全局对象document：是window对象的一个属性，即显示于窗口内的一个文档，可理解为你的网页
📗预编译
📑1.前奏
- 暗示全局变量(imply global )：即任何变量，如果未经声明就赋值(js语言的特性，相反在c++中未经声明的变量无法使用)，此变量就归全局对象所有
- 一切声明的全局变量，全是 window 的属性
broswer环境输出：
- 小例子：
demo();
function demo() {
var a = b = 1;
console.log(a,b);
}
console.log(demo);browser环境输出：
函数dmeo为经声明就可正常调用，执行函数demo时，先将1赋值给b，再将b的值赋值给a；虽然a、b是在函数作用域中，但由于b未经声明，所以下面在browser环境中输出的结果表明b 在 window 属性中，而 a 则不会出现在全局对象中；函数demo的声明是在全局作用域，所以它归window对象所有
📑2.四部曲
预编译步骤：
- 创建 AO 对象(Activation Object，执行上下文)
- 找形参和变量声明，将变量和形参作为 AO 属性名，值为 undefined
- 将实参与形参统一
- 在函数体里面找函数声明，值赋予函数体
- 示例：
function fn(a) {
console.log(a);
var a = 333;
console.log(a);
function a() {}
console.log(a);
var b = function () {};
console.log(b);
console.log(c);
function c() {}
}
fn(1);注意：预编译发生在函数执行之前,创建好了 AO 对象
下面分别对应“四部曲”的每一步：
📌注意：
- 执行函数时，会改变 AO 对象中的属性值；
- 由于变量声明、函数体声明提升，则提升过的忽略；
- 另外提升的只是声明部分，赋值依旧存在
动图解析预编译的作用结果(仔细观察每一步变化，帮助理解；另外提供一种思路：断点调试(此处不再演示))：
📑3.全局对象
🔖1.预编译部分
- 不同点：
- 第一步创建一个 GO 对象(Global Object)
- 无实参与形参统一
- GO===window
示例：
a = 100;
console.log(demo);
function demo(e) {
function e() {}
arguments[0] = 2;
console.log(e);
console.log(c);
if (!a) {
var b = 333;
function c() {}
}
var c;
a = 10;
var a;
console.log(b);
f = 222;
console.log(c);
console.log(a);
}
var a;
demo(1);
console.log(a);
console.log(f);GO对象创建：
AO对象创建：
📌注意：if()中嵌套的 function()会被在预编译时创建AO对象过程中忽略，观察两次c的输出
🔖2.详细介绍——IIFE
前面以及提及过全局对象概念，下面再简述下全局对象的几个特点：
- 全局对象的属性可以被直接访问
- 给未声明的变量赋值，实际就是给全局对象的属性赋值，参考前文的预编译
- 所有的全局变量、全局函数都会附加到全局对象 这称之为全局污染，又称之为全局暴露，或简称污染、暴露 如果要避免污染，需要使用立即执行函数改变其作用域 立即执行函数又称之为IIFE，它的全称是Immediately Invoked Function Expression IIFE通常用于强行改变作用域
示例：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./js/1.js"></script>
<script src="./js/2.js"></script>
</body>
</html>//1.js
var uncover = (function () {
var a = 1; // 避免污染
var b = 2; // 避免污染
// 暴露为：sayHi
function hello() {
console.log("hello world");
}
// 暴露为：count
var count = 1;
// 暴露为：array
var array = [666,'222','herm',undefined];
return {
sayHi: hello,
count: count,
array: array,
};
})();//2.js
(function () {
var a = 3; // 避免污染
var b = 4; // 避免污染
// 使用 1.js文件 暴露的函数和变量
uncover.sayHi();
console.log(uncover.array);
console.log(uncover.count);
})();当然，随着ES6的推出，以及词法作用域、模块化开发等知识的加入，此类问题很少再遇到
📕总结
js预编译的知识是其语言的特性，同时也是初学者必须掌握的知识点之一
腾讯云开发者
