2024年JavaScript之预编译学习(附带多个面试题)_预编译面试题(1)，面试考点和考点地址

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

b: undefined

}

2. 形参实参相统一

AO :{
a: 1,
b: undefined
}

3. 找函数声明，值赋予函数体

AO :{
a: function a() {},
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)

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】