欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

萌新的前端自学之旅第一步 js变量提升

程序员文章站 2024-03-23 23:16:10
...

emmm希望有人看吧,希望有大佬指点一下前端学习路线!希望不要有大佬说我

练习1:

console.log(a);
    var a = 12;
    function fn() {
        console.log(a);
        var a = 13;
    }
    fn();
    console.log(a);

    //      1. 变量提升 var function
    //             var a; fn();
    //      2. 从上往下执行
    //             第一个打印undefined;   a = 12;   执行function
    //                                                     形参赋值,变量提升  var a(私有)  所以第二个打印为underfined;
    //      3. 第三个打印为12

练习2:

 var foo = 1;
        function bar() {
            if (!foo){
                var foo = 10;
            }
            console.log(foo);
        }
        bar();

        //      1. 变量提升 var function
        //             var foo; bar();
        //      2. 从上往下执行
        //             foo = 1;   执行function
        //                              形参赋值,变量提升  var foo(私有)  此时foo为undefined(布尔值为false)  !foo 即为true
        //                                      注: ! 布尔取反(进入if判断  function中局部变量foo值为10).
        //      3. 打印为10

练习3:

var n = 0;
        function a() {
            var n = 10;
            function b() {
                n++;
                console.log(n);
            }
            b();
            return b;
        }
        var c = a();
        c();
        console.log(n);

        //      1. 变量提升 var function
        //             var n; a(); var c;
        //      2. 从上往下执行
        //             执行function a()
        //                  形参赋值,变量提升  var n(私有)  b();
        //                  从上往下执行 私有n = 10;  n(私有)(因为没有var 所以去上级找)++;
        //                  执行b n(私有) = 11;  第一次打印值为11  a(函数值为它的返回值)的值为b();
        //      3. c = b();     调用c   n++ 并打印 a = 12;
        //      3. 最后打印全局 n = 0 ;

练习4:

var a = 10,b = 11, c = 12;
        function test(a) {
            a = 1;
            var b = 2;
            c = 3;
        }
        test(10);
        console.log(a);
        console.log(b);
        console.log(c);

        //      1. 变量提升 var function
        //             var a; var b; var c; test(a);
        //      2. 从上往下执行
        //             全局 a = 12; 全局 b = 11; 全局 c = 12;   执行function
        //                                                              形参赋值,变量提升  形参 a = 10;  var b;
        //                                                              形参 a = 1     私有 b = 2;    全局 c = 3;
        //      3.  打印a为全局a为10;     打印b为全局b为11;      打印c为全局c为3

练习5:

if (!("a" in window)){
            var a = 1;
        }
        console.log(a);
        //      1. 变量提升 var function
        //             var a (其实同时多了一个window.a)
        //      2. 从上往下执行
        //             window.a in windowtrue   ! 取反后为 false 无法进入if判断
        //                 a = undefined
        //      3. 打印 a = undefined;

练习6:

var a = 4;
        function b(x,y,a) {
            console.log(a);
            arguments[2] = 10;
            console.log(a);
        }
        a = b(1,2,3);
        console.log(a);

        // arguments 和形参之间的映射(建立在函数执行后形参赋值的一瞬间,后面添加的都不会建立映射)是以arguments的索引为基础完成的,索引对不上赋值为undefined
        //      1. 变量提升 var function
        //             var a; b();
        //      2. 从上往下执行
        //             a = 4;   执行function
        //                            形参赋值,变量提升     形参x = 1 y = 2 a = 3
        //                            打印传入形参a的值为 3;   私有a = 10;  打印a = 10;
        //      3. 打印全局a a 为函数b返回的结果 因为b没有return 所以a为undefined

练习7:

var a = 9;
    function fn() {
        a = 0;
        return function (b) {
            return b + a++;
        }
    }
    var f = fn();
    console.log(f(5));
    console.log(fn()(5));       //先执行fn()(会把已经变成1的全局变量a重新赋值为0) 再执行返回值
    console.log(f(5));
    console.log(a);

    //      1. 变量提升 var function
    //             var a; fn() var f;
    //      2. 从上往下执行
    //             全局a = 9;   执行function
    //                                形参赋值,变量提升
    //             全局a = 0;            fn()值为 function (b){};  不可销毁 因为内容被外部一直占用
    //                                             执行function(b){}
    //                                                  function(b)为 b+a++(++会在当前执行后执行,全局a++);
    //             全局f = fn()
    //      3. 打印第一个值为 5;   打印第二个值为 5;    打印第三个值为 6;  打印a为2;