未定义函数或变量 syms。_【5】变量和作用域

写在前面

• 变量：变量来源于数学，是计算机语言中能储存计算结果或能表示值的抽象概念。变量可以通过变量名访问。
• 作用域：可以通过变量名来访问变量的区域
• 本文通过几个简单的js语句块，重点理解以上两个名词在js编程中的作用和意义
• 推荐学习方法：知道什么是变量，变量名，赋值，大概知道作用域是个什么概念，不同的申明语句会产生什么样的作用域就行了，以后遇到不理解的相关问题再回来回顾回顾
• Created on 2020/9/30

变量的申明和使用

1. js申明变量关键字：var（ES5及以前）、let、const
2. var 申明的变量作用域会被提升到当前块作用域顶部，但是赋值不会被提升（具体原因涉及到js运行原理，js进阶阶段在讲），重复申明同名变量表现为重新申明该变量；let 申明变量不会造成变量提升，并且不能重复申明变量，会报错；const 申明同let，唯一区别是申明时必须赋值，之后不可以修改
3. 申明变量的格式：var 变量名、let 变量名、const 变量名，示例：var v1;let v2;const v3;
4. 变量是用来存储值的，给变量存储值的过程叫做赋值，赋值是js中的一条基本语句，赋值符号是一个‘=’，可赋值字面量，也可以赋值表达式，示例：var v1 = 111; // 申明并赋值console.log(v1); // 控制台打印输出 v1var v2;v2 = 222;var v3;v3 = v1 + v2; // 给 v3 赋值一个表达式console.log("输出: v1 =", v1, ", v2 =", v2, ", v3 =", v3);

变量作用域

1. 作用域：可访问目标变量的程序上下文区域
2. 简单理解：如上文的示例中，如果没申明v1直接在控制台打印输出v1，值为 undefined
3. 代码块内部申明的变量，外部无法访问（重点理解！重点理解！重点理解！）
4. 块级作用域：ES5及以前是没有块级作用域这一说法的，唯一的可以分割作用域的就是函数内部申明的变量，外部无法直接访问。ES6为了更安全的限制变量作用域，加了块级作用域的概念，使用大括号包裹的语句块被认为是块级作用域。为了向下兼容，块级作用域的限制不影响var申明变量，只对let和const生效
5. 以下通过几个示例详细讲解

• (1) var申明的变量作用域可以被提升
• 第一个variable打印为 undefined 是因为 ES5 及以前没有块级作用域概念，打括号内语句块对 var 申明变量的表现为同一层，都是变量申明提升，已申明但未赋值的变量默认值为 undefined。
• 第三个略
• 第四个打印是对以提升到全局申明的变量赋值后才打印，所以可以正常打印。
• 示例： console.log(variable);{console.log(variable);var variable = 'variable string value';console.log(variable);}console.log(variable);

• (2) let 申明变量同var，但是不会造成变量提升，也不会泄漏到块级作用域外面
• 第一次执行报错原因：letVariable在全局作用域下未申明
• 第二次执行报错原因：letVariable未申明就是用，必须报错呀（这里注意和var仔细对比）
• 第三次报错第7行是全局作用域，也是申明 letVariable 变量的块级作用域外面，因为变量不会泄露出块级作用域，所以也报错未定义
• 示例console.log(letVariable);{console.log(letVariable);let letVariable = 'variable string value';console.log(letVariable);}console.log(letVariable);

• (3) const 申明js常量（不可变的变量）
• 第一个报错：let和const申明变量只在自己所属的块级作用域中生效，不会提升到全局，所以未申明
• 第二个报错：const申明变量必须完成初始化赋值操作才可以使用
• 第三个报错是const申明初始化后的变量禁止再次赋值
• 第四个报错：同let，const申明的变量不会泄漏到作用域外部，所以在外部 constVariable 未定义
• 示例console.log(constVariable);{console.log(constVariable);const constVariable = 'variable string value';console.log(constVariable);constVariable = 'const variable string value';console.log(constVariable);}console.log(constVariable);

常见的块级作用域

1. for循环循环体内
2. while 循环体内
3. if ... else if ... else ... 代码块内部
4. try ... catch ... 代码块
5. promise 内部
6. {} 块级作用域代码块内部
7. 特殊的块级作用域，function 函数体内部，可以看成是一方独立的天地，内部var申明的变量都不会泄露出去，所以拥有很多很实用的场景，也引出了很经典的面试问题：函数闭包^[1]

参考

1. ^菜鸟教程：闭包 https://www.runoob.com/js/js-function-closures.html