Javascript var、let、const、及作用域

我们来聊一聊js的变量

前端也就三个

var、let、const  //看起来很简单的样子

首先来看看他们的共同点，很随意什么都可以定义，不在乎什么类型

var a = 1;
var b = "string"
var c = [1,2,3]
var d = {
    e: "xx"
}
var f = function(){
}

当然 let也一样，对的就是这么随意，我就不举例了，有兴趣可以再控制台看看。

不同点

我们知道var可以只声明不赋值，如下代码

var x;
console.log(x)//undefined
//再来看看let和const
let testLet;
console.log(testLet)//undefined结果一致
const testConst;
console.log(testConst)
//Uncaught SyntaxError: Missing initializer in const declaration 
//未捕获的语法错误，const需要有初始值，大概就是这意思。

以上例子我们得到第一个不同点，const必须要有初始值，google了好久我突然明白为什么必须有初始值了，因为const是常量不能重新赋值，我靠我感觉我是TC。

我们还知道var可以重复声明 例如：

var a = 1
var a = 2 //没毛病，a会被覆盖
let和const就不行了
let b = 1
let b = 2 //Identifier 'b' has already been declared
//同样const也不行 上边我们已经说到了不能重复赋值

变量提升

console.log(a) // undefined
var a = 1
//这个结果原因我们都知道，由于var变量提升
相当于：
var a;
console.log(a)
a = 1

我们再看看let和const
console.log(b)//报错b未定义
let b = 2

console.log(c)//报错c未定义
const c = 3

结论let和const变量不提升

接下来我们说说函数作用域和块级作用域

***函数作用域：创建函数后在花括号中声明的一些语句或变量只在当前函数中起作用。
***块级作用域：ES6带来的新特性，在语句块中声明的语句或变量只在当前语句块中起作用.

//我们先说说函数作用域
function sub(a,b){
      var s = a*b
      return s 
}  
sub(2,4)
console.log(s)//ReferenceError: s is not defined 
//是的报错了 不报错就怪了，不报错就没有私有变量一说了

上边代码我们证明了函数作用域，接下来我们看看块级作用域

if(true){
      var b = 2;
}
console.log(b) //2 此时证明var是没有块级作用域的

我们再看看let

if(true){
      let c = 2;
}
console.log(c) //c is not defined

接下来我们看看块不块的有啥用

//一个经典例子
for(var i=0;i<10;i++){
      setTimeout(function(){
            console.log(i)//10个10
      },1000)
}  

for(let i=0;i<10;i++){
      setTimeout(function(){
            console.log(i)//0-9
      },1000)
}  

为什么呢？

for(var i=0;i<10;i++){
      setTimeout(function(){
            console.log(i)//10个10
      },1000)
}  
console.log(i)//10

for(let i=0;i<10;i++){
      setTimeout(function(){
            console.log(i)//0-9
      },1000)
}  
console.log(i)//i is not defined 

分别在外部打印i，var声明的变量是10，let则报错提示未声明。

借助MDN收尾：let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是，var声明的变量只能是全局或者整个函数块的。