js基础回顾之var,let,const的区别


var

var定义的变量可以修改,如果不初始化会输出undefined,不会报错。(存在变量提升,能重复声明)

 var a = 1;
 // var a;//不会报错
 console.log('函数外var定义a:' + a);//可以输出a=1
 function change(){
 a = 4;
 console.log('函数内var定义a:' + a);//可以输出a=4
 } 
 change();
 console.log('函数调用后var定义a为函数内部修改值:' + a);//可以输出a=4

存在变量提升

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。


console.log(foo); // 输出undefined
var foo = 2;

上面代码中,变量foo用var命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量

2.const

const定义的变量一旦声明,常量的值就不能改变。,而且必须初始化。(暂时性死区,不存在变量提升,声明后必须赋予初始值)

const a=5 //正确
// const a;//错误,必须初始化 
// a= 9;
console.log(a)//TypeError: Assignment to constant variable. 常量变量赋值。

const的作用域与let命令相同:只在声明所在的块级作用域内有效。


if (true) {
  const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined

const声明后,值是否可以修改取决于的数据类型

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

上面代码中,常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

3.let

let是块级作用域,函数内部使用let定义后,对函数外部无影响。(暂时性死区,不存在变量提升,不能重复声明)

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。

不存在变量提升

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

变量bar用let命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。

暂时性死区

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

不允许重复声明

let不允许在相同作用域内,重复声明同一个变量。

// 报错
function () {
  let a = 10;
  let a = 1;
}

文章作者: BiLiang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 BiLiang !
评论
  目录