前端经典面试题——js基础考察

hoisting(变量提升)
变量提升：函数声明和变量声明总是会被解释器悄悄地被”提升”到方法体的最顶部。

<!DOCTYPE html>
<html>
<head>
    <title>hoisting</title>
</head>
<body>
    <script type="text/javascript">
        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
    </script>
</body>
</html>

预解析后代码的顺序

<!DOCTYPE html>
<html>
<head>
    <title>hoisting</title>
</head>
<body>
    <script type="text/javascript">
        //变量提示后，变量和函数的声明使的变量和函数上移。
        var getName;
        function getName(){console.log(5);};
        function Foo(){
            getName = function() {console.log(1);};
            return this;
        }
        Foo.getName = function (){ console.log(2);};
        Foo.prototype.getName = function(){console.log(3);};
        getName = function(){console.log(4);};

        Foo.getName();
        getName();
    </script>
</body>
</html>

2.局部作用域

 <!DOCTYPE html>
<html>
<head>
    <title>变量的作用域</title>
</head>
<body>
    <script type="text/javascript">
        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执行，没有加var,所以是全局变量。
        Foo().getName();  //1
        //全局变量直接输出1，getName()等价于window.getName(),getName等价于this.getName()
        getName();        //1 
    </script>
</body>
</html>

3.参数优先级

<!DOCTYPE html>
<html>
<head>
    <title>符号的优先级</title>
</head>
<body>
    <script type="text/javascript">
        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);};

        //点的优先级高于new,foo.getName输出2
        //new function (){console.log(1);};
        new Foo.getName();  //2

        //new Foo()是一个对象，在原型链上有一个getName输出3
        new Foo().getName();  //3

        //.的优先级高于new带参数高于new不带参数
        new new Foo().getName();  //3
    </script>
</body>
</html>

前端经典面试题——js基础考察

猜你喜欢