在JavaScript中 let、const和var的区别

2021-06-09  本文已影响0人  WowBoard

let、const与var主要有以下几点区别

1, 重复声明:
已经存在的变量或常量,var 是允许重复声明的,let、const不允许

let a = 1;
let a = 2;
//  此时,js会报错  Uncaught SyntaxError: Identifier 'a' has already been declared
function test(f) {
   let f = 1; // 此时同样会报错, 因为f这个变量已经在形参中定义了
}
// const和let同理,就不再写了!

var b = 3
var b = 4
console.log(b); // 输出 4, 使用var定义 后面的定义变量会覆盖掉前面的定义,

2,变量的提升:
var定义的变量会提升变量的声明的作用域的顶部

console.log(a); // 此时JavaScript并不会报错,并且输出 undefined
var a = 1;

// 上面的代码相当于
var a;
console.log(a);
a = 1;

而let、const不存在变量提升

console.log(a); // 此时let定义的变量,变量的声明并不会提升,这里会直接报错!const同理
let a = 1;

3,暂时性死区
只要作用域中存在let、const,他们声明的变量或常量就自动“绑定”这个区域,不再受外部作用域的影响

let a = 2;
function func(){
  console.log(a); 
// 此时程序会报错,没有定义a这个变量
// 原因是在这个函数作用域中使用let定义了a这个变量
// 此时外部作用于的a变量就不会影响到内部的作用域了
// 而 let定义的变量是不会自动变量声明提升的
// 所以在函数内部定义 a变量之前使用a变量就会报错
  let a = 3;
}
func();
let b = 2;
function func(){
  // 此时在func内部使用let定义b变量。则测试将会使用外部作用域的b变量
  // 程序正确输出 "2"
  console.log(b); 
}
func();

4,window对象的属性和方法
在全局作用域中,var声明的变量,通过function声明的函数,会自动变成window对象的属性或者方法


var age = 18;
function add(){}
console.log(window.age)  //18
console.log(add === window.add) // trues

let sex = "1";
console.log(window.sex); //undefined 用let声明的变量并不会自动成文window的属性

5,块级作用域(最重要的区别)
// var没有块级作用域

for( var j= 0;j < 3;j++)
{
}
console.log(i); // 3 ,

for(let i = 0;i < 3;i++)
{
}
console.log(i); // 测试会报错,提示i变量没有被定义
上一篇下一篇

猜你喜欢

热点阅读