javascript学习——变量提升和方法（函数）提升-优快云博客

本文链接：https://blog.youkuaiyun.com/xishaoguo/article/details/79564264

首先来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(a);
    </script>
</body>
</html>

看一下输出结果：

这是因为 a 我们并没有定义，所以报错。

例子2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(a);
        var a;
    </script>
</body>
</html>

看结果：

这结果说明变量 a 我们已经定义了，但是我们没有给它赋值。可是我们是先输出的a，而后才定义的变量a，为什么这时候就不报错了呢？

原因就是js的变量提升，当 js 执行代码的时候，它会把我们的代码先描一遍，把我们定义的变量提升到代码的顶部，如果是在函数内定义的变量，会提升到函数的顶部。

于是我们的代码实际上就变成了这个样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a;
        console.log(a);
    </script>
</body>
</html>

接下来我们给变量赋值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(a);
        var a = 1;
        console.log(a);
    </script>
</body>
</html>

打印结果：

结果是先打印undefind，再打印 1 。这是因为由于有代码提升的原因，我们的代码实际上变成了先把变量 a 分解成 var a; 然后再进行赋值。最终是变成了这个样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a;
        console.log(a);
        a = 1;
        console.log(a);
    </script>
</body>
</html>

这个过程就是 js 的变量提升，下面我们再来看看有函数的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function show() {
            var a = 1;
        }
        console.log(a);
    </script>
</body>
</html>

输出结果：

结果是 a 报错，没有定义，这是因为如果变量是在函数中定义的，那么变量提升会提升到函数的顶部，不会走出这个函数。我们可以在函数内部测试一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function show() {
            console.log(a);
            var a = 1;
            console.log(a);
        } 
        show();
    </script>
</body>
</html>

打印结果：

还有一种连等赋值的情况，这种情况定义的变量是可以走出函数体在函数外部拿到值的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function show() {
            console.log(a);
            var a = b = 1;
            console.log(a);
        } 
        show();
        console.log(b);
    </script>
</body>
</html>

打印结果：

这种情况是因为赋值代码是从右到左执行，在解析的时候会解析成： b = 1; var a = 1;这时候的 b 是全局变量，所以可以在函数外部拿到。解析后的结果就成了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function show() {
            var a;
            console.log(a);
            a = 1;
            b = 1;
            console.log(a);
        } 
        show();
        console.log(b);
    </script>
</body>
</html>

不单单是变量会提升，我们的函数也会提升，比如我们先调用函数，再定义：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        show();
        function show() {
            console.log("打印");
        }
    </script>
</body>
</html>

打印结果：

函数的提升是把整个函数体提升到代码的顶部，并且函数的优先级要比变量的优先级高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(show);
        var show = "abc";
        function show() {
            
        }
    </script>
</body>
</html>

打印结果：

这是因为函数的优先级比较高，所以当变量提升后，发现还有一个没赋值的变量，就把名字一样的变量show给忽略掉了。解析后的样子是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function show() {
            
        }
        var show;   //忽略掉
        console.log(show);
        show = "abc";
    </script>
</body>
</html>

这整个就是js的变量提升，总的来说就是：变量提升到代码的顶部，函数内的变量提升到函数的顶部，函数的提升优先级比变量的优先级高。