2024年前端最新JavaScript之预编译学习(附带多个面试题)(4)，面试官问有哪些技术栈

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总

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

题目三

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”);

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总