JS代码中matcher与addListener的疑问及无声明运行问题

1. 未声明的matcher为何能运行？ #

你写了"use-strict"严格模式，但未声明就赋值matcher = ...还能运行，是因为代码在浏览器全局作用域中，浏览器把未声明的变量自动挂载到了window对象上（严格模式本应禁止这种行为，可能是部分浏览器的兼容处理）。正确写法应该用let或const声明变量，比如：

const matcher = window.matchMedia("(prefers-color-scheme: dark)");

2. matcher到底是什么？ #

matcher是window.matchMedia()返回的**MediaQueryList对象**，这个API用来检测当前页面是否匹配指定的媒体查询规则：

• 传入的"(prefers-color-scheme: dark)"是媒体查询表达式，用来判断用户系统是否开启了深色模式。
• 它的核心属性matches是布尔值：如果当前符合媒体查询条件，matches为true，否则为false。

3. addListener和addEventListener的区别？ #

addListener是MediaQueryList对象特有的旧版方法，作用是监听媒体查询的匹配状态变化（比如用户切换深色/浅色模式）。现在标准已经推荐用addEventListener('change', 回调函数)替代它——addListener已被标记为废弃，但浏览器为了兼容旧代码依然支持，所以你的代码能正常运行。两者功能一致，比如可以把代码改成：

matcher.addEventListener('change', OnUpdate);

4. OnUpdate下方的代码逻辑拆解 #

逐行解析：

• matcher = window.matchMedia("(prefers-color-scheme: dark)");：创建媒体查询对象，实时检测用户的深色模式偏好。
• matcher.addListener(OnUpdate);：给这个对象添加监听，一旦用户的深色模式设置改变，就自动触发OnUpdate函数切换图标。
• OnUpdate();：页面加载完成后立刻执行一次OnUpdate，根据当前的模式状态初始化图标，避免页面刚加载时图标显示错误。

另外补充OnUpdate函数的逻辑：当检测到用户处于深色模式（matcher.matches为true），就移除深色主题图标，把浅色主题图标添加到页面头部；反之则添加深色图标，移除浅色图标，实现跟随系统主题切换网站图标的效果。

内容的提问来源于stack exchange，提问作者coolest person on earth