【金秋打卡】第五天 变量和函数提升

第一模块课程名称直面JavaScript中的30个疑难杂症 章节:7-1~7-3讲师名称公明2020

第二模块第三模块

• 变量提升

JS引擎会在正式执行之前先进行一次预编译在这个过程中首先将变量声明及函数声明提升至当前作用域的顶端然后进行接下来的处理。(注当前流行的JS引擎大都对源码进行了编译由于引擎的不同编译形式也会有所差异我们这里说的预编译和提升其实是抽象出来的、易于理解的概念)

function demo() {
    if (!str) {
        var str = 5;
    }

    console.log(str); // 5
}
demo();

运行代码我们会发现foo的值是5如果外层作用域也存在一个foo变量该不会是打印外层作用域中的foo变量吧答案是不会如果当前作用域中存在此变量声明无论它在什么地方声明引用此变量时就会在当前作用域中查找不会去外层作用域了。
那么至于说打印结果这要提到预编译机制了经过一次预编译之后上面的代码逻辑如下

// 预编译之后
function demo() {
    var str;

    if (!str) {
        str = 5;
    }

    console.log(str); // 5
}
demo()

• 函数提升

function demo() {
    demo1(); // output: I am hoisted

    function demo1() {
        console.log('I am hoisted');
    }
}

demo();

为什么函数可以在声明之前就可以调用并且跟变量声明不同的是它还能得到正确的结果其实引擎是把函数声明整个地提升到了当前作用域的顶部预编译之后的代码逻辑如下:

// 预编译之后
function hoistFunction() {
    function foo() {
        console.log('I am hoisted');
    }

    foo(); // output: I am hoisted
}

hoistFunction();
// 如果在同一个作用域中存在多个同名函数声明后面出现的将会覆盖前面的函数声明;

• 作用域与作用域链

作用域scope一个变量的可用范围{a:1}-{b:2}-..window
作用域链scope chain以当前作用域的scope属性为起点依次引用每个AO直到window结束形成多级引用关系
js作用域ES5
两大类全局作用域函数作用域
解释过程在执行过程中javascript引擎的严格按照作用域机制scope来执行的并且javascript的变量和函数作用域是在定义时定义的而不是执行决定的。javascript中的变量作用域在函数内有效无块作用域

// 作用域
function a(){
    function b(){
        var bb=234;
    }
    var aa=33;
    b();
}
var glob=100;
a();
console.log(b);
// 作用域链
function fun() {
    var str = "内层变量2";
}
fun();//要先执行这个函数否则根本不知道里面是啥
console.log(str);//报错

第四模块