JS局部变量、全局变量、局部作用域、全局作用域以及块级作用域结合ES6讲解

1.在JavaScript中定义变量有两种方式

ES6之前:var 变量名称;
ES6开始:let 变量名称;

2.两种定义变量方式的区别

详细介绍见https://blog.csdn.net/Cao_Mary/article/details/89207605

2.1、是否能够定义同名变量

var可以定义,let不可以定义同名变量

2.2、是否能够先使用后定义

var可以先使用后定义(预解析),let不可以预解析

2.3、是否能被{}限制作用域

无论是通过var还是let定义在{}外面都是全局变量
var放在{}内部还是全局变量,let放在{}内部则是局部变量
无论是通过var还是let定义在局部作用域的都是局部变量

3.局部作用域、全局作用域、块级作用域

  • 3.1、在任何地方都可以访问到的就是全局作用域。在JavaScript中{}外面的作用域,称之为全局作用域
    • var和let变量在全局作用域中都是全局变量
  • 3.2、只在固定的代码片段内可访问到的变量,例如函数内部。对应局部作用域(函数作用域)。在JavaScript中函数后面{}中的作用域,称之为“局部作用域”
    • 无论是通过var还是let定义在局部作用域的都是局部变量
  • 3.3、任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。在ES6中只要{}没有和函数结合在一起,那么应该是“块级作用域”。ES6之前没有块级作用域。
    • 块级作用域中,var定义的变量是全局变量,let定义的变量是局部变量

4.块级作用域和局部作用域区别

4.1、在块级作用域中通过var定义的变量是全局变量

		    {
                //块级作用域
                var num = 123;//全局变量
            }
            console.log(num);

4.2、在局部作用域中通过var定义的变量是局部变量

			function test() {
                var value = 666;//局部变量
            }
            test();
            console.log(value);//value is not defined

5、无论是在块级作用域还是局部作用域,省略变量前面的let或者var就会变成一个全局变量。

5.1、验证在块级作用域中

   	    {
               var num1 = 678;//全局变量
               let num2 = 678;//局部变量
               num3 = 678;//全局变量
           }
           console.log(num1);//678
           console.log(num2);//num2 is not defined
           console.log(num3);//678

5.1、验证在局部作用域中

 		   function f() {
                var num1 = 678;//局部变量
                let num2 = 123;//局部变量
                num3 = 456;//全局变量
            }
            f();
            console.log(num1);//num1 is not defined
            console.log(num2);//num1 is not defined
            console.log(num3);//456

6、案例

        var num1 = 123;//**全局变量**
        function f() {
            var num2 = 456//局部变量
        }
        function test() {
            num3 = 666;//局部作用域,没有var或者let修饰。**全局变量**
        }
        {
            var num4 = 789;//块级作用域、**全局变量**
        }
        {
            let num5 = 789;//块级作用域、let定义变量。局部变量
        }
        {
            let value7 = 123;
            {
                //注意点:在不同的作用域范围中,可以有同名变量
                let value7 = 456;//不会报错。
            }
        }
     

你可能感兴趣的:(前端,javaScript,作用域,变量)