JavaScript-变量作用域
在 JavaScript 中定义变量有两种方式
ES6 之前: var 变量名称;
ES6 开始: let 变量名称;
两种定义变量方式的区别
如果通过 var 定义变量, 可以重复定义同名的变量, 并且不会报错, 并且后定义的会覆盖先定义的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
var num = 123;
var num = 456;
console.log(num);
</script>
</head>
<body>
</body>
</html>
如果通过 var 定义变量, 可以先使用后定义 (预解析)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
console.log(num);
var num = 123;
// 如上代码等价于下面代码
// var num;
// console.log(num);
// num = 123;
</script>
</head>
<body>
</body>
</html>
如果通过 let 定义变量, 不可以重复定义同名的变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
let num = 123;
let num = 456;
console.log(num);
</script>
</head>
<body>
</body>
</html>
如果通过 let 定义变量, 不可以先使用再定义, 因为浏览器不会对 let 定义的变量进行 预解析。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
console.log(num);
let num = 123;
</script>
</head>
<body>
</body>
</html>
无论是通过 var 还是通过 let 定义的全局变量, 都是从定义的那一行到文件末尾都可以使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 全局变量
var numOne = 123;
let numTwo = 123;
</script>
</head>
<body>
</body>
</html>
<script>
console.log(numOne);
console.log(numTwo);
</script>
如果是通过 var 定义的 局部变量, 和全局变量一样, 后续都可以被使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 局部变量
{
var num = 666;
console.log(num);
}
console.log(num);
if (true) {
console.log(num);
}
</script>
</head>
<body>
</body>
</html>
如果是通过 let 定义的 局部变量, 那么这个变量只能在当前定义变量的 {} 中使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type="text/javascript">
// 局部变量
{
let num = 666;
console.log(num);
}
console.log(num);
if (true) {
console.log(num);
}
</script>
</head>
<body>
</body>
</html>
