冠军资讯
CoderPunk今天我们来聊聊前端JS基础的Day4，这个阶段的学习往往会遇到一些让人困惑的点，比如变量提升、作用域和作用域链。理解这些概念对于编写高质量的 JavaScript 代码至关重要。很多同学在使用 Node.js 开发后端服务时，也经常会因为对这些基础概念的理解不够深入而踩坑。
变量提升：一场关于声明与赋值的“骗局”
变量提升（Hoisting）是 JavaScript 中一个重要的特性。很多新手会误以为 JavaScript 会把变量和函数的声明“提升”到代码的顶部执行。但实际上，变量提升只是声明被提升，赋值操作仍然留在原地。考虑以下代码：
console.log(a); // 输出：undefined
var a = 10;
console.log(a); // 输出：10
在这个例子中，虽然 var a = 10 出现在 console.log(a) 之后，但第一个 console.log(a) 并不会报错，而是输出 undefined。这是因为变量 a 的声明被提升到了代码的顶部，但赋值操作 a = 10 仍然留在原地。
如果使用 let 或 const 声明变量，则不存在变量提升。如果在声明之前访问这些变量，会抛出 ReferenceError 错误，这种行为被称为“暂时性死区”（Temporal Dead Zone，TDZ）。
console.log(b); // 抛出 ReferenceError: Cannot access 'b' before initialization
let b = 20;
避坑经验： 强烈建议使用 let 和 const 声明变量，避免变量提升带来的困扰。在编写代码时，应该先声明变量，再使用变量。
作用域：变量的“势力范围”
作用域决定了变量的可访问性。JavaScript 中有两种主要的作用域类型：
- 全局作用域： 在任何地方都可以访问的变量，通常在函数外部声明。
- 函数作用域（ES5 及之前）： 只能在函数内部访问的变量，在函数内部声明。
- 块级作用域（ES6）： 只能在块级语句（例如
if、for、while）内部访问的变量，使用let和const声明。
var globalVar = 100; // 全局作用域
function myFunction() {
var localVar = 200; // 函数作用域
if (true) {
let blockVar = 300; // 块级作用域
console.log(blockVar); // 输出：300
}
console.log(localVar); // 输出：200
console.log(globalVar); // 输出：100
//console.log(blockVar); // 抛出 ReferenceError：blockVar is not defined
}
myFunction();
console.log(globalVar); // 输出：100
//console.log(localVar); // 抛出 ReferenceError：localVar is not defined
避坑经验： 尽量减少全局变量的使用，避免命名冲突。使用 let 和 const 声明变量，可以更好地控制变量的作用域，提高代码的可维护性。尤其在使用 Nginx 反向代理配合 Node.js 做负载均衡时，全局变量污染可能会导致服务出现意想不到的问题。
作用域链：沿着“链条”查找变量
当在 JavaScript 中访问一个变量时，JavaScript 引擎会首先在当前作用域中查找该变量。如果找不到，它会沿着作用域链向上查找，直到找到该变量或者到达全局作用域。这种查找变量的机制被称为作用域链。
var outerVar = 10;
function outerFunction() {
var innerVar = 20;
function innerFunction() {
console.log(outerVar + innerVar); // 输出：30
}
innerFunction();
}
outerFunction();
在这个例子中，innerFunction 可以访问 outerVar 和 innerVar，因为它沿着作用域链找到了这两个变量。
避坑经验： 理解作用域链对于理解闭包非常重要。闭包是指函数与其周围状态（词法环境）的捆绑。换句话说，闭包允许函数访问在其词法作用域之外的变量。例如，在使用 Express.js 框架开发 API 接口时，经常会用到闭包来封装一些逻辑。
总结
前端JS基础-day4 的重点在于理解变量提升、作用域和作用域链。这些概念是 JavaScript 的基础，掌握这些概念对于编写健壮、可维护的代码至关重要。尤其是在使用 Vue、React 等框架进行前端开发时，或者使用 Node.js 开发后端服务时，对这些概念的理解程度直接影响代码的质量。
希望今天的分享能帮助你更好地理解 JavaScript 的基础知识。如果你在学习过程中遇到任何问题，欢迎在评论区留言交流。
