美文网首页JavaScript前端记念册Web
前端笔试中常考题--js的函数与变量提升问题

前端笔试中常考题--js的函数与变量提升问题

作者: _三月 | 来源:发表于2017-03-01 17:27 被阅读241次

    先谈谈作用域####

    -- 什么是作用域?
    就是某个变量有(起)作用的范围;
    --词法作用域和动态作用域
    词法作用域:在变量声明的时候,它的作用域就已经确定了;
    动态作用域:在程序运行的时候,由程序的当前上下文(执行环境)决定的;
    -- js属于词法作用域
    词法作用域的访问规则:
    先在当前作用域中查找,如果找到就直接使用,如果没有找到,那么就到上一级作用域中查找,如果还没有找到那么就重复这个查找的过程,直到全局作用域

    • js中的作用域
      (01) script标签构成的全局作用域;
      (02) 在js中,函数是唯一一个可以创建作用域的对象;
        var a1 = "a1";
        var b1 = "b1";
        function func(){
            var a1 = "n1";
            console.log(a1);   //n1(此行a1先在func函数内部作用域中查询;
            console.log(b1);   //b1
        }
    
        func();
    

    变量和函数的提升####

    js的执行过程:
    预解析阶段 变量和函数的提升(声明);
    具体的执行阶段
    变量和函数的提升:
    js代码是一个从上至下逐步解析的过程,在这个过程中之前会把所有的的变量和函数提前申明.

    console.log(a);   //undefined 而不是报错
        var a = 10;
        f1();   //f1而不是报错
        function f1(){
            console.log("f1");
        }
    

    上面一段js代码,会先把var a与 func函数提前申明,所以代码实际可用模拟成下面这段代码:

      var a;  //变量a提前申明,但未定义
      function f1(){//函数提前申明
          console.log("f1");
      }
      console.log(a);  //申明未定义,结果为undefined
      a = 10;
      f1();   //结果为f1
    

    经过上面的解析,结果便可以理解了.
    具体会出现的一些问题和几种情况:
    ①变量和变量同名的情况:后面的变量会把前面的变量覆盖;

        var n1 = "n1";
        console.log(n1);                //n1
        function test(){
          console.log(n1);
        }
        test();                           //n1
        var n1 = "new n1";        //覆盖了之前n1的值
        console.log(n1);                //new n1
        test();                         //new n1
    

    ②函数和函数同名的情况,后面的函数会覆盖前面的函数.

        f1();  // 20
        function f1(){
            console.log(10);
        }
        f1(); //20
        function f1(){
            console.log(20);
        }
        f1();//20
    

    ③函数和变量同名,可以理解为函数声明提升而变量的声明不提升(实际上变量也提升了,但是会被函数覆盖).

        console.log(demo);  // demo函数                   
        var demo = "我是字符串";
        function demo(){
            console.log("我是函数");
        }
        console.log(demo);  //我是字符串
    

    ④变量提升是分作用域的

    var num=5;
    function test1(){
    console.log(num);//undefined
    var num=10;//此处函数test1作用域中有申明变量num,会提升申明
    }
    test();
    

    ⑤如果函数是函数表达式定义,那么在做函数声明提升的时候,仅仅只会把var 变量的名称(函数)提升到当前作用域中.

        console.log(func);          //undefined
        var func = function(){//此处只提升申明var func;所以为undefined;
            console.log("func");
        }
       var func = "我是MT";  
       console.log(func);  //'我是MT'
    

    ---自己的学习总结,希望大家喜欢,不足之处欢迎指正,O(∩_∩)O谢谢!

    相关文章

      网友评论

      • 令武:④变量提升是分作用域的 调用test1(),而不是test吧,不然会报错
      • _LibraX:加油哟!
      • 鬼雄起:你好 ,能讲解一下闭包吗?新手不太懂
        _三月:敬请期待:stuck_out_tongue_winking_eye:

      本文标题:前端笔试中常考题--js的函数与变量提升问题

      本文链接:https://www.haomeiwen.com/subject/hcfcgttx.html