feat: 变量提升与作用域

src/router/modules/demo.ts

@@ -198,6 +198,10 @@ const titleArr = [
         key: 'jsEventLoop',
         title: 'js事件循环',
     },
+    {
+        key: 'jsHoistingScope',
+        title: 'js中变量提升与作用域',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/jsHoistingScope/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <div
+        class="markdown-body"
+        v-html="htmlStr"
+    />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { marked } from 'marked';
+import { getMarkdownContent } from '@/utils/tools';
+
+const htmlStr = ref('');
+
+// getMarkdownContent 的参数路径相对于 public 目录，
+// move-md-plugin 会将 src 下的所有 .md 文件移动到 public/md/ 目录下
+getMarkdownContent('./md/jsHoistingScope.md').then((res) => {
+    htmlStr.value = marked(res);
+});
+</script>

src/views/demo/jsHoistingScope/jsHoistingScope.md

@@ -0,0 +1,83 @@
+# JS 变量提升与作用域 (Hoisting & Scope)
+
+## 知识点总结
+
+### 1. 变量提升 (Hoisting)
+JavaScript 代码在执行前会先进行编译。在编译阶段，变量和函数的声明会被移动到其所在作用域的顶部。
+
+*   **var 声明**: 变量会被提升，但赋值不会。初始值为 `undefined`。
+*   **let/const 声明**: 也会被提升，但在声明之前访问会触发“暂时性死区 (TDZ)”。
+*   **函数声明**: 整个函数体都会被提升（函数声明优先于变量声明）。
+
+### 2. 作用域 (Scope)
+作用域决定了代码中变量和其他资源的可见性。
+
+*   **全局作用域**: 脚本中任何地方都能访问。
+*   **函数作用域**: 变量仅在函数内部可见。
+*   **块级作用域**: `let` 和 `const` 引入。变量仅在 `{}` 块内可见。
+
+### 3. 作用域链 (Scope Chain)
+当在一个作用域中使用变量时，JavaScript 引擎会首先在当前作用域查找，如果没有找到，就向上一级作用域查找，直到找到或到达全局作用域。
+
+## 代码演示
+
+### 收集题目
+```javascript
+let outerValue = 'outer'; //let声明的变量不会挂在全局window上
+function outer() {
+    function inner() {
+        const arrowFunc = () => console.log(this.outerValue);
+        arrowFunc();
+    }
+    inner();
+}
+outer();
+
+// undefined
+```
+
+```javascript
+var outerValue = 'outer';
+function outer() {
+    function inner() {
+        const arrowFunc = () => console.log(this.outerValue);
+        arrowFunc();
+    }
+    inner();
+}
+outer();
+
+// outer
+```
+
+### 变量提升演示
+```javascript
+console.log(a); // undefined
+var a = 1;
+
+try {
+    console.log(b); // ReferenceError
+    let b = 2;
+} catch (e) {
+    console.log(e);
+}
+
+foo(); // "hello"
+function foo() {
+    console.log("hello");
+}
+```
+
+### 作用域链演示
+```javascript
+var x = 10;
+function outer() {
+    var y = 20;
+    function inner() {
+        var z = 30;
+        console.log(x + y + z); // 60
+    }
+    inner();
+}
+outer();
+```

src/views/tool/jsCoreNav.vue

@@ -114,7 +114,7 @@ const getThemeColor = (index: number, type: 'main' | 'border' | 'text') => {
 const navList = ref<NavItem[]>([
     {
         title: '变量提升与作用域',
-        path: '/js/scope-hoisting',
+        path: '/demo/jsHoistingScope',
         desc: '执行上下文、词法作用域与 var/let/const 的底层差异。',
     },
     {