【JavaScript】变量提升 - 函数提升 - 执行上下文 - 执行上下文栈

通过打印结果我们能看出a的值为undefined而不是3，这是为什么呢？因为这里存在两个知识点：作用域和变量提升。由于log在局部作用域(函数作用域)中，通过作用域链的“就近原则”我们知道，它会先从函数作用域里寻找变量a，再去寻找全局作用域，而又因为变量提升的缘故，导致最终结果为undefined。

实际上这块代码应该是这样的：

var a = 3

function fn() {

var a;

console.log(a) //undefined

a = 4

}

fn()

这样就很好理解了吧！

2. 函数(声明)提升

---

通过function声明的函数，在之前就可以直接调用

值：函数定义(对象)

fn1()

function fn1() {

console.log(‘fn1’) //fn1

}

相当于：

function fn1() {

console.log(‘fn1’)

}

fn1()

从以上代码结果我们可以看出，用function定义的函数，先调用后声明依然可以成功

我们通过打断点的方式来理解解析js代码的流程：

console.log(b)

fn1()

var b = 3

function fn1() {

console.log(‘fn1’) //fn1

}

在执行js代码的开始，也就是在执行第15行时，我们就可以看到window对象已经包含了b变量与函数f1了，也就是说，在代码执行之前，用var声明变量b与用function定义的函数f1已经提前在window对象上创建了，所以说白了,在提前访问的时候，也就是在访问window对象上的变量b与函数f1，这就是为什么会出现变量/函数提升了。

---

我们以上说的无论是变量提升还是声明提升都是一个结果，是一个现象的结果，那接下来我们讨论一下：是什么导致了这样的结果？

二、执行上下文

==========================================================================

我们都知道代码在位置上分为：

1. 全局代码

2. 函数(局部)代码

console.log(a1) //相当于console.log(window.a1)

a2() //相当于window.a2()

var a1 = 3

funciton a2() {

console.log(‘a2’)

}

我们都知道在执行代码之前 a1 和a2已经存在于window里了，说明在执行全局代码之前，js引擎肯定做了一些准备工作

1. 全局执行上下文

---

准备工作：

1. 在执行全局代码前将window确定为全局执行上下文

2. 对全局数据进行预处理(预编译)

①var定义的全局变量 ------> undefined， 添加为window的属性

②function声明的全局函数 --------> 赋值(fun)，添加为window的方法

③this --------> 赋值(window)

3. 开始执行全局代码

总结：也就是说，我们访问用var声明的变量或者用function定义函数，都会从全局上下文(window)找

2. 函数执行上下文

---

function fn(a1) {

console.log(a1); //2

console.log(a2); //undefined

a3() //a3

console.log(this); //window

console.log(arguments) //伪数组(2,3)

var a2 = 3

function a3() {

console.log(‘a3’);

}

}

fn(2,3)

准备工作：

1. 在调用函数后，准备执行函数体之前，创建对应的函数执行上下文对象(虚拟的，存在于栈中)

2. 对局部数据进行预处理(预编译)

①形参变量--------> 赋值(实参)，添加为(该函数的)执行上下文的属性

②argument--------> 赋值(实参列表)，添加为(该函数的)执行上下文的属性

①var定义的全局变量 ------> undefined， 添加为(该函数的)执行上下文的属性

②function声明的全局函数 --------> 赋值(fun)，添加为(该函数的)执行上下文的方法

③this --------> 赋值(调用函数的对象)

3. 开始执行全局代码

---

三、执行上下文栈

===========================================================================

//1.进入全局执行上下文

var a = 10

var bar = function(x) {

var b = 5

foo(x + b) //foo能够重新调用吗？ //3.进入foo函数执行上下文

}

var foo = function(y) {

var c = 5

console.log(a + c + y);

}

bar(10) //2.进入bar函数执行上下文

可能有些人会有疑问foo在bar函数里，那么foo函数会执行吗？ 会的。因为是先定义的foo函数，然后再调用bar，而在调用foo函数时，window上已经存在了。

相当于：

var a;

var bar;

var foo;

a = 10

bar = function(x) {

var b = 5

foo(x + b)

}

foo = function(y) {

var c = 5

console.log(a + c + y);

}

bar(10)

这样就很好理解了吧！

---

那么，以上代码块总共创建了几个执行上下文呢？

3个：window执行上下文、bar执行上下文、foo执行上下文

得出结论：n + 1 个

n：调用了几个函数

1：window

那么，有这么多的执行上下文，我们就需要用栈来管理它们

1.在全局代码执行前,JS引擎就会创建一个栈来存储管理所有的执行上下文对象

2.在全局执行上下文(window)确定后,将其添加到栈中(压栈)

3.在函数执行上下文创建后,将其添加到栈中(压栈)

4.在当前函数执行完后,将栈顶的对象移除(出栈)

5.当所有的代码执行完后,栈中只剩下window

---

四、经典面试题

==========================================================================

面试题1

---

1. 依次输出什么？

2. 整个过程中产生了几个执行上下文？

//1.依次输出什么？

//2.整个过程中产生了几个执行上下文？

console.log(‘global begin’ + i);

var i = 1

foo(1)

function foo(i) {

if(i === 4) {

return

}

console.log(‘foo() begin:’ + i);

foo(i + 1)

console.log(‘foo() end:’ + i);

}

console.log(‘global end:’ + i);

依次输出：

global begin undefined

foo() begin: 1

foo() begin: 2

foo() begin: 3

foo() end: 3

foo() end: 2

foo() end: 1

执行上下文： 5个

foo 1~4个

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

le.log(‘foo() begin:’ + i);

foo(i + 1)

console.log(‘foo() end:’ + i);

}

console.log(‘global end:’ + i);

依次输出：

global begin undefined

foo() begin: 1

foo() begin: 2

foo() begin: 3

foo() end: 3

foo() end: 2

foo() end: 1

执行上下文： 5个

foo 1~4个

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

[外链图片转存中…(img-8T7mc25u-1718464213953)]

[外链图片转存中…(img-4aIpSPGK-1718464213954)]