谈谈 var, let, const. var 也是一种选择

BoYang 发布于2019-08-21 11:44 / 1830人阅读

摘要：谈谈也是一种选择历史故事在之前是一门被称为没有块级作用域的语言看看代码输出结果权威解析这是因为被声明在当前函数的作用域内不管你声明在函数的什么位置在函数执行之前解析器会扫描当前函数作用域并将以和开头的语句的变量名添加到当前函数作用域内这意味

谈谈 var, let, const. var 也是一种选择 历史故事

在 ES6 之前, JavaScript 是一门被称为没有块级作用域的语言.

看看代码:

(function(){
    "use strict";
    console.log(i)
    for (var i = 0; i < 10; ++i) { console.log(i) }
    console.log("i=" + i)
})()

输出结果:

undefined
...
...
i=10

权威解析: i=10 这是因为 i 被声明在当前函数的作用域内, var 不管你声明在函数的什么位置, 在函数执行之前, 解析器会扫描当前函数作用域, 并将以 var 和 function 开头的语句的变量名添加到当前函数作用域内, 这意味着诸如 var func = function name() {} 这样的语句的右边的函数的名字是不会被添加到当前作用域内的( 但是在函数内部可以访问 ), 在 ES6 中的 class 也有同样的表现. 此时 var 声明的变量还没有值( undefined ), 这也是第一个输出语句为什么没报错而输出 undefined 的原因; function 声明的函数名会指向一个函数对象( 也就是 __proto__ 属性指向 Function.prototype ).

这种现象对于习惯了块级作用域的程序猿来说是灾难般的. 于是搞标准的那帮人弄了 let, const 这样的关键字出来. let 和 const 声明的变量不会在之前说的扫描阶段里被添加到当前作用域内, 并且会在当前大括号内的作用域块结束的时候被清理掉, 也就是说 ES6 有了块级作用域. 对于 const 还加了两条限制.

如果 const 的变量是基本类型( null, undefined, string, number ), 那么变量的值不能变.

如果 const 的变量是引用类型( object ), 那么其引用值不能改变.

看代码就知道了

(function(){
    "use strict";
    
    // 如果执行下面这行代码, 会报引用错误
    // console.log(i)  // Reference Error
    
    // 如果执行下面这行代码, 会报引用错误
    // 因为 i 在 for 循环结束后就被销毁了
    setTimeout(() => console.log(i), 0)
    
    for (let i = 0; i < 10; ++i) { console.log(i) }
    
    const foo = 10
    const bar = {}
    
    foo = 11 // TypeError
    bar.type = "const" // OK
})()

我该怎么选择?

如果你稍微接触过 ES6, 别人会告诉你 绝对不要用 var, 如果变量在将来不会改变就用 const, 否则就用 let.

这句话我是赞同的, 但是在我写代码的时候遇到某些情况不得不用 var, 看代码:

async function clearExpiredRss() {
  try {
    var connection = await pool.getConnection()
    connection.query(`DELETE FROM ${TABLE_NAME} WHERE date+3600*1000 < ${Date.now()}`)
  } catch (e) {
    logger.error(e)
  }  finally {
    connection && connection.release()
  }
}

connection 变量如果用 let 或 const 声明的话, finally 内就没办法释放连接了. 有人说为什么不直接在 try 内写个 if 判断? 个人觉得在 finally 里看起来更优雅一些.

所以说, 有时候作用域链反倒是 javascript 这门语言的优势, 为此, 我不得不说, javascript 是世界上最好的语言!

最后想说的

你们有没有遇到过 github issues 上写文章的人... 我反正是看到了很多在 Github 上的 issues 写技术博客的人. 之前都喜欢用 Github 的 Subscribe 功能来订阅, 或者直接 Watching ... 这两天突发奇想, 能不能把 issues 转换成 RSS 呢? 所以就撸了一个小工具, github-issues-rss, 求关注, 求 star !

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87054.html

谈谈前端异常捕获与上报

摘要：另外这样的异常捕获不能捕获的异常错误信息，这点需要注意。最终大致的流程图如下结语前端异常捕获与上报是前端异常监控的前提，了解并做好了异常数据的收集和分析才能实现一个完善的错误响应和处理机制，最终达成数据可视化。关于微信公众号：前端呼啦圈（Love-FED）我的博客：劳卜的博客知乎专栏：前端呼啦圈前言 Hello，大家好，又与大家见面了，这次给大家分享下前端异常监控中需...

Kosmos 2019-08-22 15:44 评论0 收藏0
谈谈PostCSS

摘要：它们有个统一的名字预处理器。面对以上问题，预处理器给出了非常可行的解决方案变量就像其他编程语言一样，免于多处修改。回到话题中，之所以会出现向预处理器这样子的解决方案，归根结底还是标准发展的滞后性导致的。前言现在的前端，javascript的发展有目共睹，框架林立。同时，html也是齐头并进，推出了HTML5标准，并且得到了普及。这样的发展却唯独少了一个角色？ CSS，就是这个看似不...

高胜山 2019-08-30 13:47 评论0 收藏0
谈谈PostCSS

摘要：它们有个统一的名字预处理器。面对以上问题，预处理器给出了非常可行的解决方案变量就像其他编程语言一样，免于多处修改。回到话题中，之所以会出现向预处理器这样子的解决方案，归根结底还是标准发展的滞后性导致的。前言现在的前端，javascript的发展有目共睹，框架林立。同时，html也是齐头并进，推出了HTML5标准，并且得到了普及。这样的发展却唯独少了一个角色？ CSS，就是这个看似不...

leap_frog 2019-08-21 17:05 评论0 收藏0
魔幻语言 JavaScript 系列之 call、bind 以及上下文

摘要：那么，它到底是如何工作的呢让我们从一种更简单的实现开始实际上这种实现代码更短，并且更易读是函数原型中的一个函数，它调用函数，使用第一个参数作为参数，并传递剩余参数作为被调用函数的参数。原文：The Most Clever Line of JavaScript 作者：Seva Zaikov 原文最近一个朋友发给我一段非常有趣的 JavaScript 代码，是他在某个开源库中...

cuieney 2019-08-21 17:32 评论0 收藏0
谈谈JavaScript中严格模式你应该遵守的那些事

严格模式首先来了解一下严格模式是什么？严格模式是JavaScript中的一种限制性更强的变种方式，不是一个子集：它在语义上与正常代码有明显的差异，不支持严格模式的浏览器与支持严格模式的浏览器行为上也不一样，所以不要在未经严格模式特性测试情况下使用严格模式，严格模式可以与非严格模式共存，所以脚本可以逐渐的选择性加入严格模式严格模式的目的首先，严格模式会将JavaScript陷阱直接变成明显的错...

MingjunYang 2019-08-23 11:29 评论0 收藏0