From 29cf0b8962bf932da0db416d41bd77dd6d704af6 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Fri, 6 Feb 2026 10:52:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=98=E9=87=8F=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E4=B8=8E=E4=BD=9C=E7=94=A8=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/demo.ts                    |  4 +
 src/views/demo/jsHoistingScope/index.vue      | 20 +++++
 .../demo/jsHoistingScope/jsHoistingScope.md   | 83 +++++++++++++++++++
 src/views/tool/jsCoreNav.vue                  |  2 +-
 4 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 src/views/demo/jsHoistingScope/index.vue
 create mode 100644 src/views/demo/jsHoistingScope/jsHoistingScope.md

diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index 0c7b1d3..eefa6e4 100644
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@@ -198,6 +198,10 @@ const titleArr = [
         key: 'jsEventLoop',
         title: 'js事件循环',
     },
+    {
+        key: 'jsHoistingScope',
+        title: 'js中变量提升与作用域',
+    },
 ];
 
 // @/views/demo/**/*.vue
diff --git a/src/views/demo/jsHoistingScope/index.vue b/src/views/demo/jsHoistingScope/index.vue
new file mode 100644
index 0000000..c032420
--- /dev/null
+++ b/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>
diff --git a/src/views/demo/jsHoistingScope/jsHoistingScope.md b/src/views/demo/jsHoistingScope/jsHoistingScope.md
new file mode 100644
index 0000000..e97b2db
--- /dev/null
+++ b/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();
+```
diff --git a/src/views/tool/jsCoreNav.vue b/src/views/tool/jsCoreNav.vue
index f91de29..cac7054 100644
--- a/src/views/tool/jsCoreNav.vue
+++ b/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 的底层差异。',
     },
     {