JavaScript作用域问题

75 阅读 0 评论 50 点赞

我是靠谱客的博主花痴小蘑菇，最近开发中收集的这篇文章主要介绍JavaScript作用域问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

JavaScript的作用域问题是一个比较复杂的问题也是在编写程序过程中比较容易出错的地方，特别是从C/C++这些具有块级语言功能的语言转过来的工程师。

JavaScript在ES6时代之前是没有块级作用域的概念只有全局作用域和函数级作用域这两种作用域。同时由于JavaScript定义变量的特殊性导致编写程序的时候容易出现一些问题造成不少的麻烦。

JavaScript定义变量的特殊性：

（1）使用var定义变量的时候会产生变量提升。

（2）使用var定义变量的时候，允许在同一作用域下多次使用var来进行声明变量，但是只有第一次是进行声明变量，剩下的是进行赋值操作。

（3）在对值进行赋值的时候，先会在当前作用域下查看是否有此变量的声明，如果有进行变量的赋值，如果没有就向上一级作用域进行查找，查找到就对其进行赋值，如果没有查找到将在全局的作用域下进行赋值。

<!DOCTYPE html>
<html>
    <head>
        <title>变量的作用域问题</title>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            var name="apple"
            var name="watermelon"
            function say(){
                console.log(name);
                if(1){
                    var name="banana"
                }
                console.log(name);
                name="orange";
                console.log(name);
            }
            say();
            console.log(name);
        </script>
    </body>
</html>

上述程序输出的结果依次是：

undefined

banana

orange

watermelon

当对程序进行修改之后

<!DOCTYPE html>
<html>
    <head>
        <title>变量的作用域问题</title>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            var name="apple"
            var name="watermelon"
            function say(){
                console.log(name);
                if(1){
                    name="banana";
                    age=24
                }
                console.log(name);
                name="orange";
                console.log(name);
            }
            say();
            console.log(name);
            console.log(age);
        </script>
    </body>
</html>

程序输出的结果依次是：

watermelon

banana

orange

通过上述的两个程序可以看出这两个函数在作用域上的区别：由于第一个程序中是使用var声明的变量所以会在函数作用域中创建name变量，不使用var声明变量将会使用上一级的name变量。

通过说明ES5前作用域的问题，暴露了ES5编写程序的致命问题，如果忘记使用var在函数作用域中声明变量将会使得全局作用域下同名变量被修改。这样的话是不利于编写大规模的程序，同时也是由于这个原因也需要提供块级作用域，以避免函数作用域中和全局作用域中变量污染和变量不够的问题，所以ES6提出了let和const的块级作用域的函数的声明以解决var声明的问题。

（1）没有变量的提升

（2）同一作用域下不能进行多次对同一变量的声明

（3）提供块级作用域

<!DOCTYPE html>
<html>
    <head>
        <title>变量的作用域问题</title>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            let name="apple"
            function say(){
                console.log(name);
                if(1){
                    let name="banana";
                }
                console.log(name);
                name="orange";
                console.log(name);
            }
            say();
            console.log(name);
            console.log(age);
        </script>
    </body>
</html>

当程序这样编写的时候会输出：

apple

orange

出现这样的情况是由于let声明的name函数只在if形成的块级作用域中有效。