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

25 JavaScript学习：var let const

news 2025/12/3 12:03:18

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 声明的变量确实可以在保证不被重复赋值的情况下，允许对对象属性进行修改。

关注我，不迷路，共学习，同进步

在这里插入图片描述

JavaScript全局变量

JavaScript局部变量

JavaScript块级作用域

JavaScript重新定义变量

JavaScript循环作用域

HTML 代码中使用全局变量

const 关键字

const并非真正的常量

关注我，不迷路，共学习，同进步

相关文章：