进阶知识点补充
进阶知识点补充这一篇是收尾的进阶补充，把之前零散或没深入的知识点集中讲透：原型与原型链、深浅拷贝、防抖/节流、Symbol、迭代器与生成器，以及严格模式、柯里化、类型判断、逻辑赋值运算符、Proxy 等。 一、原型与原型链（深入）1. 核心关系（基础回顾）123456789function Person(name) { this.name = name;}Person.prototype.say = function () { console.log(this.name);};const p = new Person("Tom");p.say(); // "Tom" 三条关键等式（原型链的本质）： 123p.__proto__ === Person.prototype; // true（实例 → 原型对象）Person.prototype.__proto__ === Object.prototype; // true（原型对象 → Obje...
异步编程与网络请求
异步编程与网络请求JavaScript 是单线程的：一个主线程执行所有代码。如果网络请求是”同步”的，发请求时页面会整个卡死直到响应返回。所以 JS 用异步机制处理耗时操作（网络请求、定时器、文件读取）。 这一篇讲异步编程的核心（回调 → Promise → async/await）和网络请求（fetch / AJAX），是 Web API 阶段最核心、也最容易拉开差距的一篇。 一、同步 vs 异步12345678910// 同步：顺序执行，遇到耗时操作就阻塞console.log("1");const result = 同步请求(); // 假设这里要等 3 秒，页面卡死console.log("2");// 异步：不阻塞，先执行后面的代码console.log("1");fetch(url).then(() => console.log("2")); // 请求完成后才执行console.log("3");// 输出顺序：1 → 3 → 2 ...
BOM
BOMBOM（Browser Object Model，浏览器对象模型）是浏览器提供的、用来操作浏览器本身的对象集合，window 是它的顶层对象。 这一篇讲 BOM 的重要对象：window、location、history、navigator、screen，以及本地存储 localStorage / sessionStorage（重点）。 一、window 对象window 是全局对象，所有全局变量和全局函数都是 window 的属性和方法。 123var name = "Tom";console.log(window.name); // "Tom"（全局变量挂在 window 上）console.log(window === window.window); // true 1. 常用方法1234567alert("提示框"); // 弹窗提示confirm("确定吗？"); // 确认框，返回 true / falseprompt("请输入&qu...
事件
事件事件是用户与页面交互的桥梁：点击、输入、滚动、按键都会触发事件，JS 通过监听事件来响应用户操作。 这一篇讲事件的注册与解绑、事件类型、事件对象、事件流（冒泡/捕获）、事件委托。其中事件流和事件委托是重点，也是 JS 与 Java GUI（如 Swing 的监听器）最大的差异。 一、注册与解绑事件1. 三种注册方式12<!-- 方式一：HTML 属性（不推荐，结构和逻辑混在一起） --><button onclick="alert('hi')">按钮</button> 12345678910// 方式二：DOM 属性（同一事件只能绑一个，后写覆盖前写）btn.onclick = function () { console.log("点击"); };// 方式三：addEventListener（推荐，可绑多个，按顺序执行）btn.addEventListener("click", function () { con...
DOM 基础与节点操作
DOM 基础与节点操作DOM（Document Object Model，文档对象模型）是浏览器把 HTML 解析成的一棵节点树，JS 通过 document 对象操作这棵树，就能动态改变页面内容。 这一篇把 DOM 的基础操作合并讲完：获取元素、操作内容、操作属性与样式、节点关系、增删节点、表单操作。这是 DOM 的地基，后面所有交互都建立在它之上。 一、DOM 概念123456<!DOCTYPE html><html><body> <div id="box">hello</div></body></html> 浏览器会把它解析成一棵节点树：document → html → body → div，每个标签都是一个”节点（元素节点）”。 二、获取元素12345678910// 1. 按 id（返回单个元素，不存在返回 null）document.getElementById("box");// 2. 按标签名 / 类名（返回动态 HTMLColle...
对象与常用内置 API
对象与常用内置 API这一篇分两块：对象（JS 的核心数据载体，与 Java 的”类”差异很大）和常用内置 API（String、Number/Math、Date、JSON、定时器、console、正则等日常工具箱）。 其中原型与 class、Date 的月份从 0 开始、JSON 序列化的坑是重点差异；Array、Set/Map 的方法已在第 2 篇覆盖，本篇不再重复。 一、对象基础1. 对象字面量与属性访问123456789const user = { name: "Tom", age: 18, "full-name": "Tom Hanks" // 含特殊字符的键要加引号};user.name; // 点访问user["name"]; // 方括号访问（键是变量时用这个）user["full-name"]; // 特殊键必须用方括号 与 Java 的差异：Java 要 new 类，JS 直接用...
函数
函数函数是 JavaScript 最核心的概念，也是与 Java 差异最大的部分。最根本的一点：JS 的函数是一等公民——函数是”值”，可以赋给变量、当参数传、当返回值返回；并且 this 是运行时动态绑定的，与 Java 的 this 含义完全不同。 这一篇覆盖函数从基础到进阶的全部常用知识点：函数声明/表达式、默认参数、rest 参数、箭头函数、IIFE、闭包、this、回调与高阶函数、call/apply/bind。 一、差异总览 维度 Java JavaScript 函数地位 方法，属于类 一等公民，是值 定义方式 返回值 方法名(参数) {} 声明式 / 表达式 / 箭头函数 返回类型 / 参数类型 必须声明 无类型声明 重载 支持 不支持（后定义覆盖前面的） 参数个数 固定（可变参数除外） 随意，多传少传都行 this 指向当前实例 运行时动态绑定 默认参数 无（靠重载） 支持 (a = 1) 二、函数基础1. 定义与调用（与 Java 对照）12...
流程控制、数组与集合
流程控制、数组与集合这一篇讲 JS 的流程控制（if / switch / 异常）、循环（for / while / for…in / for…of）、数组、Set 与 Map，以及各类遍历方式。 其中 for...in、for...of、数组的高阶方法（map/filter/reduce）是 JS 与 Java 差异最大的部分；if、for、switch 等基础语法与 Java 几乎一致，只做对照。 阅读方式：与 Java 相同的语法简单带过，重点看「差异」和「⚠️ 坑点」。 一、流程控制1. if / else if / else（与 Java 相同）1234567if (a > 0) { // ...} else if (a === 0) { // ...} else { // ...} 唯一差异：条件表达式不强制是 boolean，JS 会用 truthy/falsy 自动判断（0、"...
变量、数据类型与运算符
变量、数据类型与运算符这一篇把 JS 基础语法中的字面量与变量、数据类型、类型转换、运算符一口气讲完。JavaScript 是动态类型 + 弱类型语言：变量无类型前缀、类型运行期确定、运算时会自动隐式转换——这正是它与 Java 差异最集中的地方，也是坑最多的地方。 阅读方式：与 Java 相通的部分只做对照不展开，重点看「差异」和「⚠️ 坑点」。 一、差异总览 维度 Java JavaScript 类型系统 静态类型，编译期确定 动态类型，运行期确定 变量声明 int x = 1; let x = 1;（无类型前缀） 基本类型 8 种基本类型 7 种原始类型 空值 只有 null null 和 undefined 相等比较 ==（基本类型比值，引用比地址） == 和 === 两种 隐式转换 基本没有 到处都有 逻辑运算 &&/` 二、字面量与变量1. 字面量（literal）字面量就是直接写在代码里的值，Java 和 JS 概念相同，只是写法略有差异。 1234567891011121314151...
移动端与响应式
移动端适配与响应式开发同一个网页要在手机、平板、电脑上都显示得合理，需要解决两件事： 移动端适配：让页面在手机上按设计稿比例等比缩放，元素大小随屏幕宽度变化（用 rem、vw/vh、vmin 等单位）。 响应式开发：让页面在不同宽度下”换一种布局”，大屏多列、小屏单列（用媒体查询 @media 或栅格系统）。 两者常常配合使用：适配负责”大小”，响应式负责”布局”。 一句话记忆：适配是”同一套尺寸按比例缩放”，响应式是”不同宽度用不同布局”。 一、视口 viewport移动端浏览器默认会按”桌面宽度”渲染页面，导致页面在手机上被缩小、字看不清。需要用 meta 标签告诉浏览器按设备实际宽度渲染。 1<meta name="viewport" content="width=device-width, initial-scale=1.0"> 参数 作用 常用值 width 视口宽度 device-width（等于设备宽度） initial-scale 初始缩放比例 1.0（不缩放） maximum-...
