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

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

程序员文章站 2022-06-09 12:10:45
...

前面讲完变量提升的知识和注意点,这次主要是来点题目操练一下,废话不多说了,直接上案例.
注意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谢谢!