目录
一、JavaScript 作用域
1、全局作用域
2、函数作用域
3、块级作用域
4、综合示例
5、总结
二、var、let、const
1、var 关键字
2、let 关键字
3、const 关键字
4、总结
5、使用场景
一、JavaScript 作用域
在JavaScript中，作用域是指程序中可访问变量（对象和函数同样也是变量）的集合；
作用域决定了变量的可见性和生命周期；
简单来说（个人理解）：作用域就是指，变量能够正常被访问的区域；
有三种主要的作用域类型：全局作用域、函数作用域、块级作用域；
1、全局作用域
- 当在函数外部声明变量时，默认在全局作用域中，即为全局变量；
- 该变量可以在整个程序的任何地方（在所有脚本和函数中）使用， 直到它们被销毁或程序结束；
- 全局变量通常在浏览器环境中由window对象持有；
- window对象的内置属性都拥有全局作用域；
<script>
var myName = "zyl";
console.log("全局作用域中的myName ：", myName );
console.log(window.myName );
</script>注意：在全局作用域中声明的myName变量，被window对象持有；
2、函数作用域
- 当在函数内部声明变量时，即在函数作用域中；
- 该变量只在该函数内部可见；
- 函数作用变量在函数执行完毕后会被销毁，除非它们被返回或以其他方式被外部作用域引用；
<script>
function fn(){
var myName = "zyl";
console.log("函数作用域中的myName：", myName);
}
fn();
console.log(myName); //ReferenceError: myName is not defined
</script>注意：在函数作用域中声明的变量只在函数内部可见，函数外面时访问不到的；
3、块级作用域
- JavaScript ES6 引入了块级作用域，通过let和const关键字声明变量，它们只在声明所在的代码块内可见；
- 这种作用域提供了更细粒度的控制，可以避免全局污染；
- 块级作用域在循环内部声明变量时特别有用；
<script>
{
let myName = "zyl";
console.log("块级作用域中的myName ：", myName );
}
console.log(myName);
</script>注意：在块级作用域中声明的变量，只在该块内可见，代码块的外面是访问不到的；
4、综合示例
<script>
var globalVar = "全局作用域";
function fn(){
var fnVar = "函数作用域";
{
let blockVar = "块级作用域";
console.log("代码块中，访问块级作用域中的变量，blockVar：", blockVar);
console.log("代码块中，访问函数作用域中的变量，fnVar：", fnVar);
console.log("代码块中，访问全局作用域中的变量，globalVar：", globalVar);
}
// console.log("函数中，访问块级作用域中的变量，blockVar：", blockVar); // 报错：ReferenceError: blockVar is not defined
console.log("函数中，访问函数作用域中的变量，fnVar：", fnVar);
console.log("函数中，访问全局作用域中的变量，globalVar：", globalVar);
}
fn();
// console.log("函数外部，访问块级作用域中的变量，blockVar：", blockVar); // 报错：ReferenceError: blockVar is not defined
// console.log("函数外部，访问函数作用域中的变量，fnVar：", fnvar); // 报错：ReferenceError: fnvar is not defined
console.log("函数外部，访问全局作用域中的变量，globalVar：", globalVar);
</script>
5、总结
- 块级作用域中声明的变量，只能够在该块内被访问；
- 函数作用域中声明的变量，只能在函数内部，以及该函数内部的代码块中被访问；
- 全局作用域中声明的变量，能在任何地方被访问；
二、var、let、const
在JavaScript中，声明变量需要使用var、let和const关键字，这三者有和特点和区别？
1、var 关键字
（1）声明全局变量
使用 var 关键字在全局作用域中声明的变量，即为全局变量；
改变了被window对象持有；
可以在任何地方被访问；
var price = "10.00"
console.log("全局作用域，price值为：", price);
console.log("window对象的price，值为：", window.price);
function fn() {
console.log("函数作用域，price值为：", price);
{
console.log("块级作用域，price值为：", price);
}
}
fn();
（2）声明局部变量
使用 var 关键字在函数作用域中声明的变量，即为局部变量；
只能在函数内，包括函数内的代码块中被访问；
不能在函数作用域外被访问；
function fn() {
var price = "10.00"
console.log("函数作用域，price值为：", price);
{
console.log("块级作用域，price值为：", price);
}
}
fn();
console.log("全局作用域，price值为：", price); // 报错：ReferenceError: price is not defined
（3）存在变量提升
使用var关键字声明的变量，存在变量提升；
存在变量提升：在代码执行前，变量的声明已经被提升到了函数的顶部，但没有初始化；
console.log("使用var声明之前，price值为：", price);
var price = "10.00"
console.log("使用var声明之后，price值为：", price);
注意：
这里在使用var声明price之前，打印输出price并没有报错，而是输出了undefined；
这是因为使用var关键字声明的变量，存在变量提升；
执行下面的代码时：
...
console.log("使用var声明之前，price值为：", price);
var price = "10.00"
...相当于执行：
...
var price;
console.log("使用var声明之前，price值为：", price);
price = "10.00"
...（4）声明的变量，可以被重新赋值
使用var关键字声明的是变量，可以被重新赋值；
var price = "10.00"
console.log("使用var声明变量price，值为：", price);
price = "9.99"
console.log("修改后的price，值为：",price);
（5）声明的变量，可以被重新声明
使用var关键字重复声明同一个变量时，后续的声明会覆盖之前的；
var price = "10.00"
console.log("var声明变量price，值为：", price);
var price = "9.99"
console.log("var声明变量price，值为",price);
（6）一次可以声明多个变量
使用var关键字一次可以声明多个变量，中间用逗号隔开即可；
var price = "10.00", conut = 20;
console.log("var声明变量price，值为：", price);
console.log("var声明变量count，值为",conut);
2、let 关键字
（1）声明块级作用域变量
使用let关键字声明的变量只在let命令所在的代码块内部有效，即let所在的{ }内；
function fn() {
let count = 99;
console.log("count值为：", count);
{
let count = 88;
console.log("count值为：", count);
}
console.log("count值为：", count);
}
fn();
（2）不存在变量提升
使用let关键字声明的变量不存在变量提升，只能在声明之后被访问；
如果在声明之前访问变量，将会抛出一个引用错误；
// console.log("使用let声明之前，count值为：", count); // 报错：ReferenceError: Cannot access 'count' before initialization
let count = 99;
console.log("使用let声明之后，count值为：", count);
（3）声明的变量，可以被重新赋值
使用let关键字声明的变量，可以被重新赋值；
let count = 99;
console.log("使用let声明变量count，值为：", count);
count = 88
console.log("修改后的count，值为：", count);
（4）声明的变量，不能被重新声明
使用let关键字声明的变量，不能被重新声明；
let count = 99;
console.log("使用let声明变量count，值为：", count);
let count = 88 // 报错： SyntaxError: Identifier 'count' has already been declared 
（5）一次可以声明多个变量
使用let关键字一次可以声明多个变量，中间用逗号隔开即可；
let price = "10.00", conut = 99;
console.log("let声明变量price，值为：", price);
console.log("let声明变量count，值为",conut);
3、const 关键字
const关键字的特点与let相似，主要区别在于const关键字用来声明只读的变量，即常量，不能被重新赋值；
（1）声明块级作用域变量
使用const关键字声明的变量只在const命令所在的代码块内部有效，即const所在的{ }内；
function fn() {
const product = "苹果";
console.log("product值为：", product);
{
const product = "西瓜";
console.log("product值为：", product);
}
console.log("product值为：", product);
}
fn();
（2）不存在变量提升
使用const关键字声明的变量不存在变量提升，只能在声明之后被访问；
如果在声明之前访问变量，将会抛出一个引用错误；
// console.log("使用const声明之前，product值为：", product); // 报错：ReferenceError: Cannot access 'product' before initialization
const product = "苹果";
console.log("使用const声明之后，product值为：", product);
（3）声明的变量，不能被重新赋值
使用const关键字声明的变量，不能被重新赋值；
该变量是只读的，即常量；
const product = "苹果";
console.log("使用const声明变量product，值为：", product);
product = "西瓜"; // 报错：TypeError: Assignment to constant variable.
（4）声明的变量，不能被重新声明
使用const关键字声明的变量，不能被重新声明；
const product = "苹果";
console.log("使用const声明变量product，值为：", product);
const product = "西瓜"; // 报错：SyntaxError: Identifier 'product' has already been declared
（5）一次可以声明多个变量
使用const关键字一次可以声明多个变量，中间用逗号隔开即可；
const price = "9.99", count = 99, product = "苹果";
console.log("使用const声明变量price，值为：", price);
console.log("使用const声明变量count，值为：", count);
console.log("使用const声明变量product，值为：", product);
4、总结
（1）var、let、const 的不同点
| 序号 | 不同点 | 说明 |
|---|---|---|
| 1 | 变量作用域 | var用来声明全局变量和局部变量； let和const用来声明块级作用域中的变量； |
| 2 | 变量提升 | var声明的变量存在变量提升； let和const声明的变量不存在变量提升（只能在声明之后访问）； |
| 3 | 重新赋值 | var和let声明的变量可以被重新赋值； const声明的变量不能被重新赋值（只读，常量）； |
| 4 | 重新声明 | var声明的变量可以被重新声明； let和const声明的变量不能被重新声明； |
（2）var、let、const 的相同点
var、let、const 都用来声明变量；
var、let、const 都可以同时声明多个变量；
5、使用场景
var、let、const 三个关键字的使用取决于声明变量的场景；
- 声明常量（只读的变量），用const；
- 声明块级作用域中的变量，用let；
- 声明全局变量，用var；
- 优先级：const > let > var；
通常推荐使用 let 和 const，它们提供了更好的作用域管理，减少了由变量提升导致的错误；
======================================================================
每天进步一点点~~！
记录一下这个JavaScript中的这个基础内容！
