ES6-变量

原变量var：

　　1.可以重复声明：

　　　　var a=10;

　　　　var a=20;

　　2.无法限制修改：

　　　　声明了PI=3.14；之后还可以进行改写

　　3.没有块级作用域：

　　　　if(true){var a=12;}

　　　　console.log(a);

新变量：

let：不能重复声明，变量——可以修改，块级作用域，不存在变量提升

const：不能重复声明，常量——不可以修改，块级作用域，不存在变量提升

注意：const （声明的同时必须赋值）声明简单类型不能再更改（数字，布尔），复杂类型（数组，对象等）指针指向的地址不能更改，内部数据可以更改。

let a=12;
let a=10;//报错

let a=12；
a=20；
console.log(a);//20
const b=12;
b=20;
console.log(b);//报错

{
  let a=12;  
}
console.log(a);//报错

　　块级作用域的作用：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
            var aBtn=document.getElementsByTagName('input');
            for(var i=0;i<aBtn.length;i++){
                aBtn[i].onclick=function(){
                    alert(i);
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="按钮1"/>//按下后弹出3
<input type="button" value="按钮2"/>//按下后弹出3
<input type="button" value="按钮3"/>//按下后弹出3
</body>

　　解决方法：使用函数解决作用域问题

    <script>
        window.onload=function(){
            var aBtn=document.getElementsByTagName('input');
            for(var i=0;i<aBtn.length;i++){
                (function(i){
                    aBtn[i].onclick=function(){
                        alert(i);
                    }
                })(i);
            }
        }
    </script>
</head>
<body>
<input type="button" value="按钮1"/>//按下后弹出0
<input type="button" value="按钮2"/>//按下后弹出1
<input type="button" value="按钮3"/>//按下后弹出2
</body>

　　同样

    <script>
        window.onload=function(){
            var aBtn=document.getElementsByTagName('input');
            for(let i=0;i<aBtn.length;i++){
                aBtn[i].onclick=function(){
                    alert(i);
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="按钮1"/>//按下后弹出0
<input type="button" value="按钮2"/>//按下后弹出1
<input type="button" value="按钮3"/>//按下后弹出2
</body>

　　let,const 使用场景：

let使用场景：变量，用以替代var；
const使用场景：常量，声明匿名函数，箭头函数的时候；

了解变量提升：

1.变量提升

ES6之前使用var来声明变量，提升简单来说就是把声明提升到它所在的作用域的最顶端去执行，到我们代码的位置来赋值。

function test(){
  console.log(a);
  var a=123;    
};
test();//undefined

它实际的执行顺序如下：

function test(){
    var a;
    console.log(a);
    a=123;
}
test();

再如：

a=1;
var a;//提升到作用域顶端
console.log(a);//1

再如：（一道经典面试题）

        console.log(v1);
        var v1=100;
        function foo(){
            console.log(v1);
            var v1=200;
            console.log(v1);
        }
        foo();
        console.log(v1);
        //结果：undefined undefined 200 100

2.函数提升

javascript中不仅仅是变量声明有提升现象，函数的声明也是一样的。

函数的声明有两种形式：

（1）函数声明：

　　function fun () {}

（2）函数表达式：

　　var fun=function () {}

函数表达式的声明和变量提升是一样的；
但函数声明的提升现象和变量提升略有不同

        console.log(fun);
        function bar(){
            console.log(1);
        }

　　执行顺序为：

        function bar(){
            console.log(1);
        }
        console.log(fun);

　　函数声明的提升是将整个代码块提升到它所在的作用域的最开始执行

        foo();//1
        var foo;
        function foo(){
            console.log(1);
        }
        foo=function(){
            console.log(2);
        }

部分原文：https://blog.csdn.net/qq_39712029/article/details/80951958

猜你喜欢