js中var、let、const详解

首先 var、let、const 在项目开发中都是用来声明变量的,在ES5中只有两种声明变量的方法:var和function,在ES6中新增了 let、const、class、import 四种声明变量的方法,本文主要讲解 var、let 与 const 的语法,其他的大家有兴趣可以了解一下。

作用域 { }

js 中作用域有:全局作用域、函数作用域。ES6 之前没有块作用域的概念。ES6 中新增了块级作用域。块作用域是函数作用域的子集。

块作用域由 { } 包括,if 语句和 for 语句里面的 { } 也属于块作用域。

var 声明作用域

var 定义的变量,没有块的概念,可以跨块访问, 但不能跨函数访问。

function test() {
    if (true) {
        // 局部变量
        var message = "hi"; 
    }
    console.log(message); // hi 
}
test();
console.log(message); // [ERR]: message is not defined 

这里,message 变量是函数内部使用 var 定义的,函数名 test(),调用它会创建这个变量并给它赋值,调用之后变量就会被销毁,所以最后代码运行结果会显示未定义。

var声明提升

 function test() {
    console.log(age);
    var age = 16;
}
test(); 

这里是不会报错的,因为使用这个关键词声明的变量会自动提升到函数作用域顶部,就相当于如下代码:

 function test() {
    var age;
    console.log(age);
    var age = 16;
}
test();

需要注意的是只是将变量的声明提升到函数作用域的顶部,并没有将赋值提上去,所以代码的运行结果是undefined。还有就是对一个变量多次赋值是没有任何问题的。

let 声明作用域

  1. 第一个区别,let 定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。for 循环定义的迭代变量不会渗透到循环体外。

if(true) { 
    let age = 26; 
    console.log(age); // 26 
} 
console.log(age); // [ERR]: age is not defined
  1. 第二个区别,就是let不允许同一个块作用域中出现重复声明。var 允许出现重复声明,以最后一次声明为主。

let age;
let age; //SyntaxError: Identifier 'age' has already been declared 
  1. 第三个区别,let 定义的变量没有变量提升,也就是说,使用 let 定义的变量,必须要在变量声明完以后使用,不然会报错。在let声明之前的执行瞬间被称为”暂时性死区“。

console.log(age);
let age = 26; // ReferenceError: Cannot access 'age' before initialization
  1. 第四个区别,全局声明就是 let 在全局作用域中声明的变量不会成为 window 对象的属性,var变量则会。

var age = 26;
console.log(window.age); // 26

let age = 26;
console.log(window.age); // [ERR]: age is not defined

const 声明作用域

const 用来定义常量,const 基本与 let 用法相同,唯一一个重要的区别就是 const 声明变量时必须同时初始化变量。只能在块作用域里访问,而且修改 const 声明的变量会报错。

const age = 15;
age = 18; //TypeError: Assignment to constant variable. 

const 声明的限制只适用于它指向的变量的引用。如果 const 变量引用的是一个对象,那么修改这个对象内部的属性并不违反 const 的限制。

const person = {};
person.age = 18; 
const 实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const 只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。
同一个变量只能使用一种方式声明,不然会报错。

你可能感兴趣的:(Web,前端,javascript)