变量 -- let/const/var声明 · 前端知识 -- 学习整理

[TOC] >[success] # es6之前的作用域 [关于var更详细的作用域文章](https://www.kancloud.cn/cyyspring/html_js_cs/664497) 说明：var 声明永远作用于脚本、模块和函数体这个级别，在预处理阶段，不关心赋值的部分，只管在当前作用域声明这个变量。 ~~~ 1.在其他语言中都有类似块级作用域的概念即所声明的变量只能在块级内使用。 2.在es6之前，js的变量都是通过 'var' 声明，被声明的变量，就会变成全局变量(除了在function 中声明的变量) ~~~ >[danger] ##### 在非function 中使用var定义变量 ~~~ 1.在其他语言中'{}'即为一个作用域，因此下面的案例在其他语言中在'{}'外是访问不到在'{}'定义的变量，但在'js'中不是这样，if中通过 'var' 声明的变量name在'{}' 作用域外可以访问到 ~~~ ~~~ if(true){ var name = 'wang' } console.log(name) 打印结果： wang ~~~ >[danger] ##### 在function 中var 定义变量 ~~~ 1.在function 中定义的变量，在function 外打印'age'变量时候控制台报出未定义的提示 ~~~ ~~~ function test() { var age = 17 } console.log(age) 打印结果： age is not defined ~~~ >[danger] ##### 变量提升机制 -- 解释var变量声明访问 [预解析机制](https://www.kancloud.cn/cyyspring/html_js_cs/665715) ~~~ 1.把变量的声明提前了----提前到当前所在的作用域的最上面 2.函数(function)的声明也会被提前---提前到当前所在的作用域的最上面 3.为什么在函数中声明的变量外部不能访问，因为在函数退出后函数内部的变量会被销毁 4.抛开函数来说，声明'var'的变量它会创建一个全新的全局变量作为全局对象，即声明一个'window'对象 5.第四条的问题就是，好多js自带的变量都是在'window'变量中，就会导致变量覆盖问题： var RegExp = 'wang' console.log(window.RegExp) // wang 覆盖了原先的正则对象 6.所谓'var' 声明能被提前使用”的效果，事实上是'var' 变量总是被引擎预先初始化为 'undefined'的一种后果。 ~~~ * 解释第四条 ~~~ if(true){ var name = 'wang' } console.log(name) // wang console.log(window.name) // wang ~~~ >[success] # 新的变量声明 const /let ~~~ 1.为了解决'var' 或多多少的问题，es6 引入了let/const 2.let/const 可以很好的限制变量的作用域使用范围，不会出现和var将window 变量覆盖的问题，变量是不会挂载到window 全局上 3.let和const 也不会出现像'var' 一样的变量提升问题 ~~~ >[danger] ##### let ~~~ 1.使用let 后的变量也可以像其他语言一样作用域只在'{}' 生效，并且不会出现将 window 中的同名变量覆盖问题 ~~~ ~~~ if(true){ let sex = '妖' } console.log(window.sex) // undefined console.log(sex) // 报错 ~~~ >[danger] ##### const ~~~ 1.const 和let 作用域基本一致，只是使用起来的场景不同，const声明的是常量，被设置后事不允许被修改的 2.如果声明的变量是对象，是允许修改绑定对象的值，但不允许修改被绑定的对象，换成其他对象 3.const 声明的变量不能重新指向新的内存空间 4.const 是常量因此声明时候必须要赋值,下面的写法let 和 var 都可以但是const会报错 const name name = 'w' ~~~ ~~~ if(true){ const sex = '妖' } console.log(window.sex) // undefined console.log(sex) // 报错 ~~~ ~~~ const name = 'wang' name = 'yi' // 会报错不允许修改 ~~~ >[danger] ##### let const 和var 为什么会有这种区别 ~~~ 1.js 引擎在扫描代码发现变量声明的时候，当发现变量是'var'声明的，会将该变量提升到所在作用域的最上面，也就是如果是function 就会在function最上面，如果是非function 就会在整个代码的最上面 2.let 和const 会放到'临时锁死区' 也就是'TDZ' 这个区域，凡是在这个区域里的变量，会放到其所在作用域中('{}'),并且必须执行过变量声明语句，变量才会从临时锁死区中移除才能访问其变量内容，简单说：这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值 ~~~ ~~~ // 解释根据上面第二条的解释，value 所在的作用域'{}' 当在这个作用域的时候，value // 被let 声明所以放到了对应的TDZ 区域，但想获取必须还要执行，因此没有执行过所以报错 if(true){ console.log(typeof value) // Cannot access 'value' before initialization 初始化前无法访问value let value = 'bule' } ~~~ ~~~ // 这时候value 和if 中的value 所在的区域不同 // 所以打印结果是undefined console.log(typeof value) if(true){ // 这时候的value他的作用域只在if中 let value = 'bule' } ~~~ >[danger] ##### 三者要注意的问题-- 不允许重复声明 ~~~ 1.let/const不允许在相同作用域内，重复声明同一个变量。 2. 即使同一个变量名用三个不同修饰也是不允许的，一个变量名只能有唯一的修饰，下面的写法是错误的 let name = 'wang' var name = 'wang' const name = 'wang' ~~~ >[info] ## 循环中的let / const / var 变量 >[danger] ##### var 循环 ~~~ 1.下面第一个案例打印0到10，第二个是打印10次10，第一个案例是在我们预料中的，第二个案例和我们期待的略有差别这是因为使用var，内部创建的函数最后引用了相同的变量引用导致打印是十次10 2.想解决可以通过let 或者闭包形式解决 ~~~ ~~~ for(var i =0;i<10;i++){ console.log(i) // 0..4..9 0到10 } console.log(i) // 10 ~~~ ~~~ const list = [] for(var i =0;i<10;i++){ list.push(()=>{ console.log(i) }) } list.forEach(item=>{ item() // 打印10次10 }) console.log(i) // 10 ~~~ * 闭包的形式解决 ~~~ 1.所谓的闭包就是利用函数作用域来解决问题，在没有let 和const 的时代，有作用域的也仅仅只有函数，因此相当于将整个函数作用域变相的代替了那个时代的 let 和const ~~~ ~~~ const list = [] for(var i =0;i<10;i++){ list.push(((value)=>{ return ()=>{ console.log(value)} })(i)) } list.forEach(item=>{ item() // 打印0-9 }) console.log(i) // 10 ~~~ >[danger] ##### let 循环 ~~~ const list = [] for(let i =0;i<10;i++){ list.push(()=>{ console.log(i) }) } list.forEach(item=>{ item() // 打印0-9 }) console.log(i) // 报错此时i作用域只在for循环的{}中 ~~~ >[danger] ##### const 循环 ~~~ 1.下面的案例直接报错因为i++,将const 赋值i 进行了更改 2.但在for...in 和 ...of 是const 和let 都可以 ~~~ ~~~ const list = [] for(const i =0;i<10;i++){ list.push(()=>{ console.log(i) }) } list.forEach(item=>{ item() }) console.log(i) ~~~ >[danger] ##### 循环案例二 ~~~ 1.下面{1}打印出来的次数不想想象中打印了9次，就是因为作用域声明的问题，内外的for相当于用的都是同一个i，内层循环的时候，已经将i的整体变为了3，因此外层只循环了一次，可以用闭包 let const 来解决计数器内外名相同的问题，但是开发原则上是不建议相同的名字 ~~~ ~~~ for(var i=0;i<3;i++){ console.log(i,'外') for (var i = 0; i < 3; i++) { console.log(i) // {1} } console.log(i,'内') } // 打印结果： 0 '外' 0 1 2 3 '内' ~~~ >[danger] ##### 循环案例三 ~~~ 1.下面的案例使用了let 声明了变量i，只不过分别在for 里面和 for 外面都声明了，但最后执行结果是打印了三遍'foo' 这段代码可以理解成，两个i分别在不同的作用域因此是不会相互影响的 // let i = 0 // if (i < 3) { // let i = 'foo' // console.log(i) // } // i++ // if (i < 3) { // let i = 'foo' // console.log(i) // } // i++ // if (i < 3) { // let i = 'foo' // console.log(i) // } // i++ ~~~ ~~~ for (let i = 0; i < 3; i++) { let i = 'foo' console.log(i) } // 打印结果： foo foo foo ~~~ * var 会怎么样 ~~~ 1.产生这个问题的原因是var 声明的i共享了，当下一次进入for循环时候其实是 'foo'<3 是false 因此循环结束了 ~~~ ~~~ for (var i = 0; i < 3; i++) { var i = 'foo' console.log(i) } // 打印结果： foo ~~~ >[danger] ##### 总结 ~~~ 1.在实践时候明确可以使用es6的情况下，应该不用var，主要const ，配合let ~~~