「包公办案」之let、const、var的区别

hone
229 阅读4分钟

今天包大人带着展昭在街头晃悠，这时突然只见4位女子
a = 1
var a =1
const a = 1
let a = 1
来到包大人面前，求包大人做主，特别是 var ，可把包大人弄晕了，这不立马公堂办案，宣JavaScript(以下es3 和 es6 都是同一个人啊，只不过时期不一样)

var

  • a = 1, var a = 1 是es3的

  • let a = 1, const a = 1 是es6的

为啥es6会变的见异思迁呢？重新又找了2个，是金钱作祟变了心还是前者不好呢？\

es6说到: 家里那个 var 婆娘，一点都不好，要是好的话我又何苦去在找呢😩\

var: 你胡说，你说我哪里不好用了？？？\

es6: 我来说说你，平时我忍气吞声如今我便要在包大人面前好好说道说道尔等\

  • 你 a = 1，var 不在的时候，你就永远都在兴风作浪的声明一个全局变量\

a=1: 我只是有的时候会，哪里有你说的那么夸大其词\

  • 以下情况我只是在家的时候我就是全局变量
    a = 1
    console.log(window.a)
  • 但是我若是在其他的地方我就不一定是全局变量了
   var a 
   function fn() {
       var a 
       function fn2() {
           a = 1
       }
   }
   
   fn()

在我有两层函数的时候，a = 1 没有声明全局变量，我使用的是局部变量 a \

包公： 如此说来那就是在没有 a 这个变量的前提下，a = 1，就会隐式的声明全局变量，如果有变量 a 就用它，如果没有就把自己作为全局变量，你这含义不明不白，着实会有点让他人摸不着头脑，但是仔细听你说来也就差不多清楚了，但若是复杂了就容易混淆啊。 var a = 1 : 大人，就是因为 a = 1，容易迷惑相公，后来相公才找的我。

    function fn() {
       var a = 1
       console.log(a)
   }
  • 你看我这个 1 就是我这个 a。 es6: 是,你是没问题，但是你会自己提升啊，我不管做啥你都喜欢跑到前面去
 // 报错
  function fn() {
       if(true) {
           console.log(a)
       } else {
           console.log(2)
       }    
  }  
  
 // 不报错
  function fn() {
       if(true) {
           console.log(a)
       } else {
           var a
           console.log(2)
       }    
  }

es6: 你这不执行的代码会影响我执行的代码的，我头都大了。
var: 那你知道我这样，你就不要把我乱放嘛，直接给我放到第一行不就行了
var: 其实我也可以不使用全局变量的啊，我可以学学隔壁Java, C，PHP... es6: 你学学？你看看你学的

    function x() {
        var a = 1
        window.hhh = function() {
            console.log(a)
        }
    }
    
    // 不用函数包裹的话
    var a = 1
    window.hhh = function() {
        console.log(a)
    }

es6: 你把 hhh 和 x 都暴露成全局变量了，也就是说你不管用不用函数，你都会去暴露一个全局变量。 var: 那我这样不就行了

    (function x() {
        var a = 1
        window.hhh = function() {
            console.log(a)
        }
    }())

let

let: var你这样你不觉得麻烦嘛？我直接用以下方法不就行了

{
    let a = 1
    window.hhh = fubction() {
        console.log(a)
    }
}

 console.log(a) // 报错无定义

es6: 是的 let 只要看到 { 花括号就不会往上升了，你看看let，你在看看你肆无忌惮，到处乱跑。es5之前我不懂事，后来遇到了 let 才知道一切的苦恼都是自己找的，没有遇到对的人就会让自己很痛苦，一次次的试错才知道什么才是自己想要的。
包大人: 那你为和不一开始就选 let 呢？
es6: 那个时候年轻不懂事，速度太快一个星期就好上了，后来有一系列的问题，是我对不起 var a。
包大人: 你为了方便点使用局部变量，就选择了 let，你个渣男！
es6: 实在是 let 太好了，她的 作用域只管到花括号,不多管闲事啊。

    {
        let a = 1
    }
    console.log(a) // 报错

    {
        var a = 1
    }
    console.log(a) // a = 1

es6: 她还可以嵌套，不需要你那么复杂（用函数）

    {
        let a = 1
        console.log(a) // a = 1 
        {
            console.log(a) // 报错
            let a = 2
            console.log(a) // a = 2
            {
                let a = 3
                console.log(a) // a = 3 
            }
        }
    }

es6: 她在 bolck 里如果没有声明这个变量就去使用她的话，那么就会报错（Temp Dead Zone 临时死区）,先赋值在用 \

const

const: 我和姐姐 let 是一样的

    if(true) {
        let a =1
        console.log(1)
    } else {
        console.log(2)
    }
    
    console.log(a) // 报错

const: a就到花括号,let 姐姐声明的若有 {}, 那么她的作用域就是花括号里面。
es6: 没错，是的但是 const 迷人的地方在于，她只有一次，声明后终身不变

{
    let a =1
    console.log(a) // 1
    a = 2   // let a = 2 会报错，变量不可被声明两次
    console.log(a) // 2
}
    
{
    const PI = 3.1415926
    PI = 2 // 报错
}

这该如何判呢？包大人头大了...

总结

let

  1. let的作用域在最近的 {} 之间

  2. 如果你在 let a 之前使用 a 那么就会报错

  3. 如果你重复声明 let a ，那么就会报错 const
    1、2、3 同上 \

  4. 只有一次赋值机会，而且必须在声明的时候立马赋值

avatar
文章
阅读
粉丝