JavaScript 简介：从网页脚本到全栈语言

一个经典示例：

if (true) {
  var x = 1; // var 不认花括号，x 会'逃'出 if
  let y = 2; // let 只在这个花括号内有效
  const z = 3; // const 也只在这个花括号内有效
}
console.log(x); // 输出 1
console.log(y); // 报错：y is not defined
console.log(z); // 报错：z is not defined

const 的特殊性：它禁止的是'重新赋值'，而不是'内容修改'。所以 const obj = {a:1}; obj.a = 2; 是允许的，但 obj = {}; 会报错。

3.2 数据类型：七种原始类型 + 对象

JavaScript 的数据类型可以分为两大类：

原始类型（存储值本身）：

1. Number：数字，包括整数和小数，遵循 IEEE 754 标准。经典坑：0.1 + 0.2 === 0.3的结果是 false（实际是 0.30000000000000004）
2. String：字符串，可以用单引号、双引号或反引号（模板字符串）
3. Boolean：布尔值，true或 false
4. Undefined：声明了变量但没赋值，就是 undefined
5. Null：表示'空'，是开发者主动设置的'没有值'
6. Symbol（ES6 新增）：独一无二的值，常用于对象属性名，避免冲突
7. BigInt（ES2020 新增）：表示任意大的整数，末尾加 n，如 9007199254740991n

引用类型（存储地址）：

• Object：对象，键值对集合
• Array：数组，有序列表
• Function：函数，也是对象的一种
• Date、RegExp等内置对象

3.3 类型转换：隐式与显式

JavaScript 是动态类型语言，变量类型由赋值决定，且可以在运行时改变。

隐式转换（自动发生，有时会出人意料）：

"3" + 4 + 5 // 结果是 "345"（字符串拼接）
3 + 4 + "5" // 结果是 "75"（先算 3+4=7，再转字符串拼"5"）
"37" - 7 // 结果是 30（减号会触发数字转换）

显式转换（开发者主动调用）：

Number("123") // 123
String(123) // "123"
Boolean(0) // false
parseInt("010", 10) // 10（一定要指定进制，否则可能被当成八进制）

3.4 运算符：三等号是好朋友

比较运算符的黄金法则：永远用 ===（严格相等）而不是 ==（相等）。

==会进行类型转换，导致一些匪夷所思的结果：

1 == true // true（因为 true 被转成 1）
"1" == true // true（字符串"1"转成数字 1，true 转成 1）
"" == false // true
null == undefined // true

而 ===会在比较前先检查类型，类型不同直接返回 false，更加安全可预测。

3.5 函数：一等公民

在 JavaScript 中，函数是第一等公民，这意味着它们可以像任何其他变量一样被传递、赋值给变量、作为参数传入、作为返回值返回。

三种定义方式：

// 函数声明（会提升）
function add(a, b) {
  return a + b;
}

// 函数表达式（不会提升）
const subtract = function(a, b) {
  return a - b;
};

// 箭头函数（ES6 新增，简洁，没有自己的 this）
const multiply = (a, b) => a * b;

四、进阶核心：JS 之所以强大的秘密

4.1 作用域与闭包：JS 面试的'必考题'

作用域决定了变量在哪里能被访问到。JavaScript 有三种作用域：

• 全局作用域：在任何函数之外声明的变量，页面任何地方都可访问
• 函数作用域：在函数内部用 var 声明的变量，只在函数内部可访问
• 块级作用域：用 let和 const 声明的变量，只在 {} 内部可访问

闭包是 JavaScript 最强大的特性之一。简单说，闭包就是一个函数'记住'了它被定义时的作用域，即使它后来在其他地方执行。

function createCounter() {
  let count = 0; // 这个变量被'封闭'在返回的函数中
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
// count 变量没有被销毁，它被闭包'记住'了

应用场景：创建私有变量、模块化、函数柯里化、防抖节流等。

4.2 原型与原型链：JS 的'继承密码'

JavaScript 的继承机制与众不同——它采用原型链实现继承，而不是传统的'类继承'（ES6 的 class 只是语法糖，底层仍是原型）。

核心概念：

• 每个函数都有一个 prototype 属性
• 每个对象都有一个 __proto__ 属性（指向其构造函数的 prototype）
• 当你访问一个对象的属性时，如果对象本身没有，JS 会沿着 __proto__ 一路向上找，直到找到或到达 null

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};
const alice = new Person('Alice');
alice.sayHello(); // 对象自身没有 sayHello，但它的原型上有

这就是为什么所有数组都可以用 push()、map()——它们都定义在 Array.prototype 上。

4.3 异步编程：从回调地狱到 async/await

JavaScript 是单线程的，但它通过事件循环实现了非阻塞的异步操作。

异步方案演进：

1. 回调函数（最早的方式）：

setTimeout(() => {
  console.log('3 秒后执行');
}, 3000);

问题：多个异步操作嵌套时，会形成'回调地狱'。

2. Promise（ES6 引入）：

fetch('/api/user')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

用链式调用解决嵌套问题。

3. async/await（ES2017 引入，目前最优）：

async function getUserData() {
  try {
    const response = await fetch('/api/user');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

让异步代码'看起来像'同步代码，最直观易读。

事件循环机制：JS 维护一个'调用栈'和两个'任务队列'——微任务队列（Promise.then 等）和宏任务队列（setTimeout、事件回调等）。每执行完一个宏任务，都会清空所有微任务，然后再取下一个宏任务。这保证了任务的执行顺序。

五、运行环境：浏览器与 Node.js

5.1 浏览器中的 JavaScript

在浏览器中，JavaScript 可以访问一系列 API：

• DOM 操作：document.getElementById()、document.createElement() 等，用于增删改查网页元素
• BOM 操作：window、navigator、location、history 等，控制浏览器本身
• 事件处理：addEventListener，响应用户的点击、输入等操作
• 存储技术：cookie、localStorage、sessionStorage、IndexedDB，在浏览器端保存数据
• 网络请求：fetch、XMLHttpRequest，与服务器通信

5.2 Node.js 中的 JavaScript

2009 年，Ryan Dahl 将 Chrome 的 V8 引擎搬到了服务器上，创造了Node.js。从此，JavaScript 可以写后端了。

Node.js 的核心能力：

• 文件系统：fs 模块读写文件
• HTTP 服务：http 模块创建 Web 服务器
• 进程管理：process 对象获取环境信息
• npm 生态：全球最大的包管理器，超过百万个开源包可用

六、现代工程化与生态

6.1 前端框架三巨头

• React（Facebook 出品）：组件化、虚拟 DOM、单向数据流、JSX 语法。适用于大型单页应用，还有 React Native 写移动端
• Vue（尤雨溪创建）：渐进式框架、轻量易上手、响应式数据绑定、模板语法。从简单页面增强到复杂 SPA 都适用
• Angular（Google 维护）：完整的 MVC 框架、TypeScript 优先、依赖注入、RxJS。适合大型企业级应用

6.2 工程化工具

• 打包工具：Webpack（老牌）、Vite（新生代，极速）
• 代码转换：Babel（将 ES6+ 代码转成兼容旧浏览器的代码）
• 代码规范：ESLint（检查错误）、Prettier（格式化代码）

6.3 编译到 JS 的语言

如果你不喜欢 JavaScript 的某些特性，可以用其他语言写代码，然后'编译'成 JavaScript 运行：

• TypeScript（微软）：添加了静态类型，是现在大型项目的首选
• Dart（Google）：可用于 Flutter 开发，也能编译成 JS
• Kotlin、Python等也有对应的 JS 编译方案

七、语言进化：ECMAScript 版本简史

JavaScript 的标准化版本叫ECMAScript（简称 ES）。2009 年的 ES5 奠定了现代 JS 的基础，2015 年的 ES6 是一次里程碑式的大更新。此后，ECMA 组织改为每年发布一个新版本，持续为语言注入活力。

重要版本与特性：

总结

JavaScript 从 1995 年诞生至今，已经走过了三十多个年头。它从一个'被误解的小儿科目'，成长为全球使用最广、生态最丰富、应用场景最多元的编程语言之一。

它的魅力在于：

• 低门槛：写几行代码就能看到效果，成就感来得快
• 高上限：闭包、原型、异步、事件循环，够你钻研很久
• 无处不在：浏览器、服务器、移动端、桌面端、物联网，哪里都有它的身影
• 活力无限：每年的新特性、层出不穷的框架、百万级的 npm 包，整个生态生机勃勃

如果你刚接触编程，JavaScript 会是一个很好的起点；如果你是老手，它依然值得你持续探索。正如一位开发者所说：'任何能用 JavaScript 写出来的应用，最终都会用 JavaScript 写出来'——这句话虽然夸张，但也侧面印证了这门语言的强大与包容。