← 返回首页
Javascript基础教程(二十)
发表时间:2020-03-28 14:44:30
讲解let/var/const之间的区别

1.var

var定义的变量可以修改,如果不初始化会输出undefined,不会报错。var声明的变量允许重复定义。 使用 var 在全局级别(在函数外部)进行声明都会自动成为 window 对象上的一个属性。

例如:

<script>
    var add = '陕西省西安市长安路6号';
    var zone; //不初始化会输出undefined

    function fn(){
        num = 100; //这里等同定义了新的全局变量
    }

    console.log(add);
    console.log(window.add==add);  //true
    console.log(zone); //undefined
    var zone = '610068';
    fn();
    console.log(zone); 
    console.log(num);
</script>

运行结果:
陕西省西安市长安路6号
true
undefined
610068
100

2.let

let是块级作用域,函数内部使用let定义后,对函数外部无影响。 使用 let在函数外部声明一个变量,它不会被添加到 window 对象中。let声明的变量不允许重复定义。

例如:

<script>
    let add = '陕西省西安市长安路6号';
    let zone; //不初始化会输出undefined

    function fn(){
       let num = 100; //这里是局部变量
    }
    console.log(add);
    console.log(window.add==add);
    console.log(zone);
    //let zone = '610068' ; //错误不允许重复定义
    fn();
    console.log(num);
</script>
运行结果:
陕西省西安市长安路6号
false
undefined
Uncaught ReferenceError: num is not defined

也许有学生要问,在fn中使用var不也是局部变量与使用let又有什么区别。let是块级作用域,离开了let所在的块作用域,即便在同一个函数内也无法访问。例如:

<script>
    let add = '陕西省西安市长安路6号';
    let zone; //不初始化会输出undefined

    function fn() {
        {
            let num = 100; //块级变量
            console.log("块内=>num="+num);
        }
        console.log("块外=>num="+num); //这里已经抛出异常。
    }

    console.log(add);
    console.log(window.add == add);
    console.log(zone);

    fn();
    console.log(num);

运行结果:
陕西省西安市长安路6号
false
undefined
块内=>num=100
Uncaught ReferenceError: num is not defined

如果使用var则效果完全不同。

<script>
    let add = '陕西省西安市长安路6号';
    let zone; //不初始化会输出undefined

    function fn() {
        {
            var num = 100; //这里等同定义了新的局部变量
            console.log("块内=>num="+num);
        }
        console.log("块外=>num="+num);
    }

    console.log(add);
    console.log(window.add == add);
    console.log(zone);

    fn();
    console.log(num);
</script>
运行结果:
陕西省西安市长安路6号
false
undefined
块内=>num=100
块外=>num=100
Uncaught ReferenceError: num is not defined

3.const

const定义的变量不可以修改,而且必须初始化。 使用 const在函数外部声明一个变量,它不会被添加到 window 对象中。

<script>
    const add = '陕西省西安市长安路6号';
    //const zone; //错误,const必须初始化。赋初值。
    const person = {
        name:'张三',
        gender:'男',
        age:30
    }
    //person = {}; //错误,不能指向新对象。
    person.gender = '女' //const类型的引用,可以修改属性值。

    function fn() {
        const num = 100;
    }
    console.log(add);
    console.log(window.add == add);
    console.log(person);
    console.log(num);
</script>
运行结果:
陕西省西安市长安路6号
false
{name: "张三", gender: "女", age: 30}
Uncaught ReferenceError: num is not defined