2024年最全JavaScript之预编译学习(附带多个面试题)(3)，2024年最新web前端面试项目上的难点是什么

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

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

资料截图 ：

高级前端工程师必备资料包

ƒ a() {}

123

123

ƒ () {}

要想弄明白最终的输出结果，就不得不好好学习一下预编译的详细过程。

在预编译学习中，经常听到一句话：函数声明整体提升，变量声明提升。

这句话可以解决大多数场景下的预编译问题，但光凭这句话无法理解透预编译，接下来我们来一起捋一下函数预编译的大致流程。

函数预编译四部曲

1. 预编译开始，会建立AO(Activation Object)对象

2. 找形参和变量声明，使其作为AO的属性名，值赋予undefined

3. 实参和形参相统一(将实参值赋值给形参)

4. 找函数声明，函数名作为AO属性名，值赋予函数体

案例分析

学习了函数的预编译过程，就可以回头细细的品味一下上面的案例：

AO :{

a: undefined,

b: undefined

}

AO :{

a: 1,

b: undefined

}

AO :{

a: function a() {},

b: undefined,

d: function d() {}

}

第一个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);

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©;

GO: {

a: undefined,

test: function test() {},

c: undefined

}

JavaScript中变量如果未经声明就赋值，会默认将变量挂载到window对象上，这也就是所谓的imply global。c就是imply global。

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

AO: {

b: undefined,

[[scope]]: [TestAO, GO]

}

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

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销毁

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

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！