JavaScript 核心 —— 彻底搞懂 Window 对象与 BOM 家族-平芜编程栈

很多同学 DOM 玩得很溜，但一到 BOM 就有点懵。其实日常开发中我们大量用到的功能（跳转页面、获取浏览器信息、倒计时、前进后退、获取 URL 参数……）几乎都来自 BOM。

搞清楚一个最核心的概念：window 到底是谁？

// 这两个写法其实是一样的alert("hi");window.alert("hi");

window 是：

浏览器的顶级对象（BOM 的核心）
JavaScript 的全局对象（所有全局变量、全局函数都是它的属性/方法）
所有 BOM 对象（location、navigator、history、screen…）都是它的子对象

一句话总结：
你写的大部分“全局”东西，其实都是在跟 window 打交道。

window 常见事件

// 写法1：推荐（能等所有资源加载完，包括图片）window.onload=function(){console.log("整个页面（包括图片等）都加载完了～");};// 写法2：只等 DOM 结构加载完（图片可能还没加载完，速度更快）window.addEventListener("DOMContentLoaded",function(){console.log("DOM 树构建完毕～");});

现在的项目基本都用框架，window.onload 反而用得少了，但面试还是经常问～

定时器 —— 前端最常用的异步手段之一

详见另一篇文章

JS 执行机制

JavaScript 采用单线程模型，这意味着同一时刻主线程只能执行一个任务。为了处理耗时操作（如网络请求、定时器、DOM 操作等），JavaScript 引入了异步机制，其核心就是事件循环（Event Loop）。

任务分类

JavaScript 中的任务主要分为两类：

同步任务
在主线程上按顺序立即执行的任务，例如变量声明、函数调用、基本的算术运算等。
异步任务
不立即执行、会被推迟处理的任务，主要包括：定时器；DOM 事件回调；网络请求；Promise 的 then/catch/finally 回调等

经典的事件循环执行流程

执行当前宏任务（从主线程执行栈开始）
执行栈清空后，立即清空当前所有微任务（执行微任务队列）
微任务队列清空后，从宏任务队列中取出一个宏任务，回到步骤1
重复上述过程，直到宏任务队列与微任务队列都为空

经典面试题解析

console.log('1');setTimeout(()=>{console.log('2');},0);Promise.resolve().then(()=>console.log('3')).then(()=>console.log('4'));console.log('5');

执行顺序分析：

同步代码执行 → 输出 1、5
遇到 setTimeout，将其回调放入宏任务队列
遇到 Promise.then，将其回调放入微任务队列
前宏任务（全局脚本）结束，清空微任务队列 → 输出 3、4
微任务队列空了，从宏任务队列取任务 → 执行 setTimeout 回调 → 输出 2

最终输出顺序：

理解宏任务与微任务的执行优先级，是掌握现代 JavaScript 异步编程的基础。

location 对象 —— URL 操作与页面导航

location 对象提供了对当前浏览器地址栏信息的完整读写能力，是前端路由跳转、参数解析最常用的 API 之一。

页面跳转与刷新方法

// 方法一：最常用，直接赋值location.href="https://www.example.com";// 方法二：类似 href，但语义更明确location.assign("https://www.example.com");// 方法三：替换当前历史记录，无法后退location.replace("https://www.example.com");// 方法四：刷新当前页面location.reload();// 正常刷新（优先使用缓存）location.reload(true);// 强制从服务器重新加载（相当于 Ctrl+F5）

注意：在现代单页应用（SPA）中，建议优先使用 history.pushState/replaceState 进行无刷新跳转，而非频繁使用 location.href。

history 对象 —— 浏览器历史记录管理

history 对象允许开发者对浏览器前进/后退栈进行读写操作，是实现单页应用路由的核心机制之一。

基础导航方法

history.back();// 等价于浏览器后退按钮history.forward();// 等价于前进按钮history.go(n);// n 可正可负，0 表示刷新当前页

7.2 HTML5 History API（SPA 核心）

// 添加一条新历史记录（修改地址栏但不刷新页面）history.pushState({page:1},"","/page1");// 替换当前历史记录（不增加新条目）history.replaceState({page:2},"","/page2");// 监听历史状态变化（后退、前进触发）window.addEventListener("popstate",(event)=>{console.log("当前状态：",event.state);// 根据 event.state 重新渲染页面});