JavaScript 概述

什么是 JavaScript？

　　JavaScript 是一种高级的、解释型的编程语言，主要用于网页开发，使网页具有交互性。

• 客户端脚本语言：主要在浏览器中执行。无需编译：代码以纯文本形式保存（​.js），运行时由解释器逐行解析执行，而不需要像 C++ 那样先编译成二进制文件。
• 多范式语言：支持面向对象、函数式编程风格
• 跨平台：几乎所有现代浏览器都支持 JavaScript

JavaScript 的发展历程

1. 诞生(1995 年) ：由 Netscape 公司的 Brendan Eich 在 10 天内设计完成，最初名为 LiveScript，最终定为 JavaScript。

2. 浏览器战争时代(1990 年代末-2000 年代初) ：微软的 JScript 与 Netscape 的 JavaScript 存在差异，导致兼容性问题。

3. 标准化(1997 年) ：ECMAScript 第一版标准发布(ECMA-262)，由 ECMA 国际组织标准化。

4. AJAX 革命(2005 年) ：Google Maps 和 Gmail 等应用展示了 JavaScript 的强大能力，推动了 Web 2.0 发展。

   1. Web 2.0 是用户通过平台生产内容和互动的“读 + 写”时代；用户创造内容（如发帖、发视频），但平台拥有数据、账号和分发规则，用户随时可能被删号、封禁或平台下架内容。
   2. Web 3.0 是基于区块链、由用户拥有数据和资产的“读 + 写 + 拥有”时代。用户通过区块链的私钥真正拥有自己的资产（如加密货币）和数据权限。比如你买的游戏道具，即使项目方倒闭，只要你私钥在手，资产就还在，且可以自由转移到其他平台。所以“拥有”的实质是产权的去中心化——从平台拥有，变回用户自己拥有。
   3. Web3 会与 Web2 长期共存【不会完全替代】，并在金融、数据主权等关键领域逐步重塑现有模式。
   4. Web3 在中国处于“部分合法、部分非法”的复杂监管状态，在中国，搞“发币、交易”违法，搞“技术、链改”合法。

5. jQuery 时代(2006 年) ：jQuery 库简化了 DOM 操作和跨浏览器兼容性问题。

6. ECMAScript 5(2009 年) ：引入了严格模式、JSON 支持等现代特性。

7. Node.js 出现(2009 年) ：使 JavaScript 可以用于服务器端编程。

8. ECMAScript 6/ES2015(2015 年) ：重大更新，引入类、模块、箭头函数、Promise 等现代特性。

9. 现代 JavaScript(2015 年至今) ：每年发布新标准(ES2016, ES2017 等)，前端框架如 React、Vue、Angular 等框架得到了蓬勃发展。

JavaScript 语言特点

1. 解释型语言：不需要编译，由 JavaScript 引擎直接解释执行

2. 动态类型/弱类型：变量类型在运行时确定，可以随时改变

3. 基于原型的面向对象：不是 传统的 基于类的 面向对象

4. 函数是一等公民：函数可以作为参数传递，也可以作为返回值

5. 跨平台：几乎所有现代浏览器和 Node.js 环境都支持

   [!NOTE] ✏️ Node.js 是啥？
   Node.js 环境是一个让 JavaScript 代码脱离浏览器、直接在服务器上运行的后台平台。

6. 灵活性：支持多种编程范式（面向对象、函数式）

7. 丰富的生态系统：npm 上有超过 100 万个开源包可供使用

   • npm 是 Node.js 的官方包管理器（Node Package Manager），类似于 Java 语言中的 Maven。
   • 在这个网站上 https://www.npmjs.com/，开发者可以搜索、下载和管理超过一百万种由全球开发者共享的可重用代码包（“开源包”），从而极大地提高开发效率，避免“重复造轮子”。

8. 客户端和服务器端：既可以在浏览器运行，也可以通过 Node.js 在服务器运行

JavaScrtip 的弱类型

　　如何理解 JavaScript 的 "弱类型"（Weak Typing）？

　　在编程语言中，"弱类型"（Weakly Typed）和 "强类型"（Strongly Typed）是描述 变量类型检查严格程度 的概念。JavaScript 是一种典型的弱类型语言，它的核心特点是：

变量没有固定的类型

　　弱类型语言：

let x = 10;    // x 是数字
x = "hello";   // x 变成字符串（没有报错）
x = true;      // x 又变成布尔值

　　强类型语言（如 Java、C++） 会直接报错：

int x = 10;   // x 必须是整数
x = "hello";  // 编译错误：类型不匹配

允许隐式类型转换

　　JavaScript 在运算时会尝试自动转换类型，而不是直接报错：

console.log("10" - 5);      // 5（字符串 "10" 被转成数字）
console.log(1 == true);     // true（true 被转成 1）
console.log([] == false);   // true（[] 被转成 0，false 也被转成 0）

　　强类型语言 会直接拒绝这种运算（除非显式转换）。

宽松的类型检查

　　会进行类型转换后再比较：

console.log(1 == "1");    // true（字符串 "1" 转成数字 1）

弱类型的优缺点

　　优点

1. 灵活性高：变量可以随时改变类型，适合快速开发。
2. 代码更简洁：不需要显式声明类型（如 ​int x = 10;）。
3. 适合小型脚本：简单任务可以快速实现，无需考虑类型约束。

　　缺点

1. 容易隐藏 Bug：

function add(a, b) {
  return a + b;  // 如果 a 或 b 是字符串，可能变成拼接而不是加法！
}
console.log(add(10, 5));    // 15
console.log(add(10, "5"));  // "105"（可能不是预期结果）

2. 代码可读性降低：别人可能不知道变量的类型是什么。
3. 难以维护：大型项目可能因类型混乱导致难以调试。

如何避免弱类型的问题

1. 使用​===​代替​==，避免隐式类型转换带来的意外：

if (x === 10) { ... }  // 推荐
if (x == 10) { ... }   // 不推荐

2. 使用 TypeScript（JavaScript 的超集，增加了静态类型检查）：

let x: number = 10;  // 明确声明 x 必须是数字
x = "hello";         // TypeScript 会报错

3. 编写类型检查逻辑：

function add(a, b) {
  if (typeof a !== "number" || typeof b !== "number") {
    throw new Error("参数必须是数字！");
  }
  return a + b;
}

弱类型总结

• 弱类型：变量类型灵活，可以动态改变，允许隐式转换（如 JavaScript、PHP）。
• 强类型：变量类型固定，运算前必须类型匹配（如 Java、C#、Python）。

　　JavaScript 的弱类型让它 灵活但容易出错，而 TypeScript 的出现正是为了弥补这个缺陷，提供更强的类型安全。

JavaScript 的三大组成部分

　　JavaScript = ECMAScript(核心) + DOM(文档操作) + BOM(浏览器交互)

ECMAScript (核心语法)

• 定义语言基础：变量、数据类型、操作符、流程控制、函数、面向对象等
• 标准化版本：由 ECMA 国际组织制定标准(如 ES5、ES6/ES2015 等)
• 跨平台基础：所有 JavaScript 引擎实现的基础规范

DOM (文档对象模型)

• 网页操作接口：Document Object Model，提供访问和操作 HTML 文档的 API

• 树形结构：将文档表示为节点树，可动态修改内容、结构和样式

• 主要功能：

  • 查询和修改元素
  • 添加/删除节点
  • 处理事件
  • 修改 CSS 样式

• DOM 的顶级对象叫做：document，内置的，可以直接使用。

BOM (浏览器对象模型)

• 浏览器交互接口：Browser Object Model，提供与浏览器窗口交互的 API

• 非标准化：各浏览器实现有差异，但主要对象基本一致

• 核心对象：

  • window：浏览器窗口的顶级对象
  • navigator：浏览器信息
  • location：URL 相关操作
  • history：浏览历史
  • screen：屏幕信息
  • document：实际上是 DOM 的入口