JavaScript之预编译学习(附带多个面试题)-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84538278/article/details/138909732

在这里插入图片描述

感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的：

①　2000多本Python电子书（主流和经典的书籍应该都有了）

②　Python标准库资料（最全中文版）

③　项目源码（四五十个有趣且经典的练手项目及源码）

④　Python基础入门、爬虫、web开发、大数据分析方面的视频（适合小白学习）

⑤ Python学习路线图（告别不入流的学习）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

b: undefined,
d: function d() {}

}

4. 预编译过程结束，挨着分析一下`console`的打印结果：

第一个console.log(a); // 此时AO中a的值为function a() {}
执行赋值操作：
a = 123 // AO中的a值修改为123
第二个console.log(a) // 123
第三个console.log(a) // 123
b = function() {} // AO中的b值修改为function b(){}
console.log(b) // function b(){}



### 全局预编译


全局中不存在形参和实参，所以只需处理变量声明和函数声明


#### 全局预编译三部曲


1. 生成`GO(Global Object)`
2. 找变量声明，由于全局变量默认挂载在`window`之上，若`window`当前已存在当前属性，忽略当前操作，若没有，变量作为属性名，值赋予`undefined`。
3. 找函数声明，函数类似与变量，先去`window`上查看，不存在，函数作为函数名，值为函数体


#### 案例分析


将函数预编译案例稍微修改，如下：

// test部分的结果与函数部分相同，再次只分析全局部分
console.log(a);
var a = 1;
console.log(a);
function test(a) {
console.log(a);
var a = 123;
console.log(a);
function a() {}
console.log(a);
console.log(b);
var b = function() {}
console.log(b);
}
test(2);


1. 生成`GO`，变量提升，函数提升，得到`GO`如下:

GO/window: {
a: undefined,
test: function() {}
}

2. 因此第一个`a`的值为`undefined`，随后`a`赋值为`1`，所以第二个`a`的值为`1`



> 
> test中定义了变量a，因此打印的a为自身AO中的值。如果test中没有定义a，就会沿着作用域链，当GO中查找a。
> 
> 
> 


### 注意事项


**1. 当函数中出现同样名称的函数名和变量名，编译器真的会先做变量提升再去函数提升吗？查看了一些大佬的博客，当出现变量名和函数名相同时，变量提升应该会被忽略掉，不会做重复的无用之功**


**2. let/const声明的变量应当同样进行了变量提升，只不过它与var声明的变量做了一定的区分**


### 常见面试题分析


#### 题目一

function test() {
console.log(b);
if (a) {
var b = 100;
}
console.log(b);
c = 234;
console.log©;
}
var a;
test();
a = 10;
console.log©;


1. 生成`GO`

GO: {
a: undefined,
test: function test() {},
c: undefined
}



> 
> JavaScript中变量如果未经声明就赋值，会默认将变量挂载到window对象上，这也就是所谓的`imply global`。c就是`imply global`。
> 
> 
>
2. test执行，生成test的AO

// AO还会存储[[scope]]属性，存储AO的作用域链

AO: {
b: undefined,
[[scope]]: [TestAO, GO]
}



> 
> 有同学会问，`if(a)`为false，if内部不会执行，那test的AO中为什么还会有b啊？预编译并不是执行，它只不过把变量、函数等进行提升，只有在执行时，才会设计代码逻辑的判断。
> 
> 
>
3. 分析test函数执行

console.log(b) // AO中b为undefined
if (a) // AO中无a，沿[[scope]]找到GO中的a，值为undefined
b = 100; // 不执行
console.log(b) // undefined
c = 234; // AO中没有c属性，沿[[scope]]找到GO中的c修改为234
console.log© // 打印的是GO中的c，234
// test执行完毕，AO销毁

4. 分析剩余代码：

a = 10; // GO中的a修改为10
console.log© // GO中c值为234，234



#### 题目二

var foo = 1;
function bar() {
console.log(foo);
if (!foo) {
var foo = 10;
}
console.log(foo);
}

bar();


##### 答案

undefined
10


#### 题目三

var a = 1;
function b() {
console.log(a);
a = 10;
return;
function a() { }
}
b();
console.log(a);


**return; 与上面案例的if一样，预编译环节不会处理**


##### 答案：

function a() { }
1


#### 题目四

console.log(foo);
var foo = “A”;
console.log(foo)
var foo = function () {
console.log(“B”);
}
console.log(foo);
foo();
function foo(){
console.log(“C”);
}
console.log(foo)
foo();


##### 答案：

ƒ foo(){
console.log(“C”);
}
A
ƒ () {
console.log(“B”);
}
B
ƒ () {
console.log(“B”);
}
B


#### 题目五

var foo = 1;

function bar(a) {
var a1 = a;
var a = foo;
function a() {
console.log(a);
}
a1();
}

bar(3);


##### 答案：


`1`


### 总结


预编译的题目多数情况下就可以采用以下原则：


* 函数声明，**整体**提升


如果你也是看准了Python，想自学Python，在这里为大家准备了丰厚的免费**学习**大礼包，带大家一起学习，给大家剖析Python兼职、就业行情前景的这些事儿。



### 一、Python所有方向的学习路线

Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。



![](https://img-blog.csdnimg.cn/img_convert/9f49b566129f47b8a67243c1008edf79.png)

### 二、学习软件



工欲善其必先利其器。学习Python常用的开发软件都在这里了，给大家节省了很多时间。



![](https://img-blog.csdnimg.cn/img_convert/8c4513c1a906b72cbf93031e6781512b.png)



### 三、全套PDF电子书

书籍的好处就在于权威和体系健全，刚开始学习的时候你可以只看视频或者听某个人讲课，但等你学完之后，你觉得你掌握了，这时候建议还是得去看一下书籍，看权威技术书籍也是每个程序员必经之路。

![](https://img-blog.csdnimg.cn/img_convert/eec417a3d4d977b313558a11d3c13e43.png)



### 四、入门学习视频

我们在看视频学习的时候，不能光动眼动脑不动手，比较科学的学习方法是在理解之后运用它们，这时候练手项目就很适合了。



![](https://img-blog.csdnimg.cn/img_convert/ec690501ea1dbe2cb209cbf4013c2477.png)  

![](https://img-blog.csdnimg.cn/img_convert/3eaeaa6747419c9d86c72e0d10d0a6a2.png)



### 四、实战案例

光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。



![](https://img-blog.csdnimg.cn/img_convert/252731a671c1fb70aad5355a2c5eeff0.png)



### 五、面试资料

我们学习Python必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

![](https://img-blog.csdnimg.cn/img_convert/6c361282296f86381401c05e862fe4e9.png)

成为一个Python程序员专家或许需要花费数年时间，但是打下坚实的基础只要几周就可以，如果你按照我提供的学习路线以及资料有意识地去实践，你就有很大可能成功！
最后祝你好运！！！




**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化学习资料的朋友，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618317507)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**