JavaScript中用var声明变量有什么意义

var的本质:

var a=3：声明一个变量a并给它赋值3;

a=3：并没有声明一个新的变量，只是往它的外层寻找变量名为a的变量，并给它赋值3。（假设外层都没有声明a，那么会找到window上的变量a）

接下来我们看几个例子：

1.t2()中的str没有用var声明，找到了它的外层t1()中的str

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var str="ufo";
    function t1() {
        var str="china";
        function t2() {
            //此处没有用var声明一个新的str变量，而是往它的外层寻找是否有变量名为str的变量，给它赋值。
            // 这里找到了t1()中的str，所以这两个str引用的是同一个变量
            str="japan";
            console.log("t2():"+str)

        }
        console.log("t1():"+str)//执行到这里的时候，t2()还没有被执行到
        t2()
        console.log("t1():"+str);//执行到这里的时候，t2()已经执行过

    }
t1();
console.log("全局变量:"+str);//由于t2()修改的str是t1()中的str，所以全局中的str没有受到影响


    </script>
</head>
<body>
</body>
</html>

运行结果：

2.将t1()中的 var str="china"注释掉，那么t2()就找到了最外层的全局变量str

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var str="ufo";
    function t1() {
        //var str="china";
        function t2() {
            //此处没有用var声明一个新的str变量，而是往它的外层寻找是否有变量名为str的变量，给它赋值。
            // 这里找到了全局变量中的str，所以这两个str引用的是同一个变量
            str="japan";
            console.log("t2():"+str)

        }
        console.log("全局变量："+str)//f2()还没有执行到
        t2()

    }
t1();
console.log("全局变量:"+str);//t2()修改了全局变量中的str
    </script>
</head>
<body>
</body>
</html>

运行结果：

3.把第一个例子t2()中的str="japan"用var来声明，那么它就不会去找外层的str，而是声明了一个新的变量，所以t1()中的str和全局变量str都不会受到影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var str="ufo";
        function t1() {
            var str="china";
            function t2() {
                //此处用var声明一个新的str变量，并给它赋值。
                // 所以这3个str都是不同的
                var str="japan";
                console.log("t2():"+str)

            }
            console.log("t1():"+str)//执行到这里的时候，t2()还没有被执行到
            t2()
            console.log("t1():"+str);//执行到这里的时候，t2()已经执行过

        }
        t1();
        console.log("全局变量:"+str);//t2()并没有修改任何其他地方的str


    </script>
</head>
<body>
</body>
</html>

运行结果：

window上定义的变量和全局变量的区别：

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法，如：

var str="china" 可以用 window.str来访问结果也是"china"。那么两者定义的方式有什么区别呢？

window上的变量都是存在的，可以理解为都声明过，只是没有定义，如果访问它是undefined；但假如去访问一个没有声明过的变量，会报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var str="china";
        console.log(window.str)//打印出china
        function t1() {
            var str1="hello";
            console.log(window.str1)//由于这里的str1不是全局变量，所以不会成为window的属性
        }
        t1()

        console.log(window.str2);//undefined
        console.log(str2);//会报错
    </script>
</head>
<body>
</body>
</html>

运行结果：

JavaScript中用var声明变量有什么意义

猜你喜欢