跳转到内容

一、 基础概念 (Basic Concepts)
- JavaScript (JS) 一种高级、多范式、动态的编程语言,是 Web 开发的核心技术之一,主要用于为网页添加交互性。
- ECMAScript (ES) 由 Ecma International 制定的脚本语言标准化规范。JavaScript 是 ECMAScript 规范最著名的实现。我们常说的 ES6, ES2020 等指的是 ECMAScript 的不同版本。
- 运行时环境 (Runtime Environment) 执行 JavaScript 代码的环境。主要有两种:
- 浏览器 (Browser):提供了
window
, document
(DOM, BOM) 等 API。
- Node.js:一个服务端的 JavaScript 运行时,提供了文件系统 (
fs
)、网络 (http
) 等 API。
- JavaScript 引擎 (Engine) 执行 JavaScript 代码的程序或解释器。著名的引擎包括 Google 的 V8 (用于 Chrome 和 Node.js) 和 Mozilla 的 SpiderMonkey (用于 Firefox)。
- 语句 (Statement) 执行某个操作的指令。通常以分号结尾。
let name = "Alice"; // 这是一个赋值语句
- 表达式 (Expression) 任何可以产生一个值的代码单元。
5 + 10 // 结果为 15 name === "Alice" // 结果为 true
- 语法糖 (Syntactic Sugar) 在语言中添加的某种语法,它对语言的功能没有影响,但更方便程序员使用。例如,
class
语法就是原型继承的语法糖。
二、 数据类型 (Data Types)
- 原始类型 (Primitive Types) 数据类型中最底层、不可变的数据。共七种:
- String: 文本字符串。
- Number: 数字,包括整数和浮点数。
- Boolean:
true
或 false
。
- null: 表示“空值”或“无对象”的刻意赋值。
- undefined: 表示变量已声明但未赋值。
- Symbol (ES6): 表示唯一的、不可变的值,常用于对象属性名。
- BigInt (ES2020): 表示任意精度的整数。
- 对象类型 (Object Type) 属性的集合,是可变的数据结构。包括普通对象、数组、函数等。
- 类型转换 (Type Coercion) 当运算符的操作数类型不匹配时,JavaScript 自动进行的隐式类型转换。
console.log('5' - 3); // 输出 2
- typeof 一个一元运算符,用于返回操作数的数据类型字符串。
typeof 42; // "number" typeof "hello"; // "string" typeof null; // "object" (这是一个历史遗留问题)
三、 变量与作用域 (Variables & Scope)
- var, let, const 用于声明变量的关键字。
var
: 函数作用域,存在变量提升。
let
: 块级作用域,不存在变量提升,允许重新赋值。
const
: 块级作用域,不存在变量提升,声明时必须赋值,且不能重新赋值(对于原始类型是值,对于对象类型是引用)。
- 作用域 (Scope) 定义了变量和函数的可访问范围。
- 全局作用域 (Global Scope): 在代码任何地方都可访问。
- 函数作用域 (Function Scope): 变量仅在函数内部可访问。
- 块级作用域 (Block Scope) (ES6): 变量仅在代码块 (
{...}
) 内部可访问。
- 词法作用域 (Lexical Scope) 变量的作用域由其在代码中声明的位置决定,而不是由其调用位置决定。
- 变量提升 (Hoisting) 使用
var
声明的变量,其声明部分会被“提升”到其所在作用域的顶部,但赋值部分保留在原地。函数声明也会被整体提升。
- 暂时性死区 (Temporal Dead Zone – TDZ) 使用
let
和 const
声明的变量,从其作用域开始到声明语句之前,访问该变量会抛出 ReferenceError
。这片区域被称为暂时性死区。
四、 函数 (Functions)
- 函数声明 (Function Declaration)
function greet(name) { return `Hello, ${name}!`; }
- 函数表达式 (Function Expression)
const greet = function(name) { return `Hello, ${name}!`; };
- 箭头函数 (Arrow Function) (ES6) 一种更简洁的函数语法,它没有自己的
this
,会捕获其定义时所在上下文的 this
。const add = (a, b) => a + b;
this
一个特殊的关键字,其值在函数被调用时确定,取决于函数的调用方式(如默认绑定、隐式绑定、显式绑定、new 绑定)。
- 闭包 (Closure) 当一个函数能够“记住”并访问其定义时的词法环境,即使该函数在其原始环境之外被执行,闭包就产生了。
- 高阶函数 (Higher-Order Function) 一个函数如果接受另一个函数作为参数,或者返回一个函数,那么它就是高阶函数。例如
Array.prototype.map
。
- 回调函数 (Callback Function) 一个作为参数传递给另一个函数的函数,并在那个外部函数执行完某个操作后被“回调”执行。
五、 对象与原型 (Objects & Prototypes)
- 对象字面量 (Object Literal) 创建对象的一种简洁语法。
const person = { name: "Alice", age: 30 };
- 构造函数 (Constructor Function) 一个用于初始化新创建的对象的特殊函数,通常使用
new
关键字调用。
- 原型 (Prototype) JavaScript 对象继承属性和方法的机制。每个构造函数都有一个
prototype
属性,它是一个对象,其属性和方法会被由该构造函数创建的所有实例共享。
- 原型链 (Prototype Chain) 每个对象都有一个指向其原型的内部链接。当访问一个对象的属性时,如果在该对象上找不到,引擎会沿着原型链向上查找,直到找到该属性或到达链的末端 (
null
)。
class
(ES6) 用于创建对象的语法糖,其底层仍然是基于原型的继承。
六、 异步编程 (Asynchronous Programming)
- 同步 (Synchronous) 代码按顺序逐行执行,后一个任务必须等待前一个任务完成。
- 异步 (Asynchronous) 代码执行不会阻塞后续任务,通常用于处理耗时操作(如网络请求)。当操作完成时,通过回调函数、Promise 或其他机制来处理结果。
- 事件循环 (Event Loop) JavaScript 运行时的一种机制,用于协调事件、用户交互、脚本执行、UI 渲染和网络请求等。它负责监视调用栈和任务队列,在调用栈为空时将任务队列中的任务移入栈中执行。
- Promise (ES6) 一个表示异步操作最终完成或失败的对象。它有三种状态:
pending
(进行中)、fulfilled
(已成功)、rejected
(已失败)。
- async/await (ES2017) 基于 Promise 的语法糖,允许以更接近同步代码的方式编写异步逻辑,极大地提高了可读性。
async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Fetch failed:', error); } }
七、 DOM & BOM (浏览器环境)
- DOM (Document Object Model – 文档对象模型) 一个跨平台和语言无关的接口,它将 HTML 或 XML 文档表示为一个由节点和对象组成的树状结构。JavaScript 通过 DOM API 来操作网页内容。
- BOM (Browser Object Model – 浏览器对象模型) 一个由浏览器提供的、用于与浏览器窗口交互的对象模型,它没有统一标准。核心对象是
window
,它也是浏览器环境中的全局对象。
- 事件 (Event) 用户在网页上的操作(如点击、滚动)或浏览器自身行为(如页面加载完成)。
- 事件监听器 (Event Listener) 一个函数,用于等待特定事件发生,并在事件发生时执行。使用
element.addEventListener()
添加。
八、 现代特性与工具 (Modern Features & Tooling)
- JSON (JavaScript Object Notation) 一种轻量级的数据交换格式,其语法是 JavaScript 对象字面量语法的子集。
- Fetch API 一个现代的、基于 Promise 的网络请求 API,用于替代传统的
XMLHttpRequest
。
- 解构赋值 (Destructuring Assignment) (ES6) 一种允许从数组或对象中提取值并赋给变量的简洁语法。
const { name, age } = person; const [first, second] = [1, 2];
- 展开语法 (Spread Syntax) & 剩余参数 (Rest Parameters) (ES6) 使用三个点 (
...
) 的语法。
- 展开语法: 将可迭代对象(如数组)或对象展开。
- 剩余参数: 将一个不定数量的函数参数表示为一个数组。
- 模板字符串 (Template Literals) (ES6) 使用反引号 (
`
) 包裹的字符串,支持嵌入表达式 (${expression}
) 和多行文本。
- TypeScript JavaScript 的一个超集,为其添加了静态类型系统,增强了代码的可维护性和健壮性,最终会编译成纯 JavaScript。
- 包管理器 (Package Manager) 用于自动化安装、更新和管理项目依赖库的工具。常用工具有
npm
和 yarn
。
- 构建工具 (Build Tool) 用于将开发代码(如 ES6+、TypeScript、SASS)转换成浏览器兼容的 JavaScript 和 CSS,并进行打包、压缩等优化。常用工具有
Webpack
和 Vite
。