zoukankan      html  css  js  c++  java
  • JS中的var、let、const

    1、var

    在全局window中申明则为全局变量,是全局对象 window 的属性。

            var sum = 0
            console.log(window.sum)  // 0
            console.log(sum);        // 0

    在函数中申明的变量则为局部变量

    function foo(){
        function bar(a){
            i = 3;
            console.log( a + i );  // 3 之后是无限循环11
        }
        var  i = 0
        for( i ; i <= 10; i++){
            bar( i * 2 )
        }
    }
    foo()

    这段代码可以写成这样

    function foo(){
        function bar(a){
            i = 3;
            console.log( a + i );
        }
        var i
        i = 0
        for( i ; i <= 10; i++){
            bar( i * 2 )
        }
    }
    foo()

    函数提升先于变量提升,进入for循环之后把bar函数的参数为 0所以第一次输出打印为 3重点在这个地方 i = 3他会现在当前作用域中寻找 i 的申明,如果没有就会沿着作用域链向上查找,在 foo 中找到了,所以 foo 中的 i 就变成了 3在执行过  i++  后就得到了 i= 4,在执行bar的时候就得到了之后的 11  这样一直循环

    2、let 和 const

    ES6 新增的两种申明变量的方式。不允许在相同作用域内重复声明同一个变量,不存在变量提升

    既然不存在变量提升,那么在变量申明之前就不能用这个变量,var 申明的变量会进行变量提升,但是值是 undefined

    在ES5的时候只有函数是块级作用域,但是在ES6中就不单单只有函数作用域了,这个要归功于 let 和 const

    var b = 1;
    {
        let b = 2;
    }
    console.log(b);  // 1

    花括号这一块就相当于一个块级作用域

    var a = []
    for(let i=0; i<10;i++){
        a[i] = function(){
            console.log(i);
        };
        console.log(i) //[function,function..]  总共10个
    }
    console.log(a)
    a[8]()  // 8

    把这个地方的 let 改成 var 之后,会发现所有的输出都会变成 10。

    var 申明的 i 其实是一个全局的变量,和数组 a 是同一个级别的。for 循环每次改变 i 的值都是在原值的基础上重新复制,等循环结束的时候 i = 10, 所以不管怎么调用输出的都是10

    let 申明的 i 只在 当前这个块有效,每轮循环都有一个块,所以每次循环的时候都是新创建了一个变量  i 

    cont和 let 有一个不同之处,就是const 用来申明常量。一旦申明,其值就不能改变。但是如果 const 申明的是一个引用类型的值

            const a = {}
            a.name = 'circle'
            console.log(a);   // Object {name: "circle"}

    const 里面保存的是这个对象的地址值,所以它只能保证这个地址值不变,而不能保证这个对象里面的属性之类的不能变

  • 相关阅读:
    洛谷 P1226 【模板】快速幂||取余运算 题解
    洛谷 P2678 跳石头 题解
    洛谷 P2615 神奇的幻方 题解
    洛谷 P1083 借教室 题解
    洛谷 P1076 寻宝 题解
    洛谷 UVA10298 Power Strings 题解
    洛谷 P3375 【模板】KMP字符串匹配 题解
    Kafka Shell基本命令
    Mybatis与Hibernate的详细对比
    MyBatis简介
  • 原文地址:https://www.cnblogs.com/lan1974/p/8335923.html
Copyright © 2011-2022 走看看