【JS】预编译详解

最新推荐文章于 2024-06-10 22:18:41 发布

好吃懒洋洋

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量588

点赞数 32

分类专栏： JavaScript 文章标签： 1024程序员节 javascript 前端

本文链接：https://blog.csdn.net/Q_3603/article/details/127504926

版权

JavaScript 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

在这里插入图片描述

⌚️⌚️⌚️个人格言：时间是亳不留情的，它真使人在自己制造的镜子里照见自己的真相!
📖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);
})();