一些经典的前端面试题分析--js函数与变量提升

前面讲完变量提升的知识和注意点,这次主要是来点题目操练一下,废话不多说了,直接上案例.
注意undefined和报错的区别:
变量申明未赋值--undefined
未申明也没有赋值而直接使用变量--系统会报错

• 先热热身:
  demo1

function test() {
        var num = 123;
        console.log(num);
    }
    test();            //123(test函数中的局部变量num,这个很好理解我就不解释了)
    console.log(num); //报错(全局变量中没有声明num变量,无法访问下一级函数作用域中的变量,这个是考察作用域链的知识)

demo2:
考察了变量提升是分作用域的这个知识点,在函数内部使用变量之后申明变量,会把申明变量提升到log之前,所以下面的例子中打印1的结果是undefined而不是 "我是MT"和报错,打印3同demo1就不再重复一遍了.

    var str= "我是MT";
    test();
    function test() {
        console.log(str); //undefined
        var str= "哈哈哈";
        console.log(str); //"哈哈哈"
    }
    console.log(str);       //我是MT

demo3:
test函数内部有变量申明var a;会提升到函数作用域的最前面,全局没有变量a,所以结果是undefined而不会报错.

   function test(){
        if("a" in window){
            var a = 10;
        }
        console.log(a); 
    }

    test();//undefined

demo4:
这个题目是针对demo3做对比的, if语句没有作用域,var a提升到最前面,所以window中有'a',打印结果为10.

 if("a" in window){
        var a = 10;
    }
    console.log(a); //10

demo5:
此题是demo4的一个变种,同理变量提升,只是没有进入判断语句,所以为undefined;

if(!"a" in window){
        var a = 10;
    }
    console.log(a); //undefined

• 来点难的:
  demo6:
  此题乍看简单,实则有坑:

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

我把demo6的代码做了变量申明和函数申明提升,改成下面这个样子,现在理解就容易多了:这里foo为undefined,所以!foo结果为true;

    var foo;//变量申明提升
    function bar() {//函数申明提升
        if(!foo) //foo为undefined,!foo结果为true
        {
            var foo = 10;
        }
        console.log(foo); 
    }
    foo = 1;
    bar();//   10

• 放大招了哈哈,前面做了这么多,大家请先思考一下这个题,如需要答案分析,请简信我.如问的人多了,我会写一篇文章单独分析一下这道题.
  demo7

    function Foo() {
        getName = function(){
            console.log("1");
        };
        return this;
    }
    Foo.getName = function() {
        console.log("2");
    };

    Foo.prototype.getName = function(){
        console.log("3");
    };

    var getName = function() {
        console.log("4");
    };
    function getName(){
        console.log("5");
    }
    Foo.getName(); // 2 
    getName(); // 4
    Foo().getName(); //1 ? 4 ? 2 ?报错   
    getName(); // ?    1
    new Foo.getName(); //  2
    new Foo().getName(); // 3
    new new Foo().getName(); // 3

所有的文章都是自己的一些学习心得,有些题目是我摘抄的,但是思路是我自己的,有不足之处,欢迎大家指正.O(∩_∩)O谢谢!