var、let和const区别

2019-10-01  本文已影响0人  Rebirth_914

随着2015年6月 ECMAScript 6.0 发布以来,有几个新的变量声明方式进入前端开发者的视线,即 let、const、import 和 class 命令,而这些新的声明方式之中有两个容易和 var 混淆,那就是 let 和 const。

简单介绍

一、变量提升

概述:变量可在声明之前使用。

console.log(a);//正常运行,控制台输出 undefined
var a = 1;
console.log(b);//报错,Uncaught ReferenceError: b is not defined
let b = 1;
console.log(c);//报错,Uncaught ReferenceError: c is not defined
const c = 1;

总结 :var 命令经常会发生变量提升现象,按照一般逻辑,变量应该在声明之后使用才对。为了纠正这个现象,ES6 规定 let 和 const 命令不发生变量提升,使用 let 和 const 命令声明变量之前,该变量是不可用的。主要是为了减少运行时错误,防止变量声明前就使用这个变量,从而导致意料之外的行为。

二 、暂时性死区

概述:如果在代码块中存在 let 或 const 命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

var tmp = 123;

if (true) {
    tmp = 'abc';//报错,Uncaught ReferenceError: tmp is not defined
    let tmp;
}

三、重复声明

概述:指在相同作用域内,重复声明同一个变量。

function func(){
  let a = 10;
  const PI = 3.1415;
  
  var a = 1;// 报错,Uncaught SyntaxError: Identifier 'a' has already been declared
  var PI = 3;// 报错,Uncaught SyntaxError: Identifier 'PI' has already been declared
}
// 当调用func()时报错,Uncaught SyntaxError: Identifier 'a' has already been declared
function func(){
  let a = 10;
  const PI = 3.1415;
  
  let a = 1;// 报错,Uncaught SyntaxError: Identifier 'a' has already been declared
  const PI = 3;// 报错,Uncaught SyntaxError: Identifier 'PI' has already been declared
}

var是允许重复定义的,那这又会给我们带来什么麻烦呢

var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}
console.log(i);// 输出 5

四、初始值

const PI = 3.1415;
PI = 3;// 报错,Uncaught TypeError: Assignment to constant variable.

五、作用域

在 ES5 中只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

var tmp = new Date();//处于全局作用域

function f() {
  console.log(tmp);//处于函数作用域
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

注:上面代码的原意是,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。
然而现实是在这段代码中,function 内部的2个 tmp 变量处在同一函数作用域,由于变量提升,导致函数作用域中的 tmp 覆盖全局作用域中的 tmp,所以,f()输出结果为undefined。

var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}
console.log(i);// 输出 5

上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量

上一篇 下一篇

猜你喜欢

热点阅读