2024年前端最新面试官最爱考的 javascript 预解析，你搞明白了吗？，前端开发真等于废人

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

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

这种函数定义，函数的调用放在函数前面为什么又会报错了呢，带着疑问我们看下面的解答。

🍓问题解答

---

要了解上面两个坑的原因，我们就要知道javascript中的预解析。

1．我们 js 引擎运行 js 分为两步：预解析和代码执行。

(1)．预解析 ：js 引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面

(2)．代码执行：按照代码书写的顺序从上往下执行。

2．预解析分为变量预解析（变量提升）和函数预解析（函数提升）。

(1)．变量提升就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作。

(2)．函数提升就是把所有的函数声明提升到当前作用于的最前面。

看了上述，是不是对于上面的疑惑解决了，还是懵懵懂懂吗？下面我来复现一下你就明白了。

// // 坑一

// console.log(num);

// var num = 10;

// 相当于执行了以下代码

var num; // 所有的 var 提升到当前作用域的最前面,不提升赋值操作。

console.log(num); //num此时未赋值，所以是undefined。

num = 10;

// // 坑二

// 下面这种函数定义方式，函数的调用在函数前后都可以

// fn();

// function fn(){

// console.log(15);

// }

// 相当于执行下面代码

// 函数提升到当前作用域的最前面

function fn(){

console.log(15);

}

fun();

// 下面这种函数定义方式，函数的调用只能在函数后面

// fun();

// var fun = function(){

// console.log(15);

// }

// 相当于执行了以下代码

var fun; // 所有的 var 提升到当前作用域的最前面,不提升赋值操作。

fun(); // 此时压根没有fun()这个函数，所以会报错

fun = function(){

console.log(15);

}

现在是不是很清楚了。

🍓案例练习

---

🍒案例一

结果是几？

// 案例一

var num=10;

fun();

function fun(){

console.log(num);

var num = 20;

}

// 相当于执行了以下代码

// var num;

// function fun(){

// var num;

// console.log(num); //根据作用域链的就近原则，此时num未赋值，所以是undefined

// num = 20;

// }

// num = 10;

// fun(); // 调用函数

🍒案例二

结果是几？

// 案例二

var num = 10;

function fn(){

console.log(num);

var num = 20;

console.log(num);

}

fn();

// 相当于执行了以下代码

// var num;

// function fn(){

// var num;

// console.log(num); //根据作用域链就近原则，此时num未赋值，所以是undefined

// num = 20;

// console.log(num); // 根据作用域链就近原则,num是20

// }

// num = 10;

// fn(); // 调用函数

🍒案例三

结果是几？

// 案例三

var a = 18;

f1();

function f1(){

var b = 9;

console.log(a);

console.log(b);

var a = ‘123’;

}

// // 相当于执行了以下代码

// var a;

// function f1() {

// var b;

// var a;

// b = 9;

// console.log(a); //根据作用域链就近原则，此时a未赋值，所以是undefined

// console.log(b); // 9

// a = ‘123’;

// }

// a = 18;

// f1();

🍒案例四（经典的面试题）

结果是几？

// 案例四

f1();

console.log©;

console.log(b);

console.log(a);

function f1(){

var a = b = c = 9;

// 相当于var a = 9; b = 9 ; c = 9 ; 在javascript中不用var申明直接赋值的变量是全局变量，所以b,c是全局变量

// 区别于集体声明 var a = 9,b = 9,c = 9; 等价于var a = 9,var b = 9,var c = 9;

console.log(a);

console.log(b);

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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