JavaScript全局变量
JavaScript中全局变量存在多种情况和定义方式，下面详细解释并提供相应的举例：
-
使用var关键字声明的全局变量：
var globalVar = "我是全局变量"; -
未使用var关键字声明的变量会成为全局变量（不推荐使用）：
anotherGlobalVar = "我也是全局变量"; -
在全局作用域中声明的函数也是全局变量：
function globalFunction() { console.log("我是全局函数"); } -
全局对象（window）上直接定义的属性也会成为全局变量：
window.globalProperty = "我是全局对象的属性"; -
ES6之前没有块级作用域概念，因此在if语句、for循环等代码块中声明的变量，如果没有使用var，也会成为全局变量：
if (true) { blockScopedVar = "我在if块中声明，但成为了全局变量"; }
需要注意全局变量可能带来的问题，如命名冲突和不可预测的值改变。因此，在编程中应当尽量避免滥用全局变量，可以使用IIFE（立即调用函数表达式）或者ES6的模块化语法，来封装变量，减少全局污染的风险。
JavaScript局部变量
JavaScript中的局部变量是指在函数内部或代码块内部声明的变量，只能在其所属的函数或代码块内部访问。以下是 JavaScript 中局部变量的各种情况详解和举例：
- 使用关键字
var、let或const在函数内部声明的变量为局部变量：
function localVariableExample() {
var localVar = "我是局部变量";
let anotherLocalVar = "我也是局部变量";
const constVar = "我是一个常量局部变量";
// 在这个函数内可以访问 localVar、anotherLocalVar 和 constVar
}
- 使用
function关键字声明的函数内部的参数也是局部变量：
function myFunction(param) {
// 这里的 param 是局部变量
}
- ES6 的箭头函数的参数也是局部变量：
const myArrowFunction = (param) => {
// 这里的 param 是局部变量
};
- 在代码块内（ES6引入了块级作用域）使用
let或const关键字声明的变量也是局部变量：
if (true) {
let blockScopedVar = "我是块级作用域的局部变量";
const anotherBlockScopedVar = "我也是块级作用域的局部变量";
// 只能在 if 代码块内访问 blockScopedVar 和 anotherBlockScopedVar
}
局部变量只在其所属的函数或代码块内部可见，出了这个范围就无法访问。这种限制有助于避免命名冲突和提高代码的可维护性。
JavaScript块级作用域
JavaScript在ES6中引入了块级作用域，允许使用let和const声明变量，这些变量的作用域仅限于包含它们的代码块内部。
下面是关于块级作用域的详细说明和举例：
- 使用
let声明的变量：
{
let x = 2;
console.log(x); // 输出 2
}
console.log(x); // 报错，因为x在块级作用域外部不可见
- 使用
const声明的常量也具有块级作用域：
{
const PI = 3.14;
console.log(PI); // 输出 3.14
}
console.log(PI); // 报错，因为PI在块级作用域外部不可见
- for循环中的块级作用域：
for (let i = 0; i < 3; i++) {
console.log(i); // 输出 0, 1, 2
}
console.log(i); // 报错，因为i在for循环中具有块级作用域，超出循环后不可见
块级作用域可在代码中更好地控制变量的作用范围，避免变量提升和命名冲突等问题。这种特性在编写复杂的JavaScript程序时尤其有用。
JavaScript重新定义变量
在JavaScript中，使用let关键字可以重新定义变量，而使用var关键字则不能。重新定义变量指的是在同一作用域内多次声明同一个变量名，后面的声明将覆盖前面的声明。
下面分别以let和var来说明重新定义变量的情况：
- 使用
let重新定义变量：
let x = 10;
console.log(x); // 输出 10
let x = 20; // 可以重新定义x，不会报错
console.log(x); // 输出 20
在使用let声明变量时，可以在同一作用域内多次声明同一个变量名，后面的声明会覆盖前面的声明。
- 使用
var重新定义变量：
var y = 30;
console.log(y); // 输出 30
var y = 40; // 重新定义y，不会报错
console.log(y); // 输出 40
在使用var声明变量时，由于var存在变量提升的特性，重新定义变量也是有效的，后面的声明会覆盖前面的声明。
总结来说，使用let和var都可以进行变量的重新定义，但建议在ES6及以后的代码中使用let或const来声明变量，以避免变量提升等问题，并更好地控制作用域。
JavaScript循环作用域
在 JavaScript 中，循环并不会创建新的作用域，这意味着在使用 var 声明变量时，循环体内部声明的变量会被提升到循环外部的作用域中。这可能导致意外的行为，特别是在使用异步操作时。
举例来说：
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 100);
}
在上面的例子中，当 setTimeout 回调执行时，它会打印出 3，而不是预期的 0、1 和 2。这是因为 i 变量在循环内部被提升到了循环外部的作用域，以至于所有的 setTimeout 共享同一个 i 变量，并且在循环结束后才被赋值为 3。
为了避免这个问题，可以使用 let 或 const 声明变量，因为它们会在每次迭代中创建一个新的变量实例，从而解决了作用域共享的问题。
for (let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 100);
}
在这个例子中，每个 setTimeout 回调都会引用一个独立的 i 变量，因此会按照预期打印出 0、1 和 2。
HTML 代码中使用全局变量
在 HTML 中定义全局变量的方式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用全局变量</title>
</head>
<body>
<script>
// 在 script 标签内部定义全局变量
var globalVar = "Hello World!";
function sayHello() {
alert(globalVar);
}
</script>
<button onclick="sayHello()">Click me</button>
</body>
</html>
在上面的例子中，通过在 <script> 标签内部定义一个全局变量 globalVar 和一个函数 sayHello。当按钮被点击时，会调用 sayHello 函数来弹出全局变量 globalVar 的值。
在实际情况中，很少有必要在 HTML 中定义全局变量。通常，全局变量应该在 JavaScript 文件中定义，而不是嵌入到 HTML 中。可以使用 <script src="path/to/file.js"></script> 语法从 HTML 文件中链接到 JavaScript 文件，并在 JavaScript 文件中定义全局变量。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用全局变量</title>
</head>
<body>
<script src="global.js"></script>
<button onclick="sayHello()">Click me</button>
</body>
</html>
在 global.js 文件中定义全局变量和函数：
var globalVar = "Hello World!";
function sayHello() {
alert(globalVar);
}
这样做的好处是，将 JavaScript 代码与 HTML 文件分离开来，使代码更易于管理和维护。
const 关键字
const 是 JavaScript 中用来声明常量的关键字。使用 const 声明的变量必须进行初始化，并且一旦被赋值后就不能再被修改。这意味着 const 声明的变量是不可变的。例如：
const PI = 3.14159;
在这个例子中，PI 被赋值为 3.14159，并且不能再被改变。
与 var 和 let 不同，const 声明的作用域为块级作用域，而不是函数作用域。也就是说，在使用 const 声明的变量只在其声明所在的块内部有效。
另外需要注意的是，虽然 const 声明的变量不可修改，但如果 const 声明的变量是一个对象，那么对象的属性是可以修改的。例如：
const person = {
name: 'Alice',
age: 30
};
// 对象的属性可以修改，但是不能重新赋值给person
person.age = 31;
总结一下，const 关键字用于声明不可变的常量，常用于声明不会被修改的值，以及避免意外的变量重复赋值。
const并非真正的常量
在 JavaScript 中，使用 const 关键字声明的变量被称为常量，因为它们在初始化后不可被重新赋值。这意味着一旦使用 const 声明变量并赋予初值后，就不能再对其进行重新赋值。
例如：
const PI = 3.14159;
PI = 3.14; // 这行代码会导致错误，因为常量PI不能被重新赋值
虽然 const 声明的变量本身是不可变的，但若该变量是一个对象，那么对象的属性是可以修改的。这意味着虽然不能给该变量赋予新的值，但仍然可以修改其属性。
例如：
const person = {
name: 'Alice',
age: 30
};
person.age = 31; // 这里修改了对象属性，不会导致错误
因此，虽然 const 声明的变量并非完全不可变，但通过 const 声明的变量确实可以在保证不被重复赋值的情况下，允许对对象属性进行修改。
关注我，不迷路，共学习，同进步
关注我，不迷路，共学习，同进步
