当前位置:编程学习 > JS >>

js里面三个申明变量方法var、let、const区别 不同处

var、let、const都是js声明变量的方法,var是es5语法,存在变量提升,let和const是es6语法新提出的块级作用域概念,存在暂时性死区,没有变量提升机制。

var 全局变量

let const 私有


一、var变量提升机制
我们在全局作用域中或局部作用域中,使用var关键字声明的变量,都会被提升到该作用域的最顶部,这就是我们常说的变量提升

1、var在全局作用域的应用
代码块1:

    console.log(a); //undefind
    var a = 1;
    console.log(a); //1

等价于

代码块2:

    var a;
    console.log(a); //undefined
    a = 1; 
    console.log(a); //1

代码块2为计算机在执行代码块1程序的执行流程

代码块3:

    var a = 1;
    console.log(window.a); //1

var在全局作用域声明的变量会挂载在window对象上,它会创建一个新的全局变量作为全局对象的属性,这种行为说不定会覆盖到window对象上的某个属性

2、var在局部作用域的应用
未在局部加var声明的情况

代码块1:

    console.log(a); //undefined
    function person(){
        a = 1
        console.log(a); //1
    } 
    person();

等价于

代码块2:

    var a;
    console.log(a); //undefined
    function person(){
        a = 1
        console.log(a); //1
    }

代码块2为计算机在执行代码块1程序的执行流程

在局部加var声明的情况

代码块1:

   person();
   console.log(a); //报错 Uncaught ReferenceError: a is not defined
   function person(){
       var a = 1;
       console.log(a); //1
   }

等价于

代码块2:

   person();
   console.log(a); //报错 Uncaught ReferenceError: a is not defined
   function person(){
       var a;
       a = 1;
       console.log(a); //1
   }

代码块2为计算机在执行代码块1程序的执行流程

二、块级作用域let、const

let、const声明和var声明用法一样,不同点在于let、var声明的是变量,const声明的是常量。

var存在变量提升,let、const不存在变量提升。var在全局作用域声明的变量会挂载在window对象上,

它会创建一个新的全局变量作为全局对象的属性,这种行为说不定会覆盖到window对象上的某个属性,而let const声明的变量则不会有这一行为


1、let声明
let声明的是变量,没有var那样的变量提升,let声明的变量只在当前作用域中有效

代码块1:

  console.log(a);//暂时性死区,报错 Unexpected identifier 'Uncaught'
  let a = 1;
  console.log(a);

代码块2:

    {
        console.log(a); //暂时性死区,报错 Unexpected identifier 'Uncaught'
        let a = 1;
        console.log(a);
    }

代码块3:

    {
        let a = 1;
        console.log(a); //1;
    }
    console.log(a); 访问不了内部变量,报错 Unexpected identifier 'Uncaught'

代码块4:

    var a = 1;
    let a = 1; //不能重复声明 报错 Identifier 'a' has already been declared

代码块5:

    var a = 1; //全局作用域
    {
        let a = 1; // 代码块中声明,毫无影响
    }

代码块6:

    let a = 1;
    console.log(window.a); //undefined

上述代码说明:let声明的变量没有变量提升,存在暂时性死区。如果在同一个作用域中某个变量已经存在,再次使用let关键字声明的话会报错。let声明的变量不会挂载到window对象上

2、const 声明

const声明的是常量,常量不可以修改。常量定义必须初始化值,如果不初始化值就会报错。

特别注意的一点是const变量不能修改指针,但是可以修改值,比如我们定义一个对象,我们就可以修改对象里的属性值,但是不可以重写整个对象。

使用const声明的常量没有var那样的变量提升,const声明的常量只在当前作用域中有效


代码块1:

    {
        console.log(a); //暂时性死区,报错 Unexpected identifier 'Uncaught'
        const a = 1;
        console.log(a);
    }

代码块2:

    {
        const a = 1;
        console.log(a); //1;
    }
    console.log(a); 访问不了内部变量,报错 Unexpected identifier 'Uncaught'

代码块3:

    const a;
    console.log(a);//常量a未初始化 报错 Missing initializer in const declaration

代码块4:

    const a = { b:1,c:2 };
    a = {}; //不能修改对象指针, 报错 Assignment to constant variable

代码块5:

    const a = { b:1,c:2 };
    a = {b:2,c:1};
    console.log(a); // 可以修改值 {b:2,c:1}

代码块6:

    const a = 1;
    console.log(window.a); //undefined

上述代码说明:const声明的变量不存在变量提升,存在暂时性死区,必须先声明并立即赋值,常量值不可以修改,对象可以修改值,不能修改指针。const声明的变量不会挂载到window对象上
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,