var、let、const区别

背景知识点:

一、JavaScript和ECMAScript关系:

JavaScript=ECMAScript+BOM+DOM
ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展

二、版本时间

ECMAScript 5.1 -------->2011年
ECMAScript 6 -------->2015 年 6 月

三、作用域

ES5 中作用域有:全局作用域、函数作用域。没有块作用域的概念
ES6 中新增了块级作用域。块作用域由 { } 包括,if语句和 for语句里面的{ }也属于块作用域

四、区别

1、var和let

函数作用域 vs 块级作用域:

var 和 let 第一点不同就是 let 是块作用域,即其在整个大括号 {} 之内可见。

var:只有全局作用域和函数作用域概念,没有块级作用域的概念。但是会把{}内也假称为块作用域。

let:只有块级作用域的概念 ,由 { } 包括起来,if语句和for语句里面的{ }也属于块级作用域。

for(var i=0;i<4;i++){
    console.log(i);//循环输出0,1,2,3
}
console.log(i);//4

for(let j=0;j<4;j++){
    console.log(j);//循环输出0,1,2,3
}
console.log(j);//j is not defined
变量提升 vs 暂时性死区:

var 存在变量提升,在变量声明之前进行访问会直接提示undefined,而 let声明的变量却不存在变量提升一说,所以用 let 定义的变量一定要在声明后再使用,否则会报错

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

console.log(b);
let b=24;//Cannot access 'b' before initialization

ES6明确规定,如果区块中存在let命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。所以在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

当前作用域顶部到该变量声明位置中间的部分,都是该let变量的死区,在死区中,禁止访问该变量。由此,我们给出结论,let声明的变量存在变量提升, 但是由于死区我们无法在声明前访问这个变量。

let a = 'outside';
if(true) {
   console.log(a);//Uncaught ReferenceError: a is not defined
    let a = "inside";
}

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作,因为会使typeof报错。

{
  typeof name;//ReferenceError
  let name;
}

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。在代码块中,使用let命令声明变量之前,该变量都是不可用的,这在语法上称为“暂时性死亡”。

let不允许重复声明变量

可以看出,var:变量可以多次声明,而let不允许在相同作用域内,重复声明同一个变量。

if (true) {
   let a;
   let a; // Uncaught SyntaxError: Identifier 'a' has already been declared
}

if(true){
  var d;
  var d;    //不会报错
}

if (true) {
   var c;
   let c; // Uncaught SyntaxError: Identifier 'c' has already been declared
}

if (true) {
   let d;
   var d; // Uncaught SyntaxError: Identifier 'd' has already been declared
}
全局变量vs全局对象的属性

ES5中全局对象的属性与全局变量基本是等价的,但是也有区别,比如通过var声明的全局变量不能使用delete从 window/global ( global是针对与node环境)上删除,不过在变量的访问上基本等价。

ES6 中做了严格的区分,使用 var 和 function 声明的全局变量依旧作为全局对象的属性,使用 let, const 命令声明的全局变量不属于全局对象的属性。

var a = 10;
console.log(window.a); //10
console.log(this.a) //10

let b = 20;
console.log(window.b); // undefined
console.log(this.b) // undefined

2、var和const

除了let以外,ES6还引入了cons,const 和 let 的作用域是一致的,不同的是 const 变量一旦被赋值,就不能再改变了,但是这并不意味着使用 const 声明的变量本身不可变,只是说它不可被再次赋值了,而且const 声明的变量必须经过初始化。

const a = 1;

a = 2; // // Uncaught TypeError: Assignment to constant variable
const b; // Uncaught SyntaxError: Missing initializer in const declaration

注:复合类型const变量保存的是引用。因为复合类型(如数组和对象)的常量不指向数据,而是指向数据(heap)所在的地址(stack),所以通过 const 声明的复合类型只能保证其地址引用不变,但不能保证其数据不变。所以将一个对象声明为常量必须非常小心。

简单数据类型(数值,字符串,布尔值):值保存在变量指向的那个内存地址,因此等同于常量。

复合类型的数据(对象和数组):变量指向的是内存地址,保存的是一个指针,const只能保存这个指针地址是固定的,至于他指向的数据结构是不是可变的,就完全不能控制了。

/*不会报错,因为names1指向的地址不变,改变的只是内部数据*/
const names1 = [];
names1[0] = 1;
names1[1] = 2;
names1[2] = 3;
names1[3] = 10;
console.log(names1);

/*出错,因为变量names2指向的地址不能发生改变,应始终指向[]所在的地址,[1,4]与[6,7]不是同一个地址*/
const names2=[1,4];
names2=[6,7];   //报错

五、注意

1、const定义的常量不能修改只针对基本数据类型,对于对象而言是不成立的,因为对象是引用类型数据,声明的常量中保存的是对象的指针,也就是意味着const所谓的不能修改指的是保证指针不发生更改,而修改对象的属性,并不会改变对象的指针,所以是被允许的,也就是说const定义的引用类型只要指针不发生改变,其他的不论如何改变都是允许的。

备注:本文引自文章https://blog.csdn.net/unionz/article/details/80032048,https://www.cnblogs.com/jing-tian/p/11073168.html,侵删

你可能感兴趣的:(var、let、const区别)