【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环境中输出的结果表明

在

window

属性中，而

则不会出现在全局对象中；函数

demo

的声明是在全局作用域，所以它归

window

对象所有

📑2.四部曲

预编译步骤：

创建 AO 对象(Activation Object，执行上下文)
找形参和变量声明，将变量和形参作为 AO 属性名，值为 undefined
将实参与形参统一
在函数体里面找函数声明，值赋予函数体
示例：

functionfn(a){
  console.log(a);var a =333;
  console.log(a);functiona(){}
  console.log(a);varb=function(){};
  console.log(b);
  console.log(c);functionc(){}}fn(1);

注意：预编译发生在函数执行之前,创建好了 AO 对象

下面分别对应“四部曲”的每一步：
在这里插入图片描述
📌注意：

执行函数时，会改变 AO 对象中的属性值；
由于变量声明、函数体声明提升，则提升过的忽略；
另外提升的只是声明部分，赋值依旧存在

动图解析预编译的作用结果(仔细观察每一步变化，帮助理解；另外提供一种思路：断点调试(此处不再演示))：
在这里插入图片描述

📑3.全局对象

🔖1.预编译部分

不同点： - 第一步创建一个 GO 对象(Global Object)- 无实参与形参统一- GO===window

示例：

a =100;
console.log(demo);functiondemo(e){functione(){}
  arguments[0]=2;
  console.log(e);
  console.log(c);if(!a){var b =333;functionc(){}}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通常用于强行改变作用域

示例：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title></head><body><scriptsrc="./js/1.js"></script><scriptsrc="./js/2.js"></script></body></html>

//1.jsvar uncover =(function(){var a =1;// 避免污染var b =2;// 避免污染// 暴露为：sayHifunctionhello(){
    console.log("hello world");}// 暴露为：countvar count =1;// 暴露为：arrayvar 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预编译的知识是其语言的特性，同时也是初学者必须掌握的知识点之一

标签： 1024程序员节 javascript 前端

本文转载自: https://blog.csdn.net/Q_3603/article/details/127504926
版权归原作者 好吃懒洋洋 所有，如有侵权，请联系我们删除。

【JS】预编译详解

文章目录

✔️前言

🉐内容

📗作用域

📗

📗预编译

📑1.前奏

📑2.四部曲

📑3.全局对象

🔖1.预编译部分

🔖2.详细介绍——IIFE

📕总结

发表评论

“【JS】预编译详解”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航