2024年大数据最全JavaScript之预编译学习(附带多个面试题)_预编译面试题，不断提升自己创造溢价的能力

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

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

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

案例分析

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

// 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(c);
}
var a;
test();
a = 10;
console.log(c);

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(c) // 打印的是GO中的c，234
// test执行完毕，AO销毁

4. 分析剩余代码：

a = 10; // GO中的a修改为10
console.log(c) // 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);

答案：

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

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

外链图片转存中…(img-9sWMt1To-1715242655340)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

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