什么是Javascript？基于ECMAScript 5.1

JavaScript 结构

核心特性

• 轻量级脚本语言：不用于开发操作系统，用于编写控制其他大型应用程序（浏览器、服务器等）的脚本。
• 嵌入式语言：核心语法精简，专注于数学和逻辑运算，依赖宿主环境提供的I/O API。
• 对象模型语言：支持多种编程范式（对象模型、函数式编程），语法灵活性高。

语法构成

• 基本语法构造：操作符、控制结构、语句等。
• 标准库：包含一系列具有各种功能的对象，例如Array、Date、Math等。

宿主环境API

浏览器环境

• 浏览器控制类API：与浏览器操作相关的API。
• DOM类API：与网页元素操作相关的API。
• Web类API：实现互联网功能的API。

服务器环境（Node项目）

• 文件操作API：在服务器端进行文件读写的API。
• 网络通信API：用于网络交互的API。

为什么学习 JavaScript？

JavaScript 是一门极具价值的编程语言，既适合作为编程入门语言，也广泛用于日常开发工作，被公认为当前最有前景的计算机语言之一。

🖥️ 操控浏览器的能力

• JavaScript 最初设计为浏览器内置脚本语言，是目前唯一通用的浏览器脚本语言，所有现代浏览器都原生支持。
• 它能实现网页动态效果、提升用户交互体验，是构建操作便利、用户友好网站的核心技术。
• 几乎全球所有网页都依赖 JavaScript；缺少它，网站的易用性和效率将大幅下降。
• 对互联网开发者而言，若要实现：
  • 精美的网页界面
  • 流畅的用户体验
  • 基于浏览器的便捷功能
  • 高效的前后端通信
    JavaScript 是必不可少的工具。

🌐 广泛的使用领域

JavaScript 的应用早已超越浏览器，正向通用系统语言演进：

1. 浏览器平台化

• HTML5 使浏览器成为强大平台，JavaScript 可调用系统级功能，如：
  • 操作本地文件
  • 处理图片
  • 调用摄像头/麦克风

2. 服务器端开发（Node.js）

• Node.js 允许用 JavaScript 开发高性能后端服务。
• 实现全栈 JavaScript 开发（前后端统一语言）。
• 支持在嵌入式设备（如 Raspberry Pi）上运行。

3. 数据库操作

• NoSQL 数据库（如 MongoDB）基于 JSON（JavaScript Object Notation） 设计，天然支持 JavaScript 操作。
• PostgreSQL 等关系型数据库也支持用 JavaScript 编写存储过程或查询逻辑。

4. 移动应用开发

• PhoneGap / Cordova：将 HTML5 + JavaScript 打包为 iOS/Android 应用。
• React Native（Facebook）：用 JavaScript 编写组件，编译为原生 UI，兼顾性能与跨平台。
• 曾有 Firefox OS 直接以 JavaScript 作为系统开发语言（项目已终止）。

5. 内嵌脚本语言

• 被集成到多种桌面应用中，例如：
  • Adobe Acrobat（PDF 阅读器）
  • GNOME 3（Linux 桌面环境）

6. 跨平台桌面应用

• 通过框架如：
  • Electron（GitHub，用于 VS Code、Slack 等）
  • TideSDK
  • Chrome Apps / Open Web Apps
    可用 JavaScript 开发运行于 Windows、macOS、Linux 的桌面程序，无需浏览器。

🔚 小结

“所有可以用 JavaScript 编写的程序，最终都会出现 JavaScript 的版本。”
—— Atwood 定律（Jeff Atwood）

• 自 2013 年起，JavaScript 长期位居 GitHub 使用量榜首。
• 未来有望实现 “一次学习，多端开发”：用单一语言覆盖前端、后端、移动端、桌面端、嵌入式设备等全场景。
• 学习 JavaScript，就是掌握通往现代软件开发生态的核心钥匙。

与Java的区别

方面	JavaScript	Java
语言范式	多范式（函数式 + 基于原型的 OOP）	纯面向对象（基于类）
类型系统	动态类型（运行时确定类型）	静态类型（编译时确定）
函数地位	一等公民：可赋值、传参、返回、作为属性	必须属于类，不能独立存在
继承机制	基于原型（prototype）：对象直接继承其他对象	基于类（class）：类继承类
编译/执行	解释型（现代引擎用 JIT 编译）	先编译成字节码，再由 JVM 执行
语法自由度	高（无强制类型、可省略分号、灵活结构）	严格（需声明类型、结构规范）

举例说明两大区别

1. 函数是独立数据类型（一等公民）

// JavaScript：函数可以像变量一样使用
const greet = function(name) {
  return "Hello, " + name;
};

const sayHi = greet; // 函数赋值给变量
console.log(sayHi("Alice")); // Hello, Alice

// 甚至可以把函数当作参数传递
function callWithAlice(fn) {
  return fn("Alice");
}

2. 基于原型的继承

// JavaScript：对象直接从另一个对象继承
const animal = {
  speak() { console.log("Animal sound"); }
};

const dog = Object.create(animal); // dog 的原型是 animal
dog.speak(); // "Animal sound"

而 Java 必须通过 class 和 extends：

class Animal { void speak() { ... } }
class Dog extends Animal { ... }

→ Java 不允许这样：方法必须属于类，不能单独赋值或传递（除非用函数式接口 + Lambda，但本质仍是对象）。

与Typescript的区别

JavaScript 和 TypeScript 是密切相关的两种语言，TypeScript 是 JavaScript 的超集（superset）。这意味着：
✅ 所有合法的 JavaScript 代码都是合法的 TypeScript 代码，
但 TypeScript 增加了额外的语法和功能（主要是静态类型系统），以提升大型项目的可维护性和开发体验。

一、核心区别概览

特性	JavaScript (JS)	TypeScript (TS)
类型系统	动态类型（运行时检查）	静态类型（编译时检查）
编译过程	直接由浏览器/Node.js 执行	需先编译成 JS，再运行
错误检测	运行时才发现类型错误	编码阶段就能发现类型错误
工具支持	基础智能提示	强大的 IDE 支持（自动补全、重构、导航等）
学习曲线	简单易上手	需理解类型、接口、泛型等概念
适用场景	小型脚本、快速原型	中大型项目、团队协作、长期维护

二、关键差异详解

1. 静态类型 vs 动态类型

JavaScript（动态）

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));      // 5
console.log(add("2", 3));    // "23"（隐式转换，可能不是你想要的！）

→ 类型错误只能在运行时发现。

TypeScript（静态）
function add(a: number, b: number): number {
  return a + b;
}
add(2, 3);     // ✅ 正确
add("2", 3);   // ❌ 编译错误：Argument of type 'string' is not assignable to parameter of type 'number'.

→ 在写代码时就阻止错误。

2. 类型注解与接口

TypeScript 允许你定义结构化的类型：
interface User {
  id: number;
  name: string;
  isActive?: boolean; // 可选属性
}

function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

greet({ id: 1, name: "Alice" }); // ✅
greet({ id: "1", name: "Bob" }); // ❌ 错误：id 应为 number

JavaScript 无法做到这一点（除非用 JSDoc 注释，但无强制检查）。

3. 编译步骤（Transpilation）

• TypeScript 不能直接运行！
  它需要通过 tsc（TypeScript Compiler）编译成纯 JavaScript：

# 安装
npm install -g typescript

# 编译 .ts 文件
tsc app.ts  # 生成 app.js

# 然后运行
node app.js

• TypeScript 还可以将新语法（如 ES2022）降级到旧版 JS（如 ES5），以兼容老浏览器。

三、一个完整对比示例

JavaScript

// user.js
function createUser(name, age) {
  return { name, age };
}

const user = createUser("Tom", "25"); // 年龄传了字符串！
console.log(user.age + 10); // "2510"（字符串拼接，逻辑错误）

Typescript

// user.ts
function createUser(name: string, age: number) {
  return { name, age };
}

const user = createUser("Tom", "25"); // ❌ 编译时报错！
// 修正后：
const user = createUser("Tom", 25);
console.log(user.age + 10); // 35（正确）

四、何时用 TypeScript？

推荐使用 TS 的场景	仍可用 JS 的场景
✅ 中大型前端/全栈项目（React/Vue/Angular）	✅ 简单网页脚本（如表单验证）
✅ 团队协作开发	✅ 快速原型或一次性脚本
✅ 需要长期维护的代码库	✅ 学习编程入门（先掌握 JS 基础）
✅ 使用现代框架（Angular 强制用 TS）	✅ 极小项目，不想加编译步骤