2023/1/15 JS-变量提升与函数提升 执行上下文

1 变量提升与函数提升

变量声明提升

通过 var 声明的变量，在声明语句之前就可以访问到 - 值: undefined

<script>
    console.log(a); // undefined
    var a = 10
</script>

函数声明提升

通过 function 声明的函数, 在声明语句之前就可以直接调用 - 值: 函数定义(对象)

<script>
    fun() // function fun()
    function fun() {
        console.log('function fun()')
    }
</script>

引出一个问题: 变量提升和函数提升是如何产生的?

    function fn() {
        console.log(a)
        var a = 4 //变量提升
    }
    fn()  //undefined

<script>
    // console.log(fn3) // undefined - 变量提升
    fn3() // 这里是函数调用，但是提升的是 - 变量提升
    var fn3 = function () {
        console.log('fn3()')
    }
</script>

2 执行上下文

全局执行上下文

1. 在执行全局代码前将window确定为全局执行上下文
2. 对全局数据进行预处理：

var定义的全局变量–>undefined, 添加为window的属性
function声明的全局函数–>赋值(fun__)，添加为window的方法
this–>赋值(window)

<script>
    function fun__() {
        console.log('fun()')
    }
    console.log(this)
</script>

3. 开始执行全局代码

函数执行上下文

1. 在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象(虚拟的, 存在于栈中)
2. 对局部数据进行预处理

形参变量–>赋值(实参)–>添加为执行上下文的属性
arguments–>赋值(实参列表)， 添加为执行上下文的属性
var定义的局部变量–>undefined，添加为执行上下文的属性
function声明的函数 -->赋值(函数名如，fun__)，添加为执行上下文的方法
this–>赋值(调用函数的对象)

3. 开始执行函数体代码

3 执行上下文栈

1. 在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)–>所以栈底百分百是[window]
3. 在函数执行上下文创建后， 将其添加到栈中(压栈)
4. 在当前函数执行完后，将栈顶的对象移除(出栈)
5. 当所有的代码执行完后, 栈中只剩下window
6. 上下文栈数==函数调用数+1