目录
一、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 definedconsole.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 definedconsole.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中的这个基础内容!