温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript中的变量声明怎么理解

发布时间:2022-02-05 17:28:54 来源:亿速云 阅读:118 作者:柒染 栏目:开发技术

这篇文章的内容主要围绕JavaScript中的变量声明怎么理解进行讲述,文章内容清晰易懂,条理清晰,非常适合新手学习,值得大家去阅读。感兴趣的朋友可以跟随小编一起阅读吧。希望大家通过这篇文章有所收获!

    变量

    ECMAScript中,变量可以保存任何类型的数据(既可以是字符串也可以是数组也可以是别的),也即“松散的”,变量只是一个用来区分的占位符,一共有var、const、let三个关键字用于声明变量(var在ECMAScrip所有版本可用,后两个只在ES6及以后可用)。

    (一)var

    var a;//仅定义
    var b=‘hi';//定义的同时,设置值

    要注意的是,值的设置可以覆盖,但我们不推荐这么做

    var a=”hello”
    a=”hi”

    ECMAScript的变量是“松散”的,那么可以用一条语句来对不同的数据类型初始化的声明,当然插入、换行不是必要的,只是一定要用逗号隔开不同的变量。

    Var a=“hello”,
        b=12,
        c=false;
    1)关于var声明的变量的作用域
    function test(){
        var a="shanxi";
    }
    test();//调用函数
    console.log(a);
    //ReferenceError: a is not defined
    //报错:a未定义

    变量在使用var定义时,若是在函数内部,则该变量在函数退出时将会被销毁,无法再调用。这里的a在函数test内部使用var完成定义,调用函数test之后,随即a便被销毁,因而出现如上报错。

    当省略关键词var时,这样定义的变量将成为全局变量(不过不建议这么做,太多的全局变量会让程序变得难以维护)

    function test(){
        a="sichuan";
    }
    test();//调用函数
    console.log(a);
    //sichuan
    2)var声明提升(hoist)

    如下,结果是undefined而并没有报错,是因为,使用var关键字声明的变量,会自动提升到函数作用域的顶部。也就是,会被ECMAScript看作

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

    也就是,会被ECMAScript看作

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

    这种“提升”,会把所有变量的声明都提到函数作用域的顶部。

    (二)let

    Let和var作用相似,只是let声明的范围是块作用域,var声明的范围是函数作用域

    例如如下的if语句中的{}就是一个“块”,而不是一个函数作用域。

    if(true){
        var b="zhang"
        console.log(b);//zhang
    }
    console.log(b);//zhang

    换成let:

    if(true){
        let b="zhang"
        console.log(b);//zhang
    }
    console.log(b);//ReferenceError: b is not defined

    此时b在if外边(定义b的块作用域外)便不能被引用。

    !!!注意:块作用域是函数作用域的子域(是前者不一定是后者是后者不一定是前者)。

    !!!注意:适用于var的作用域限制,对let是等同的(只是一个作用域是函数作用域一个是块作用域)。

    关于重复声明,var不报错而let会报错,看如下实例:

    var a=24;var a=12;var a=5;console.log(a);//5let b=2;let b=4;//SyntaxError: Identifier 'b' has already been declared//运行到此处就已经报错let b=8;console.log(b);var a=24;
    var a=12;
    var a=5;
    console.log(a);//5
    let b=2;
    let b=4;//SyntaxError: Identifier 'b' has already been declared
    //运行到此处就已经报错
    let b=8;
    console.log(b);

    关于嵌套使用,JavaScript会记录用于变量声明的标识符以及其所在块的作用域,所以在嵌套使用时,不会报错(因为在同一块作用域中没有重复声明)。

    var a="shanxi"
    console.log(a);//shanxi
    if(true){
        var a="sichaun";
        console.log(a);//sichuan
    }
    let b=3;
    console.log(b);//3
    if(true){
        let b=5;
        console.log(b);//5
    }

    所以,let和var区别只在于,二者决定所声明的变量的相关作用域存在。

    var a;
    let a;//SyntaxError: Identifier 'a' has already been declared
    let c;
    var c;//SyntaxError: Identifier 'c' has already been declared
    1)与var不同,let声明的变量不会再作用域中被提升,这一现象被称为“暂时性死区”
    console.log(a);
    var a=2;//undefined
    console.log(b);
    let b=3;//ReferenceError: Cannot access 'b' before initialization
    2)全局声明

    Var在全局作用域中声明出的变量自动会成为window对象的属性,但let不会

    var a=3;
    console.log(window.a)//a
    let b=10;
    console.log(window.b);//undefined

    不过let声明出的变量,依旧是全局作用域发生的(不然也不会是“undeifned”),变量也会在页面的生命周期内存续,所以必须保证页面不会重复声明同一个变量

    (三)Const

    基本上和let相同,只是使用const时,必须同时初始化变量,且尝试修改const声明的变量时会报错

    const n="zhang";
    n="li";//TypeError: Assignment to constant variable.
    const a=12;
    const  a=9;//不可以重复声明
    //SyntaxError: Identifier 'a' has already been declared

    当然,const有关声明的限制,只适用于它指向的变量本身的引用,也就是说,若为一个对象,那么修改这一对象内部属性,不会违反const有关的限制。

    const house={};

    house.name=”myhouse”;

    那么,在let和const出现之后,许多开发者不再很多地使用var了,多使用let和const,使得变量有了明确的作用域、声明位置以及不变的值。

    感谢你的阅读,相信你对“JavaScript中的变量声明怎么理解”这一问题有一定的了解,快去动手实践吧,如果想了解更多相关知识点,可以关注亿速云网站!小编会继续为大家带来更好的文章!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI