JavaScript入门第一篇——预解析及作用域

JavaScript预解析问题

定义：预解析就是提前解析。在js中var， function 能够提前解析。（记住只是提前解析，并不是提前执行）

1、直接上例题：
下面展示一些 内联代码片。

   //1)
    console.log(a);
    var a = 1;
    //解析过程
    // var a;
    // console.log(a);
    // a = 1;

    //2)
    console.log(f);
    var f = 123;
    function f() {
        console.log(456);
    };//结果为function
    //解析过程
    // var f;
    // function f() {
    //     console.log(456);
    // };
    // console.log(f);
    // f = 123;

    //3)
    console.log(f);
    function f() {
        console.log(456);
    };
    var f = 123;//结果为function

    //解析过程
    // function f() {
    //     console.log(456);
    // }
    // var f;
    // console.log(f);//当变量和函数同名时，优先留下函数的值（不管谁前谁后）
    // f = 123;

    //4)
    var x = 100;
    function x() {
        console.log(456);
    };
    console.log(x);
    //解析过程
    // var x;
    // function x() {
    //     console.log(456);
    // }
    // x = 100;
    // console.log(x);//100

    //5)
    console.log(a, b,  d, e);
    var a = 10;
    var b;
    function d() {
        console.log('d');
    };
    var e = function () {
        console.log('e');
    };//报错
    //解析过程
    // var a;
    // var b;
    // function d() {
    //     console.log('d');
    // };
    // var e;
    // console.log(a, b, c, d, e);//undefind undefind 报错 function undefind
    // a = 10;
    // c = 30;
    // var e = function () {
    //     console.log('e');
    // }

注意：当变量名和函数名同名时，优先选择留下函数的值（不论谁前谁后）

2、面试经典例题

console.log(a);//a=function
var a = 1;
function a() {
    console.log(2);
};
console.log(a);//
var a = 3;
console.log(a);
function a() {
    console.log(4);
};
console.log(a);
//解析过程
var a;
function f() { console.log(2);};
function f() { console.log(4); };
console.log(a);//function
a = 1;
console.log(a);//a=1
a = 3;
console.log(a);//a=3
console.log(a);//a=3

JavaScript作用域

分类：作用域分为全局作用域和局部作用域，ES6中还有块级作用域
定义：（我理解的定义）
全局作用域：在什么地方都可以访问到的变量
局部作用域：只有在固定区域内才可以访问到的变量
认识在这里插入代码片

 var x = 10;//全局作用域
    function f1() {
        var y = 100;//局部作用域
        console.log(x);
    };
    function f2() {
        var z = 100;//局部作用域
        console.log(x);
    };
    console.log(y);
    

JavaScript作用域与预解析结合的例题

   // 1)
    var a = 1;//全局作用域
    function f1() {
        var b = 2;//局部作用域
        function f2() {
            var c = b;//函数作用域
            b = a;
            a = c;
            console.log(a, b, c);//c=2;b=1;a=2
        };
        f2();
    };
    f1();
    // 解析过程
    // var a;
    // function f1() { };
    // a = 1;
    // f1();
    // var b;
    // function f2() { };
    // b = 2;
    // f2();
    // var c;
    // c = b = 2;
    // b = a = 1;
    // a = c = 2;
    // console.log(a,b,c);

    //2)
    var a = 1;
    function f1() {
        console.log(a);
    };
    f1();//1
    //解析过程
    // var a;
    // function f1() {
    //     console.log(a);
    // };
    // f1();

    //3)
    function f1() {
        var a = 1;//局部作用域
    };
    f1();
    console.log(a);//报错
    //解析
    // function f1() {
    //     var a = 1;
    // };
    // f1();
    // console.log(a);

    //4)
    var a = 1;
    function f1() {
        console.log(a);//1
        a = 2;
    };
    f1();
    console.log(a);//2
    //解析过程
    // var a;
    // function f1() {};
    // a = 1;
    // f1();
    // console.log(a);//1
    // a = 2;
    // console.log(a);//2

    //5)
    //重点：全局变量和局部变量不同名时，作用域是整个程序
    //全局变量和局部变量同名时，全局变量的作用域不包含局部变量的作用域
    var a = 1;
    function f1() {
        console.log(a);//undefind
        var a = 2;
    };
    f1();
    console.log(a);//1
    //解析过程
    // var a;
    // function f1() { };
    // a = 1;
    // f1();
    // var a;
    // console.log(a);//undefind
    // a = 2;//局部作用域
    // console.log(a);//1

注意：
①全局变量和局部变量不同名时，全局作用域是整个程序
②全局变量和局部变量同名时，全局变量的作用域不包含局部变量的作用域

面试经典例题

下面展示一些 内联代码片。

 //面试题
    var a = 10;
    function f1() {
        var b = 2 * a;//2*undefind==>NAN(不是数字)
        var a = 20;
        var c = a + 1;
        console.log(b);//
        console.log(c);//21
    };
    f1();
    //解析过程
    var a;
    function f1() { };
    a = 10;
    f1();
    //函数里面的预解析
    var b;
    var a;
    var c;
    b = 2 * a;//2*undefind==>NAN(不是数字)
    a = 20;
    c = 21;
    console.log(b);//NAN
    console.log(c);//21