看完这篇文章后,别再说你不懂JS执行机制

案例一:

js 复制代码
showName()
console.log(a);

var a = 1
function showName() {
    console.log("name");
}

/*
输出结果:
 name
 undefined
*/

很多小伙伴要说了,这不是很简单吗?不就是个变量提升

对的,那么面试官 要问了,什么是变量提升

V8:原来你叫变量提升

问题来了,V8如何处理这段代码?

先来说说JS的执行流程:读取代码 -> 编译 -> 执行
编译阶段:

V8会先找到所有变量声明,此时,变量值为undefined,函数只是声明,但不执行

执行阶段:

1、变量赋值(考虑作用域)
2、按照代码书写顺序进行执行

此时,按照顺序,先执行函数内的代码,此时a=undefined,执行console.log(a),再执行赋值操作a = 1。

于是乎,就出现了如下输出结果:

js 复制代码
/*
输出结果:
 name
 undefined
*/

案例二:

js 复制代码
var a =2
function add(b,c){
    return b+c
}

function addAll(b,c){
    var d = 10
    var result = add(b,c)
    return a + result + d
}

addAll(3,6)

有小伙伴又要说了,这不是也很简单吗?根据作用域的规则,到全局变量里找a的值。

对的,那么面试官要问了,为什么要这样找值?

再次代入V8视角:用栈结构(先进后出)演示如何找a的值

有小伙伴可能会问,你的a怎么就赋值了,你在胡说八道吗?我要辩解一下,执行完当前作用域(全局)的变量声明后,当然要执行了,所以a=undefined -> a=2,我这里简写了

案例三

请问,a的输出结果是什么,再用V8视角看待,那么答案就显而易见了

js 复制代码
var a = 1
function fn(a) {
    var a = 2
    function a() { }
    var b = a
    console.log(a) // 2
}
fn(3)
相关推荐
掘金安东尼7 分钟前
解读 hidden=until-found 属性
前端·javascript·面试
1024小神15 分钟前
jsPDF 不同屏幕尺寸 生成的pdf不一致,怎么解决
前端·javascript
古夕26 分钟前
my-first-ai-web_问题记录02:Next.js 15 动态路由参数处理
前端·javascript·react.js
清风不问烟雨z2 小时前
不仅仅是 Mock 服务:mock-h3,让前端也能优雅拥有后端能力
前端·javascript·vite
Lsx_2 小时前
TypeScript 是怎么去查找类型定义的?
前端·javascript·typescript
....4923 小时前
Vue3 + Element Plus 实现可搜索、可折叠、可拖拽的部门树组件
前端·javascript·vue.js
范范之交3 小时前
JavaScript基础语法two
开发语言·前端·javascript
bitbitDown4 小时前
重构缓存时踩的坑:注释了三行没用的代码却导致白屏
前端·javascript·vue.js
xiaopengbc4 小时前
火狐(Mozilla Firefox)浏览器离线安装包下载
前端·javascript·firefox
小高0075 小时前
🔥🔥🔥前端性能优化实战手册:从网络到运行时,一套可复制落地的清单
前端·javascript·面试