当前位置：首页 > news >正文

JavaScript 作用域与 var、let、const关键字

news 来源：原创 2024/9/20 11:47:52

一、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声明的变量不能被重新声明；