diff --git a/src/.vitepress/sidebar.yaml b/src/.vitepress/sidebar.yaml index 246dc21..15a5677 100644 --- a/src/.vitepress/sidebar.yaml +++ b/src/.vitepress/sidebar.yaml @@ -7,6 +7,8 @@ link: /javascript/introduction/core-implementation - text: JavaScript 调用栈 link: /javascript/introduction/call-stack + - text: JavaScript 作用域 + link: /javascript/introduction/scope - text: ECMAScript items: - text: ES 的版本 diff --git a/src/index.md b/src/index.md index bd04f58..708aaee 100644 --- a/src/index.md +++ b/src/index.md @@ -14,6 +14,7 @@ import MarkMap from './MarkMap.vue'; - [JavaScript 发展历程](javascript/introduction/history-of-javascript) - [JavaScript 核心实现](javascript/introduction/core-implementation) - [JavaScript 调用栈](javascript/introduction/call-stack) + - [JavaScript 作用域](javascript/introduction/scope) - ECMAScript - [ES 的版本](javascript/ecma-script/es-version) - [变量声明](javascript/ecma-script/variable-declaration) diff --git a/src/javascript/introduction/scope.md b/src/javascript/introduction/scope.md new file mode 100644 index 0000000..e7bcdda --- /dev/null +++ b/src/javascript/introduction/scope.md @@ -0,0 +1,69 @@ +# JavaScript 作用域 + +## 什么是作用域 + +作用域是指程序中变量和函数可被访问的区域。 + +JavaScript 中的作用域分为:全局作用域、函数作用域和块级作用域。 + +::: details 什么是词法作用域 + +词法作用域是指代码中变量和函数的作用域是在代码编写时就确定的,而不是在代码执行时确定的。 + +JavaScript 遵循词法作用域。 + +::: + +### 全局作用域 + +全局作用域是指在代码中任何地方都能访问的变量和函数。 + +```javascript +var a = 1; +function foo() { + console.log(a); +} +foo(); // 1 +``` + +### 函数作用域 + +函数作用域是指在函数内部定义的变量和函数只能在函数内部访问。 + +```javascript +function foo() { + var a = 1; + console.log(a); +} +foo(); // 1 +console.log(a); // ReferenceError: a is not defined +``` + +### 块级作用域 + +块级作用域是指在代码块内部定义的变量和函数只能在代码块内部访问。 + +```javascript +if (true) { + let a = 1; + console.log(a); +} +console.log(a); // ReferenceError: a is not defined +``` + +## 作用域链 + +作用域链是指在代码中查找变量和函数的过程。 + +```javascript +var a = 1; +function foo() { + var b = 2; + function bar() { + var c = 3; + console.log(a, b, c); + } + bar(); // 1 2 3 +} +foo(); +```