JavaScript前端记念册Web

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

2017-03-01  本文已影响241人  _三月

先谈谈作用域####

-- 什么是作用域?
就是某个变量有(起)作用的范围;
--词法作用域和动态作用域
词法作用域:在变量声明的时候,它的作用域就已经确定了;
动态作用域:在程序运行的时候,由程序的当前上下文(执行环境)决定的;
-- 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谢谢!

上一篇 下一篇

猜你喜欢

热点阅读