为了账号安全,请及时绑定邮箱和手机立即绑定

【前端骚操作】var,let与const的恩怨情仇

var,let与const的恩怨情仇

以下内容源自《深入理解 ES6》的书,有更多兴趣的建议看看。

三角关系其实很清晰

js:喵蛋,你们谁敢说变量声明比我“优秀”的?

php:世界“第一”的我表示,不敢。

java:世界最“牛”的我表示,不敢。

python:世界最“简单”的我表示,不敢。

c:傻逼……


var

谨记一点:var 声明的变量永远声明在当前所在 函数 的作用域内,非函数作用域内声明还是被当做声明在所在函数内,如下伪代码:

function() {
    var a = 1

    if(any) {
        var b = 1
        console.log(a, b,) // 1, 1
    } else {
        console.log(a, b) // 1, undefined,注意不是not defined
    }

    console.log(b) // undefined
}

其中 var b = 1 被分解为:var b; b = 1,而 var b 部分被提升(hoisting,跟我读:好意思听?)到 function 里面了,明白?如下:

function() {
    var a
    var b
    a = 1

    if(any) {
        b = 1
        console.log(a, b,) // 1, 1
    } else {
        console.log(a, b) // 1, undefined,注意不是not defined
    }

    console.log(b) // undefined
}

与 window 的关系

在浏览器环境下,全局默认有个 window 对象,因为 var 的 hoisting 存在,会使得 var 个东西变成 window 的,这不是坏事,很多人已经习惯这么干了,比如:

var test = 1
window.test // 1

if(1) {
    var test1 = 1
}

window.test1 // 1

这个好处是很方便获取变量,坏处就是容易把 window 的自带属性给覆盖了,如下:

var RegExp = '1'
window.RegExp // 1

大哥,RegExp 是很重要的对象好吗?


let

首先,let 就锁作用域了,跟 var 不同,不会 hoisting(读一遍),而且是根据代码块,而不是函数作用于,也就是说,if,for 等等都会锁作用域,如下伪代码:

function() {
    let a = 1

    if(any) {
        let b = 1
        console.log(a, b,) // 1, 1
    } else {
        console.log(a, b) // 1, not defined,其实这里是报错……
    }

    console.log(b) // not defined,其实这里是报错……
}

其次,let 不允许同作用域内重复声明,注意,同作用域,伪代码:

function() {
    let a = 1
    let a = 2 // 报错

    if(any) {
        let a = 3 // 没错,此a非彼a了,当前代码块内用到的都是这个a
    }
}

暂时性死区

temporal dead zone,TDZ

这个名字非常非常的头(shuai)疼(qi),看这个代码:

if(1) {
    console.log(typeof a) // undefined,hoisting,ok?
    var a = 1
}

if(1) {
    console.log(typeof a) // 暂时性死区
    let a = 1
}

console.log(typeof a) // undefined
if(1) {
    let a =  1
}

头大不?其实这个头(shuai)疼(qi)的名词解释的反而挺到位的。

var 不解释了,先解释第三个,就是常规的使用 typeof 检测变量属性,如果变量未申明,返回undefined,这是正常的;但是在 let 和 const(没错,const一样)所在作用域内,因为 let 和 const 的存在,导致其申明的变量被锁死,在申明前被调用的话,呵呵,不好意思,就算你是 typeof 大哥也没用,报错。

注意,说的是被 let 和 const 申明的才会被锁死,没被绑定的是常规处理,如下:

if(1) {
    console.log(typeof jhdskfkjfhdkj) // undefined
    console.log(typeof a) // 暂时性死区
    let a = 1
}

与 window 的关系

没关系。

let RegExp = 1
window.RegExp // ƒ RegExp() { [native code] }
RegExp // 1

const

constant(跟我读:康斯顿~),就是不变的量,很多人容易忘记初始化,然后报错了再来添加初始值,这里脑子稍微过一下就可以记住:

假如不赋值能成功(说了假如),那就是 undefined,你没事创建个 undefined 来展示代码有多l ow 么?然后你又后面修改,但是本身人家就不能修改,所以一定需要初始化赋值,这样逻辑就通了……

恩,对了,他的作用域跟 let 一样一样的。没错,重复声明也不行。

之前说过,const 比较坑的就是,如果值是对象,对象的属性却是可以修改的……伪代码:

const a = {
    b: 1
}

a = {} // 报错

a.b = 2 // 没错

暂时性死区

与 let 一样(const:喂喂喂,啥都跟 let 一样,搞得我好像它小弟一样。),但是由于 const 的不可变性,就不要想着用来搞常规循环那个啥了,这个跟 let 不一样。

常规循环就是 for(let i = 0; i < x.length; i ++) {} 这个,for in 和 for of 中 const 是可以用的,因为每次都是不同的嘛。

与 window 的关系

与那谁(let)一样。


用谁的问题

之前我文章写的是尽量使用 let,恩,现在我改了,这个真不是这个书的事情……

默认使用 const,除非是一定需要变动的,则使用 let,极特殊的情况下并且你能控制 var,再考虑使用 var。


欢迎关注,如有需要 Web,App,小程序,请留言联系。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
软件工程师
手记
粉丝
1.6万
获赞与收藏
893

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消