首页
视频
资源
登录
原
精
新的变量的声明方式 let
4675
人阅读
2020/6/24 16:41
总访问:
95530
评论:
0
收藏:
0
手机
分类:
ES6
# ES6 之前的变量声明方式: ### 在 ES5 中写 var 和 不写 var 区别是什么? > - 使用 var 是在当前的作用域内声明一个变量 > - 在函数中声明就是函数中的作用域变量 > - 在全局声明就是全局作用域变量 > - 不写 var 就是在 window 这个这个全局对象上定义一个属性 如何证明 不写 var 就是在全局对象 window 上增加了一个属性呢?? > 通过 函数 delete 方法 > delete 的作用就是用于删除对象上的属性 => **注意也只能用于删除对象上的属性 并不能够删除变量** ```javascript var a = 5 console.log(a) => 5 delete a console.log(a) => 5 console.log(window.a) => 5 ``` ```javascript b = 6 console.log(b) => 6 delete b console.log(b) // 当前的b已经被删除掉了 报错 console.log(window.b) // undefined ``` **总结 写 【var 就是一个变量 不写 var 就是浏览器顶层对象 window 上的一个属性】** **方法 delete 可以删除对象上的属性** window.a 和 window.b 都能够输出内容是因为 js 早期的作者将 Window 顶层对象和 全局变量做了挂钩 (现在多数人都以为这是js var 变量设计的败笔)=> 所以我们使用 let 声明变量就可以很好的解决这个问题 **【不推荐在开发项目的时候将 变量挂载在全局对象 window 上 这样会污染全局对象 window】** ```javascript let aa = 5 console.log(aa) // 5 console.log(window.aa) // undefined ``` let 声明变量的优点: - **不属于顶层对象 window** - **不允许重复声明 重复声明会报错** - **不存在变量提升** - **暂时性死区** - **块级作用域** ## 优点解释: ### · 暂时性死区 **【暂时性死区 => 防止变量在声明之前使用变量】** ```javascript var aaa = 5 if (true) { aaa = 6 let aaa // Cannot access 'aaa' before initialization } ``` **【这种就会报错 因为在使用的时候还没有声明 这个也是暂时性死区】** ```javascript function foo(a = b, b = 2) { console.log(a, b) } foo() ``` **【这里也会报错 因为在调用函数的时候 b 未初始化 暂时性死区】** ```javascript function foo(a = b, b = 2) { console.log(a, b) } foo() ``` **【这个先声明在使用的就没有问题】** ```javascript function foo(a = 2, b = a) { console.log(a, b) } ``` ### · 块级作用域 **块级作用域: 【在 es5 变量的声明中只有全局作用域和函数作用域 并没有全局作用域的概念 {} 内就是块级作用域】** **{} 中定义的变量只能在 {} 中使用出了这个范围就不能使用了** 看看 ES5 中没有块级作用域引发的后果 ```javascript for (var i = 0, i < 3; i++) { console.log('循环内:' + i) } console.log('循环外' + i) // 最终的结果 i = 3 ``` ```javascript if (false) { var a = 10 } console.log(a) // undefined ``` ES6 中存在块级作用域 ```javascript for (let i = 0, i < 3; i++) { console.log('循环内:' + i) } console.log('循环外' + i) // 最终的结果 undefined ``` ```javascript if (false) { var a = 10 } console.log(a) // 报错 ``` **【 ES6 中 块级作用域必须存在 {} 否则 js 引擎就会认为不存在块级作用域 => 报错】** 细微差别: ```javascript if (true) var a = 10 // => var 声明变量是可以的 => var 会有变量的提升 if (true) let a = 10 // => let 声明变量就会报错 => js 引擎认为不存在块级作用域 => 无法声明变量 => 报错 ``` 牛刀小试: ```javascript // 考验题 for(var i = 0; i < 3; i++) { setTimeout(() => { console.log(i) // 3 3 3 }, 1000) } ``` 这里输出的结果是 3个3 解释: 在 js 中 setTimeout 定时器是一个异步函数 异步函数的执行会等待同步函数的执行完成 当 for 循环执行完成的时候 才开始异步的 函数执行 所以 会输出 3 个 3 提出挑战 如何才能按照 0 1 2 的方式输出 结果值呢?? #### 方式1: 通过 闭包的方式 ```javascript for(var i = 0; i < 3; i++) { (function(j) { setTImeout(function() { console.log(j) }) })(i) } ``` #### 方式2: 在原来代码的基础上直接使用 let 声明 变量 i 即可 在 编译代码的时候自动将代码编译成 闭包的方式 锁住 变量 i
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
叼着奶瓶逛酒吧
大概你身上总有我喜欢的味道,所以我一见你就开心的笑
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
祈祷永无bug
8篇
初吻给了奶嘴
1篇
Vue课程笔记
3篇
ES6
5篇
TypeScript
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术