JS——JavaScript中const、var、不带var和let区别

序言

　　开发中经常遇到变量的定义，平时就是一股脑的var或者全局的时候就不写var，所以为了清醒认识他们之间的区别，此处做个记录。

正文

1、var

带var定义的变量只有函数内作用域和全局作用域,作为全局变量时挂载在window对象上,configurable为false。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

delete a; //return true,删除失败,因为configurable为false

2 不带var

不带var定义的变量,全局作用域,挂载在window对象上,configurable为true。

x=3;  //挂载于window.x

//匿名箭头函数，自执行函数
(()=>{
  x=5;   //x被改变
  console.log(x)
})()   //输出5
console.log(x); //输出5
Object.getOwnPropertyDescriptor(window,'x') 
//{value: 5, writable: true, enumerable: true, configurable: true}
delete x; //return true,删除成功,因为configurable为true

3 let

let定义的变量具有块级作用域,不能重复定义,configurable为false，函数内部使用let定义后，对函数外部无影响。

let x;    //正确,可以不用初始化.x为undefined 
let x=5;  //报错,不能重复定义
let i=3;   //全局作用域
{ 
  let i=4;  //作用域为花括号内
  console.log(i);  //输出4
}

//匿名箭头函数，定义后运行
(()=>{
  let i=5;   //局部变量
  console.log(i)
})()   //输出5
console.log(i)  //输出3
delete i;  //return false

4 const

const拥有let所有性质,但const不能被直接修改,必须被初始化,configurable为false

const i=1;
i=5;  //报错,const定义的不能直接修改    
const p={
  name:"Minions",
  age:8
}  //定义字面量对象p
p={
  name:"xx"
} //报错,不能直接修改p
p.age=16; //正确修改
delete p;  //return false

有趣的面试例子

面试的时候很经常遇到一个例子：

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
//这个例子执行完输出什么结果？

//答案是 5,5,5,5,5

//如果想要输出0,1,2,3,4改怎么实现？
//其中一种方案就是把var换成let就可以了。let的块级作用域在这里就体现出来了。

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

——(完)——