为何自定义close函数无法执行？alert函数正常运行的差异解析

核心现象 #

点击close btn按钮时，自定义的close()函数没有执行；但点击alert btn时，自定义的alert()能正常输出日志。

原因解析 #

这是因为浏览器原生的window.close和window.alert在属性特性上存在本质差异：

• window.close的特性：它是浏览器提供的原生窗口关闭方法，属于不可配置、不可写的属性。当你在全局作用域声明function close()时，本质是尝试给window.close赋值，但由于该属性的保护机制，这个赋值操作会被浏览器静默忽略（开启严格模式会直接抛出错误）。点击按钮时执行的还是原生的window.close()——而这个方法仅在通过window.open()打开的窗口中才能生效，普通页面调用不会有可见效果。
• window.alert的特性：原生window.alert是可写属性，你在全局声明的alert()函数会直接覆盖原生方法，因此点击按钮时执行的是自定义函数。

验证方式 #

在浏览器控制台执行以下代码，可直观看到两者的属性差异：

// 查看window.close的属性描述符
console.log(Object.getOwnPropertyDescriptor(window, 'close'));
// 输出示例：{value: ƒ, writable: false, enumerable: true, configurable: false}

// 查看window.alert的属性描述符
console.log(Object.getOwnPropertyDescriptor(window, 'alert'));
// 输出示例：{value: ƒ, writable: true, enumerable: true, configurable: true}

解决方案 #

如果需要自定义关闭相关函数，避免使用close这个被浏览器保护的名称，改用其他命名，比如：

<script>
  function myClose() {
    console.log('close function');
  }

  function alert() {
    console.log('alert function');
  }
</script>
<button onclick="myClose()">close btn</button>
<button onclick="alert()">alert btn</button>

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