为何对const声明的DOM对象引用调用replaceWith方法不会报错？

首先你的代码存在笔误：bth是变量名拼写错误，实际应该是之前声明的btn，如果运行时保留bth的写法会直接抛出变量未定义错误，以下按正确变量名解释逻辑。

const的核心约束 #

JavaScript 中const声明的变量唯一限制是不允许对变量本身进行重新赋值，完全不限制修改变量指向的引用类型值（对象、数组、DOM节点等）的内部属性，也不限制调用该引用类型值自身的实例方法。

代码未报错的原因 #

const btn = document.getElementById("btn");
btn.replaceWith(btn.cloneNode(true));

• 第一行执行完成后，btn常量存储的是页面对应DOM节点的内存引用，指向真实存在的DOM节点对象
• 调用btn.replaceWith()属于调用DOM节点自身的实例方法，该方法的作用是将调用它的DOM节点从当前DOM树中移除，替换为你传入的克隆节点，这个操作修改的是页面DOM树的结构，全程没有对btn常量本身做重新赋值
• 哪怕执行完replaceWith后打印btn的取值，它仍然指向原来的旧DOM节点，只是这个节点已经脱离了当前页面的DOM树而已，完全没有违反const的约束规则，自然不会抛出错误。

什么情况会触发const相关报错 #

只有你对btn本身做重新赋值时，才会触发const的类型错误，示例如下：

const btn = document.getElementById("btn");
// 对const变量重新赋值，直接抛出TypeError
btn = document.createElement("button");

内容的提问来源于stack exchange，提问作者Amir Nf