{ "schemaVersion": "0.11.0", "canonical": "https://www.pystone.net/notes/javascript-typescript-overview/", "atlas": "https://www.pystone.net/?node=javascript-typescript-overview#knowledge-atlas", "markdown": "https://www.pystone.net/notes/javascript-typescript-overview.md", "context": "https://www.pystone.net/notes/javascript-typescript-overview.context.json", "knowledgeVersion": "224c990773de.5fa8af6e39fa", "build": { "siteCommit": "224c990773de166d23a886306577dd90379529ce", "notesCommit": "5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a", "builtAt": "1970-01-01T00:00:00.000Z", "version": "224c990773de.5fa8af6e39fa" }, "id": "note:javascript-typescript-overview", "slug": "javascript-typescript-overview", "title": "JavaScript & TypeScript", "type": "note", "visibility": "public", "idStability": "rename-stable", "author": { "name": "Perrin Yong", "profile": "https://www.pystone.net/profile/" }, "publisher": { "name": "Perrin Yong", "profile": "https://www.pystone.net/profile/" }, "aliases": [], "summary": "JavaScript & TypeScript ECMAScript（简称 ES）是一部由 Ecma International 制定的脚本语言规范，文件编号 ECMA 262 。它定义了语言的语法、类型系统、内建对象、错误模型、并发抽象（Promise Jobs）等核心语义，用来保证不同实现之间可以运行同一段脚本代码。", "contentRole": "unspecified", "isMoc": false, "mocRecognition": "none", "generated": false, "attribution": "unspecified", "domain": "10-计算机、信息技术与工程", "tags": [], "mocs": [], "contentHash": "909bdccc70243e3d6e092e188fbd75b289bddb686a6eb993be692fd0940ba055", "assets": [], "headings": [ { "depth": 1, "text": "JavaScript & TypeScript", "anchor": "javascript-typescript", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#javascript-typescript" }, { "depth": 2, "text": "代码结构与模块系统", "anchor": "代码结构与模块系统", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#%E4%BB%A3%E7%A0%81%E7%BB%93%E6%9E%84%E4%B8%8E%E6%A8%A1%E5%9D%97%E7%B3%BB%E7%BB%9F" }, { "depth": 2, "text": "语法与差异", "anchor": "语法与差异", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#%E8%AF%AD%E6%B3%95%E4%B8%8E%E5%B7%AE%E5%BC%82" }, { "depth": 2, "text": "1. 代码结构与模块系统", "anchor": "1-代码结构与模块系统", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#1-%E4%BB%A3%E7%A0%81%E7%BB%93%E6%9E%84%E4%B8%8E%E6%A8%A1%E5%9D%97%E7%B3%BB%E7%BB%9F" }, { "depth": 3, "text": "1.1 文件后缀", "anchor": "11-文件后缀", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#11-%E6%96%87%E4%BB%B6%E5%90%8E%E7%BC%80" }, { "depth": 3, "text": "1.2 模块化语法", "anchor": "12-模块化语法", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#12-%E6%A8%A1%E5%9D%97%E5%8C%96%E8%AF%AD%E6%B3%95" }, { "depth": 3, "text": "1.3 tsconfig.json 要点", "anchor": "13-tsconfigjson-要点", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#13-tsconfigjson-%E8%A6%81%E7%82%B9" }, { "depth": 2, "text": "2. 基础语法", "anchor": "2-基础语法", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#2-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95" }, { "depth": 3, "text": "2.1 变量与作用域", "anchor": "21-变量与作用域", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#21-%E5%8F%98%E9%87%8F%E4%B8%8E%E4%BD%9C%E7%94%A8%E5%9F%9F" }, { "depth": 3, "text": "2.2 原始类型", "anchor": "22-原始类型", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#22-%E5%8E%9F%E5%A7%8B%E7%B1%BB%E5%9E%8B" }, { "depth": 3, "text": "2.3 运算符 / 流程控制", "anchor": "23-运算符-流程控制", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#23-%E8%BF%90%E7%AE%97%E7%AC%A6-%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6" }, { "depth": 2, "text": "3. 函数与高阶能力", "anchor": "3-函数与高阶能力", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#3-%E5%87%BD%E6%95%B0%E4%B8%8E%E9%AB%98%E9%98%B6%E8%83%BD%E5%8A%9B" }, { "depth": 2, "text": "4. 面向对象（类机制）", "anchor": "4-面向对象类机制", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#4-%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B1%BB%E6%9C%BA%E5%88%B6" }, { "depth": 3, "text": "4.1 类与实例字段", "anchor": "41-类与实例字段", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#41-%E7%B1%BB%E4%B8%8E%E5%AE%9E%E4%BE%8B%E5%AD%97%E6%AE%B5" }, { "depth": 3, "text": "4.2 高级特性（TS 增强）", "anchor": "42-高级特性ts-增强", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#42-%E9%AB%98%E7%BA%A7%E7%89%B9%E6%80%A7ts-%E5%A2%9E%E5%BC%BA" }, { "depth": 2, "text": "5. 类型系统（TS 专属精华）", "anchor": "5-类型系统ts-专属精华", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#5-%E7%B1%BB%E5%9E%8B%E7%B3%BB%E7%BB%9Fts-%E4%B8%93%E5%B1%9E%E7%B2%BE%E5%8D%8E" }, { "depth": 2, "text": "6. 异步编程", "anchor": "6-异步编程", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#6-%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B" }, { "depth": 2, "text": "10. 常用参考", "anchor": "10-常用参考", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#10-%E5%B8%B8%E7%94%A8%E5%8F%82%E8%80%83" }, { "depth": 2, "text": "其他特性", "anchor": "其他特性", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#%E5%85%B6%E4%BB%96%E7%89%B9%E6%80%A7" }, { "depth": 2, "text": "对象字面量", "anchor": "对象字面量", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#%E5%AF%B9%E8%B1%A1%E5%AD%97%E9%9D%A2%E9%87%8F" }, { "depth": 2, "text": "闭包", "anchor": "闭包", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#%E9%97%AD%E5%8C%85" }, { "depth": 3, "text": "示例", "anchor": "示例", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#%E7%A4%BA%E4%BE%8B" }, { "depth": 2, "text": "JS与TS面向对象差异与编译方法", "anchor": "js与ts面向对象差异与编译方法", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#js%E4%B8%8Ets%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E5%B7%AE%E5%BC%82%E4%B8%8E%E7%BC%96%E8%AF%91%E6%96%B9%E6%B3%95" }, { "depth": 2, "text": "class语法差异", "anchor": "class语法差异", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#class%E8%AF%AD%E6%B3%95%E5%B7%AE%E5%BC%82" }, { "depth": 3, "text": "1. JavaScript：原型链 + 语法糖", "anchor": "1-javascript原型链-语法糖", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#1-javascript%E5%8E%9F%E5%9E%8B%E9%93%BE-%E8%AF%AD%E6%B3%95%E7%B3%96" }, { "depth": 3, "text": "2. TypeScript：在同一套语法上贴“类型安全标签”", "anchor": "2-typescript在同一套语法上贴类型安全标签", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#2-typescript%E5%9C%A8%E5%90%8C%E4%B8%80%E5%A5%97%E8%AF%AD%E6%B3%95%E4%B8%8A%E8%B4%B4%E7%B1%BB%E5%9E%8B%E5%AE%89%E5%85%A8%E6%A0%87%E7%AD%BE" }, { "depth": 2, "text": "TS class 编译过程", "anchor": "ts-class-编译过程", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#ts-class-%E7%BC%96%E8%AF%91%E8%BF%87%E7%A8%8B" }, { "depth": 3, "text": "TypeScript 面向对象代码示例", "anchor": "typescript-面向对象代码示例", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#typescript-%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B" }, { "depth": 3, "text": "target: \"es2015\"（现代浏览器/Node 18+）", "anchor": "target-es2015现代浏览器node-18", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#target-es2015%E7%8E%B0%E4%BB%A3%E6%B5%8F%E8%A7%88%E5%99%A8node-18" }, { "depth": 3, "text": "target: \"es5\"（老浏览器/IE 仍在时的写法）", "anchor": "target-es5老浏览器ie-仍在时的写法", "citation": "https://www.pystone.net/notes/javascript-typescript-overview/#target-es5%E8%80%81%E6%B5%8F%E8%A7%88%E5%99%A8ie-%E4%BB%8D%E5%9C%A8%E6%97%B6%E7%9A%84%E5%86%99%E6%B3%95" } ], "claims": [], "outgoing": [], "incoming": [ { "id": "note:game-graphics-and-runtime", "title": "游戏图形与运行时", "url": "https://www.pystone.net/notes/game-graphics-and-runtime/", "atlas": "https://www.pystone.net/?node=game-graphics-and-runtime#knowledge-atlas", "label": "游戏图形与运行时", "origin": "explicit", "humanReviewed": true, "context": "WebGL中的“JavaScript & TypeScript”导航项", "citation": "https://www.pystone.net/notes/game-graphics-and-runtime/#webgl" } ], "contentMarkdown": "```text\n本文介绍了JaavScript与TypeScript的基础概念以及互相关系。介绍了两者的核心语法以及差异，并说明 TS 编译时删除类型、按环境保留或降级语法。\n```\n\n# JavaScript & TypeScript\n**ECMAScript（简称 ES）是一部由 _Ecma International_ 制定的脚本语言规范，文件编号 ECMA-262**。它定义了语言的语法、类型系统、内建对象、错误模型、并发抽象（Promise Jobs）等核心语义，用来保证不同实现之间可以运行同一段脚本代码。\n\n> - **1995 年** Brendan Eich 在 Netscape 浏览器中实现了早期的 _LiveScript/JavaScript_。\n> - 为了避免与 Sun 的“Java”商标纠纷，1996 年 Netscape 把这门语言送交标准机构 _ECMA_，双方同意用 **“ECMAScript” 作为标准名称**，浏览器实现继续对外叫 “JavaScript”。\n\nECMAScript 是 JavaScript 的规范。\n\n| 维度 | JavaScript | TypeScript |\n| ---- | ------------------------------ | ------------------------------------------------------------ |\n| 核心定位 | *ECMAScript* 标准的脚本语言，动态类型、解释执行 | *JavaScript 的静态类型超集*。在 JS 语法之上加入类型系统、装饰器、枚举、命名空间等，并在编译期做类型检查 |\n| 设计目标 | 浏览器脚本、通用运行时语言 | JS 的_静态类型超集_，为中大型项目提供类型安全 |\n| 运行方式 | 解释 / JIT 执行 | 必须先编译为 JS (`tsc`, `esbuild`, `vite`, `webpack`…) |\n| 更新节奏 | ECMAScript 年度规范 (ES2024…) | TS 每月/季度发版（当前 5.8, 2025-03） |\n| 生态依赖 | 浏览器、Node.js、Bun… | 与 JS 共用生态，编译后 100 % 兼容 |\n\n## 代码结构与模块系统\n|主题|JavaScript|TypeScript|\n|---|---|---|\n|文件扩展名|`.js`, `.mjs`, `.cjs`|`.ts`, `.tsx` (React JSX)|\n|顶级模块化|**ESM** `import/export`、**CommonJS** `require/module.exports`|完全同 JS；编译器可输出多种模块格式|\n|`tsconfig.json`|—|描述编译目标 (`target`)、模块格式 (`module`)、路径别名等|\n\n## 语法与差异\n\n## 1. 代码结构与模块系统\n\n### 1.1 文件后缀\n\n* JS：`*.js` / `*.mjs` / `*.cjs`\n* TS：`*.ts` / `*.tsx`（含 React JSX）\n\n### 1.2 模块化语法\n\n* **ES Modules** → `import/export`\n* **CommonJS** → `require/module.exports`\n* TS 与 JS 写法一致，但可通过 `tsconfig.json` 选择输出格式\n\n### 1.3 `tsconfig.json` 要点\n\n```jsonc\n{\n \"target\": \"es2022\", // 语法下限\n \"module\": \"esnext\", // 模块格式\n \"strict\": true, // 全面类型严格模式\n \"paths\": { \"@/*\": [\"src/*\"] }\n}\n```\n\n---\n\n## 2. 基础语法\n\n### 2.1 变量与作用域\n\n```js\n// JavaScript\nvar oldVar = 1; // 函数级作用域\nlet count = 42; // 块级作用域\nconst PI = 3.14; // 只读\n\n// TypeScript（加类型）\nlet count: number = 42;\n```\n\n### 2.2 原始类型\n\n* JS 运行时：`number`, `string`, `boolean`, `undefined`, `null`, `symbol`, `bigint`\n* TS 静态补充：`any`, `unknown`, `never`, `void`\n\n### 2.3 运算符 / 流程控制\n\n* 与 C 家族基本一致\n* TS 仅做 “**类型是否合理**” 检查，不改变写法\n\n---\n\n## 3. 函数与高阶能力\n\n```js\n// JS：无类型限制\nfunction add(a, b) {\n return a + b;\n}\n\n// TS：显式标注\nfunction add(a: number, b: number): number {\n return a + b;\n}\n\n// 默认 / 剩余参数\nfunction greet(name = 'world', ...extras) {}\n\n// 箭头函数固定 this\nconst inc = (x: number) => x + 1;\n\n// 泛型（TS 专属）\nfunction identity(value: T): T {\n return value;\n}\n```\n\n---\n\n## 4. 面向对象（类机制）\n\n### 4.1 类与实例字段\n\n```ts\nclass Animal {\n // ES2022 公有字段写法\n speed = 0;\n\n // ① 运行期真正私有\n #id: number;\n\n // ② 仅编译期私有（旧环境友好）\n private name: string;\n\n constructor(name: string, id: number) {\n this.name = name;\n this.#id = id;\n }\n\n move(distance: number = 0) {\n this.speed = distance;\n console.log(`${this.name} moved ${distance}m`);\n }\n}\n```\n\n### 4.2 高级特性（TS 增强）\n\n* 访问修饰符：`public` (默认) / `private` / `protected` / `readonly`\n* 抽象类 & 抽象方法：`abstract class Base { abstract foo(): void }`\n* 接口契约：`interface Shape { area(): number }`\n* 参数属性速写：`constructor(private id: number) {}`\n* 泛型类：`class Box { value: T }`\n\n---\n\n## 5. 类型系统（TS 专属精华）\n\n```ts\n// 联合 & 交叉\ntype ID = number | string;\ntype Position = { x: number } & { y: number };\n\n// 条件类型\ntype IsString = T extends string ? 'yes' : 'no';\n\n// 映射类型\ntype Readonly = { readonly [K in keyof T]: T[K] };\n\n// 模板字面量类型\ntype Hex = `#${string}`;\n```\n\n---\n\n## 6. 异步编程\n\n```ts\n// Promise\nfunction fetchData(): Promise { ... }\n\n// async / await\nasync function main() {\n const list = await fetchData();\n}\n\n// Axios 响应体泛型\naxios.get('/api/user');\n```\n\n\n---\n\n## 10. 常用参考\n\n* TypeScript Handbook [https://www.typescriptlang.org/docs/handbook/intro.html](https://www.typescriptlang.org/docs/handbook/intro.html)\n* ECMAScript 提案追踪 [https://tc39.es](https://tc39.es)\n* TS Playground 在线实验 [https://www.typescriptlang.org/play](https://www.typescriptlang.org/play)\n\n\n## 其他特性\n\n## 对象字面量\n用一对花括号 `{ … }` 当场写出 _键 → 值_ 的映射，马上得到一个对象实例，而 **不** 需要先声明类或构造函数。\n\n```javascript\nconst user = {\n id: 42, // 数值字段\n name: \"Perrin\", // 字符串字段\n isAdmin: true, // 布尔字段\n sayHi() { // 函数字面量（方法）\n console.log(`Hi, I’m ${this.name}`);\n }\n};\n```\n\n* 运行期可增删属性\n```js\nconst p = { x:1, y:2 };\np.z = 3; delete p.x;\n```\n\n* 字段值可为函数\n```js\ndo: () => {}\n```\n\n| 写法 | 例子 | 说明 |\n| ----------- | ---------------------------- | -------------------------- |\n| **基本键值对** | `{ a: 1, b: 2 }` | 冒号左边是键、右边是任何表达式 |\n| **简写属性** | `{ a, b }` | 当变量名与键名相同时写一次即可 |\n| **方法定义简写** | `{ calc(x) { return x*2 } }` | 等价于 `calc: function(x){…}` |\n| **计算得出的键名** | `{ [prefix + id]: val }` | 方括号里写表达式，求值后当键 |\n| **解构合并** | `{ ...base, extra: 1 }` | 扩展运算符 `...` 复制字段 |\n\n常见枚举方式\n```js\nfor (const k in obj) { ... } // 可遍历原型链 & 可枚举属性\nObject.keys(obj) // 自有可枚举键数组\nObject.getOwnPropertyNames(obj) // 包含不可枚举\n```\n\n**与 类 (class) 的关系**\n- `class` 语法本质是语法糖：编译后仍然生成 **函数 (constructor)** 与 **原型对象**。\n- 对象字面量适合“一次性数据包”或“配置表”；若需要多个实例共享方法、属性访问控制，则用 `class`。\n\n\n## 闭包\n1. **定义**\n 闭包是指**函数与其创建时的词法环境（Lexical Environment）共同组成的实体**。该环境记录了函数在定义位置能够访问的所有变量（包括参数、本地变量及外层作用域变量）。\n2. **词法环境与环境记录**\n * 每次执行上下文（函数调用、全局、Eval）会创建一个**环境记录**，存放该上下文的所有标识符绑定。\n * 闭包中的函数对象会持有对其所属环境记录的引用，即使外层函数已返回，环境记录也不会被 GC 回收。\n1. **多闭包共享变量**\n 同一词法作用域内定义的多个闭包，都会**引用同一个环境记录**，从而可读写同一份变量。修改该变量会影响所有引用它的闭包。\n\n2. **与 C 语言对比**\n\n * C 语言无内建闭包；要跨函数共享状态，需使用**全局/静态变量**或**显式传递指针/结构体**。\n * JavaScript 通过闭包实现**私有化**且**可多函数共享**的状态管理，无需暴露全局。\n\n### 示例\n\n```javascript\n// 外层函数，返回两个闭包\nfunction createPair() {\n let shared = 0; // 环境记录中的共享变量\n\n function inc() {\n shared += 1;\n console.log('inc ->', shared);\n }\n\n function dec() {\n shared -= 1;\n console.log('dec ->', shared);\n }\n\n return { inc, dec };\n}\n\nconst { inc, dec } = createPair();\n\ninc(); // inc -> 1\ninc(); // inc -> 2\ndec(); // dec -> 1\ndec(); // dec -> 0\n```\n\n* `shared` 变量存在于 `createPair` 的环境记录中。\n* `inc` 和 `dec` 两个闭包都捕获并共享同一份 `shared`。\n* 对 `shared` 的增减对另一个闭包可见，实现了多闭包之间的状态同步。\n\n## JS与TS面向对象差异与编译方法\n\n## class语法差异\n### 1. JavaScript：原型链 + 语法糖\n\n```js\nclass Animal {\n constructor(name) {\n this.name = name; // 实例字段\n }\n move(dist = 0) { // 原型方法（所有实例共享）\n console.log(`${this.name} moved ${dist}m`);\n }\n}\n\nclass Dog extends Animal {\n bark() {\n console.log('Woof!');\n }\n}\n```\n\n> **幕后**：`class` 只是把早年的 “构造函数 + prototype” 写法包装得更像 C#/Java。继承时 `Dog.prototype` 会把原型链指向 `Animal.prototype`，调用 `super()` 本质就是执行父构造函数。\n\n---\n\n### 2. TypeScript：在同一套语法上贴“类型安全标签”\n\n```ts\nabstract class Animal {\n #id: number; // 运行期私有\n protected speed = 0; // 编译期受保护\n\n constructor(private name: string, id: number) { // “参数属性”自动赋值 name\n this.#id = id;\n }\n\n abstract sound(): void; // 抽象方法\n\n move(distance: number = 0) {\n this.speed = distance;\n console.log(`${this.name} moved ${distance} m`);\n }\n}\n\nclass Dog extends Animal {\n sound() { console.log('Woof!'); }\n}\n```\n\n## TS class 编译过程\n\n### TypeScript 面向对象代码示例\n\n```ts\n// file: animal.ts —— TypeScript 源码\nexport default class Animal {\n #id: number; // ECMAScript 私有字段\n private name: string; // TS 私有修饰符（仅编译期检查）\n protected speed = 0; // 受保护成员\n\n constructor(id: number, name: string) {\n this.#id = id;\n this.name = name;\n }\n\n move(distance: number = 0) {\n this.speed = distance;\n console.log(`${this.name} moved ${distance} m`);\n }\n}\n```\n\n\n### `target: \"es2015\"`（**现代浏览器/Node 18+**）\n\n因为运行环境原生支持 `class` 与 `#private` 字段，**TypeScript 只删掉类型信息**，其余几乎原封不动：\n\n```js\n// animal.js —— ES2015 输出\nexport default class Animal {\n #id;\n name; // ← 仅保留属性，private 被擦除\n speed = 0;\n constructor(id, name) {\n this.#id = id;\n this.name = name;\n }\n move(distance = 0) {\n this.speed = distance;\n console.log(`${this.name} moved ${distance} m`);\n }\n}\n```\n\n* `private name` → `name`：**修饰符只存在于 .ts，运行时代码里消失**。\n* `#id` 保留：这是 ES 私有字段的语法，浏览器自己支持。\n\n### `target: \"es5\"`（**老浏览器/IE 仍在时的写法**）\n\n老环境不认识 `class`，编译器会降级为 **立即执行函数 + 原型** 模式：\n\n```js\n// animal.js —— ES5 输出\n\"use strict\";\nexports.__esModule = true;\nvar _id = new WeakMap(); // 用 WeakMap 模拟 #id 私有字段\nvar Animal = /** @class */ (function () {\n function Animal(id, name) {\n _id.set(this, id); // 维护私有值\n this.name = name; // private 修饰符依旧被擦除\n this.speed = 0;\n }\n Animal.prototype.move = function (distance) {\n if (distance === void 0) { distance = 0; }\n this.speed = distance;\n console.log(this.name + \" moved \" + distance + \" m\");\n };\n return Animal;\n}());\nexports[\"default\"] = Animal;\n```\n\n IIFE + 原型链：把 `class` 降级为构造函数\n\n> **IIFE** _Immediately-Invoked Function Expression_：写完就立刻调用自己，用来**制造一个私有作用域**，避免里面的变量泄漏到外面。`...`() 最后那对小括号就是“立刻执行”。\n\n\n(function () { ... }()): 这是一个 **自执行函数 (IIFE)**，返回值是一个构造函数Animal, 赋给变量 `Animal`。\n\n原型方法 `Animal.prototype.move = function (distance) { ... }`\n\n|元素|说明|\n|---|---|\n|`Animal.prototype`|**原型对象**：挂在这里的方法会被 **所有实例共享**，节省内存。|\n|`move`|方法名。|\n|`function (distance) { ... }`|普通匿名函数，实现真正的业务逻辑。|\n" }